Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 04-19-2011, 01:34 PM   #1
sourcejedi
Groupie
sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.
 
sourcejedi's Avatar
 
Posts: 155
Karma: 200000
Join Date: Dec 2009
Location: Britania
Device: Android
Semantic formating for simple poetry: any comments on my code?

Code:
<p>1<br/>
2<br/>
3</p>

<p>a<br/>
b<br/>
</p>
- P for stanzas and BR for line breaks, is what the HTML specs would like you to do. But it doesn't work well when long lines of poetry are wrapped; there's no distinction between the "real" line breaks and the line-wrapping. The solution in HTML+CSS is to use a hanging indent -

Code:
p { text-indent: 0.5in; margin-left: 0.5in }

<p>1</p>
<p>2</p>
<p>3</p>

<p><br /></p><!-- blank line -->
<p>second stanza...
- but oh! is that markup an abuse of HTML semantics. So I discovered a hybrid that seems to work in browsers (and WebKit, hence presumably iOS):

Code:
p .line { display:block }

<p>
<span class="line">1<br/></span>
<span class="line">2<br/></span>
<span class="line">3</span></p>

<p>
<span class="line">Second stanza...
- which seems nice, but is it a good idea? Any idea what ADE would do with it?

The BR's at the end of the 'display:block' SPANs are puzzling me. If I put a BR at the end of a P, I get an extra blank line -- but it doesn't seem to happen with the SPANs.

innerHTML says the BRs are still there -- so it's not a parsing quirk. And it shouldn't be a quirks mode quirk; I used a HTML5 doctype on my test page. Is this actually standardized anywhere?

CSS shows a "default" styling for BR using generated content, which in theory could be overridden in case future renderers adopt a more uniform treatment. (br:after, br:before {content:none}). But that doesn't work in current browsers, so there's no guarantee it would help. Which suggests that this hasn't been formalized in a standard.
sourcejedi is offline   Reply With Quote
Old 04-19-2011, 01:41 PM   #2
sourcejedi
Groupie
sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.
 
sourcejedi's Avatar
 
Posts: 155
Karma: 200000
Join Date: Dec 2009
Location: Britania
Device: Android
Aha! If I remove the BR's, the line breaks go away too. I'm clearly missing something about how CSS works.
sourcejedi is offline   Reply With Quote
Old 04-19-2011, 02:00 PM   #3
ATDrake
Wizzard
ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.
 
Posts: 11,517
Karma: 33048258
Join Date: Mar 2010
Location: Roundworld
Device: Kindle 2 International, Sony PRS-T1, BlackBerry PlayBook, Acer Iconia
<span>s are an inline element. Whatever you're using to view seems to ignore the CSS display setting and only apply the <br>s.

I think you're getting extra linespacing with your combo <p><br> because unless you explicitly set to override, <p>s are usually rendered with a default line-break and linespace anyway.

I would advise the use of <div> for your stanza lines. It comes with a built-in linebreak but no linespace and should give you the display result you want in a reasonably semantic way without having to tweak the CSS too much or add extra markup that might be superfluous.
ATDrake is offline   Reply With Quote
Old 04-20-2011, 04:24 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
You can use plain <div>, with something like:

Code:
<div class="poetry">
  <div class="stanza">
    <div>line 1</div>
    <div>line 2</div>
    <div>line 3</div>
  </div>
  <div class="stanza">
    <div>line 4</div>
    <div>line 5</div>
    <div>line 6</div>
  </div>
</div>
Code:
div.poetry { /* set margins for the whole poetry block */ }
div.stanza { /* set margins for each stanza */ }
div.poetry div { /* set hanging indent for poetry lines */ }
Jellby is offline   Reply With Quote
Old 04-21-2011, 11:05 AM   #5
sourcejedi
Groupie
sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.
 
sourcejedi's Avatar
 
Posts: 155
Karma: 200000
Join Date: Dec 2009
Location: Britania
Device: Android
How about negative margins on inline boxes?

Thanks for helping a newbie sort himself out! All your technical points look correct. It's interesting that the default styling of DIV is so convenient for lines of poetry; I hadn't realized that. You're also right that it's a slight improvement on P for my purposes: better to use a more semantically neutral element than to lie outright.

1. Even after re-fixing my test environment so my SPANs were actually displayed as block elements, I still see the mystery that a single BR at the end of the display:block SPAN has no effect. This is exactly what I want, but I can't rely on it unless I know why.

2. Thinking about it, I don't want to literally "disable" BR when the CSS is enabled. I realized I could do that simply using display:none, but then I break copy+paste -- it looks like Firefox very sensibly skips display:none elements during copy+paste.

3. The third solution, avoiding all the issues so far, would be to use display: inline-block (and put the BRs just outside the span). But it's not supported by EPUB 2.0.

4. That's pretty much everything you could do to get text-ident to work, but what about other properties? How about using negative margins on inline boxes:

Code:
<!DOCTYPE html><!-- complete (though technically invalid) document -->
<style>
.basic-poetry { margin-left: 2em; }
.basic-poetry > p > span { margin-left: -2em; }

/* P may well be styled with an indent, e.g. iBooks default stylesheet, so we'd better reset it */
.basic-poetry > p { margin-top: 0; margin-bottom: 1em; text-indent: 0 }
</style>

<div class="basic-poetry"><!-- consider replacing DIV with SECTION or BLOCKQUOTE, according to context -->
<p>
<span>this is a very long line, a very long line, to i-i-i-ndicate the use, the usefulness of hanging indents to us all, except it's not real poetry so the point is probably lost, never mind, tra-la;</span><br />
<span>line 2</span><br />
<span>line 3</span></p>

<p>
<span>line 4, which starts a new stanza</span><br />
<span>line 5</span></p>
</div>
sourcejedi is offline   Reply With Quote
Old 04-21-2011, 11:09 AM   #6
sourcejedi
Groupie
sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.
 
sourcejedi's Avatar
 
Posts: 155
Karma: 200000
Join Date: Dec 2009
Location: Britania
Device: Android
Rant: reliance on CSS

Quote:
Originally Posted by Jellby View Post
You can use plain <div>, with something like:
Relying on CSS to provide essential information is a pet peeve of mine. If the UA ignores the CSS in your example, it's going to lose the stanza boundaries.

In the past, I've heard this "justified" with <but we're talking about EPUB, and CSS support is mandatory for conformant EPUB reading systems>. But in this case, I think it would also break copy+paste.

If I want to copy a few short verses into an email to a friend, copy+paste will only see the selected HTML, right? It's not guaranteed to see the CSS that sets margins for each stanza.

Last edited by sourcejedi; 04-21-2011 at 11:09 AM. Reason: fix posting markup ;)
sourcejedi is offline   Reply With Quote
Old 04-21-2011, 04:32 PM   #7
ATDrake
Wizzard
ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.
 
Posts: 11,517
Karma: 33048258
Join Date: Mar 2010
Location: Roundworld
Device: Kindle 2 International, Sony PRS-T1, BlackBerry PlayBook, Acer Iconia
Quote:
Originally Posted by sourcejedi View Post
1. Even after re-fixing my test environment so my SPANs were actually displayed as block elements, I still see the mystery that a single BR at the end of the display:block SPAN has no effect. This is exactly what I want, but I can't rely on it unless I know why.
It's been a while since I seriously tried to grok the finer points of CSS+HTML interaction, but I think this has to do with the box model and how it's supposed to handle collapsing vertical margins, especially on the generic flow elements that were introduced post-CSS1.

A <br> inside a <span> counts as part of the <span>, and when you display: block it, it's included inside the new block box boundaries and can only "stack" according to default new display: block rules, which say 1 linebreak, no extra space unless declared elsewhere in the CSS.

So a single <br> creates a linebreak, which is "folded" inside the linebreak created when the <span> becomes a block, and sort of squishes into just the one linebreak as they stack directly on top of one another.

Whereas a <br> outside the <span> adds an extra, because it's like a wedge stuck in between the new blocks, providing new linespace.

You can see this exact same effect with plain <div>s. A single <br> inside the <div> will not increase the linespace separating the <div>s, but more than one will, as will one outside.

Quote:
Originally Posted by sourcejedi View Post
4. That's pretty much everything you could do to get text-ident to work, but what about other properties? How about using negative margins on inline boxes:
I'm not sure what your code is trying to accomplish here? You've effectively set all the <span>s to outdent by 2em, but I don't really see the use of this unless you're trying to offset pushed-in regular text and outdented poetic text?

For a classic hanging indent with just the first line outdented, I think you'd either have to use a :first-child pseudo-selector on .basic-poetry > p, or just mark up the first lines of each stanza or poem (depending on how you want it to look) with a new class to target. Possibly you might be able to use negative values on text-indent (which is supposed to be a block-level style) on the <p> and just push in the .basic-poetry block entirely and skip applying a margin to the <span>s, if that's what you want to achieve.

Quote:
Originally Posted by sourcejedi View Post
If I want to copy a few short verses into an email to a friend, copy+paste will only see the selected HTML, right? It's not guaranteed to see the CSS that sets margins for each stanza.
In this case, I would go with <p>s for containing and visually separating the separate stanzas, and <div>s for keeping each line individual, as well as a <div> as a whole-poem container*. Less breakage that way, because if the CSS styling doesn't get copy-pasted, <span>s are going to collapse into single lines without the <br>s to separate them, display: block or no.

Hope this helps.

* It's a flow element, so go with the flow†…

† I will refrain from making a "use the Source, Luke…" joke here.
ATDrake is offline   Reply With Quote
Old 04-22-2011, 04:55 AM   #8
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by ATDrake View Post
In this case, I would go with <p>s for containing and visually separating the separate stanzas, and <div>s for keeping each line individual
Except that <p>s cannot contain block-level elements, such as <div>. Which is a pity, because sometimes a block (of poetry, a centered line, a blockquote, etc.) is semantically inside a paragraph, and is visually marked so because the first line after the block is not indented, and sometimes even starts with a lowercase letter. This would be ideally coded with <p>...<div>...</div>...</p>, but due tho this restrictions it has to be: <p>...</p><div>...</div><p class="noindent">...</p>.
Jellby is offline   Reply With Quote
Old 04-22-2011, 05:22 AM   #9
sourcejedi
Groupie
sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.
 
sourcejedi's Avatar
 
Posts: 155
Karma: 200000
Join Date: Dec 2009
Location: Britania
Device: Android
Quote:
I'm not sure what your code is trying to accomplish here? You've effectively set all the <span>s to outdent by 2em ... I think you'd either have to use a :first-child pseudo-selector
Try it yourself - literally, just c&p my code into a file. It works as a hanging indent for me.

The trick is that the left margin on inline boxes only applies to their first line. (Similarly, the right margin applies only to their last line). The old O'Reilly files I came across pointed out that you also see this with borders on inline boxes. [No link -- I don't think it was supposed to be online. But it all seems very nice and consistent].

Quote:
Originally Posted by ATDrake View Post
...I think... So a single <br> creates a linebreak, which is "folded" inside the linebreak created when the <span> becomes a block, and sort of squishes into just the one linebreak as they stack directly on top of one another.

You can see this exact same effect with plain <div>s. A single <br> inside the <div> will not increase the linespace separating the <div>s, but more than one will, as will one outside.
Interesting, I hadn't tested DIV. That's almost plausible, but CSS doesn't say anywhere "but P is special, ATDrake's explanation doesn't apply to P". Note that the default spacing on P is defined as a margin, not as an extra line break. That's not a de jure standard, because the default layout of P isn't set in stone by a standard. But it's described that way in non-normative parts of various standards, and that's how everyone implements it. If you only refer to CSS, DIV with a margin would work exactly the same as P -- but it doesn't.

What CSS does say is: BR is special; its behaviour cannot be described by CSS. It also hints that it's a replaced element.

I did refer to the CSS2.1 stylesheet earlier, which includes an attempt at default styling for BR. But it's non-normative, so it's not necessarily subject to the same scrutiny. Firefox (v4) and at least one other still treat it as a replaced element which can't really be styled. And the suggested default style uses generated content and 'white-space: pre-line'; so it should be fully defined by the appropriate section, which doesn't justify this behaviour at all. So I think it's unsafe to rely on. For someone developing a new reading system, they're unlikely to put extra effort into matching browser rendering when it's not part of the spec.

Quote:
In this case, I would go with <p>s for containing and visually separating the separate stanzas, and <div>s for keeping each line individual, as well as a <div> as a whole-poem container*. Less breakage that way, because if the CSS styling doesn't get copy-pasted, <span>s are going to collapse into single lines without the <br>s to separate them, display: block or no.
1) Document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag: <p><div>line1</div></p>. (W3C validator in html fragment mode and XHTML doctype; the HTML doctype also disagrees: it automatically closes the P when it sees the DIV, and then complains about the extra closing P tag).

2) Confirmed. I can certainly see why people like DIV for lines of poetry.

If I took that approach, I'd insert blank lines using flow content. Either the deprecated <div><br/></div>, similar to what Sigil generates if you leave a blank paragraph, or the old <div>&nbsp;</div> de-facto standard invented by MS Word.

Quote:
* It's a flow element, so go with the flow†…
<reads>. Flow is almost the most general category, which excludes only funky meta stuff like HEAD. Um, that is, it works as a joke, but it's too general to help as an explanation .

Quote:
† I will refrain from making a "use the Source, Luke…" joke here.
That's where my alias comes from .

Last edited by sourcejedi; 04-22-2011 at 05:31 AM.
sourcejedi is offline   Reply With Quote
Old 04-22-2011, 05:31 AM   #10
ATDrake
Wizzard
ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.
 
Posts: 11,517
Karma: 33048258
Join Date: Mar 2010
Location: Roundworld
Device: Kindle 2 International, Sony PRS-T1, BlackBerry PlayBook, Acer Iconia
Quote:
Originally Posted by Jellby View Post
Except that <p>s cannot contain block-level elements, such as <div>.
Darn. I thought they were going to tweak that with HTML 5. Apparently not, now that I check the specs.

I guess <p>+<span><br> is the way to go for cut-and-paste comptibility, then.

Mind you, I wouldn't bother putting display: block on the the <span>s, since the <br>s accomplish the task of visually separating them, and I think a hanging indent is best handled by using a negative text-indent value on the containing block.

Though alternatively, one could be perverse and add padding-left to the <span>s and no padding-left to the :first-child <span> of the containing <p>.

Assuming a sufficient quantity of rendering agents recognize the more difficult pseudo-class selectors, which I would personally not bet upon. I suppose marking up the first lines with special classes would be the way to go.
ATDrake is offline   Reply With Quote
Old 04-22-2011, 05:40 AM   #11
sourcejedi
Groupie
sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.sourcejedi ought to be getting tired of karma fortunes by now.
 
sourcejedi's Avatar
 
Posts: 155
Karma: 200000
Join Date: Dec 2009
Location: Britania
Device: Android
Quote:
Originally Posted by ATDrake View Post
I think a hanging indent is best handled by using a negative text-indent value on the containing block.
Doesn't work, I tried it.
  1. text-indent is defined in terms of :first-line.
  2. :first-line means the first line of a block box.
= to get text-indent to work, you need one block box per line

=> once you've got block boxes, <br> at the end is going to leave blank lines, which you need to nullify somehow.

- you either have to rely on this undefined "a single <br> at the end of a block box has no effect on layout, unless the block box is a P element"

- or you have to do something even crazier like fixing the line-height and then setting a negative margin-top on br+span.

- which is why I think I prefer using inline boxes with negative margins.
sourcejedi is offline   Reply With Quote
Old 04-22-2011, 05:47 AM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by ATDrake View Post
Mind you, I wouldn't bother putting display: block on the the <span>s, since the <br>s accomplish the task of visually separating them, and I think a hanging indent is best handled by using a negative text-indent value on the containing block.
I think you are not addressing the core problem. Having poetry lines is easy, the tricky thing is having each line wrap independently and with a hanging indent when the block width is small. For example, this verse:

Code:
'You are old, Father William', the young man said,
  'And your hair has become very white;
And yet you incessantly stand on your head--
  Do you think, at your age, it is right?'
should display as four lines, 2nd and 4th indented (but this indent is not the problem we are dealing with now), if the width is sufficient. But if the screen is narrower, it could be something like:

Code:
'You are old, Father William', the young
                man said,
  'And your hair has become very white;
And yet you incessantly stand on your
                head--
  Do you think, at your age, it is right?'
Note the 1st and 3rd lines are now wrapped, with a large hanging indent to clearly mark their second parts as belonging to the same verse line (in some cases/countries/traditions, the second parts should be right-aligned instead).
Jellby is offline   Reply With Quote
Old 04-22-2011, 06:28 AM   #13
ATDrake
Wizzard
ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.ATDrake ought to be getting tired of karma fortunes by now.
 
Posts: 11,517
Karma: 33048258
Join Date: Mar 2010
Location: Roundworld
Device: Kindle 2 International, Sony PRS-T1, BlackBerry PlayBook, Acer Iconia
Quote:
Originally Posted by sourcejedi View Post
The trick is that the left margin on inline boxes only applies to their first line. (Similarly, the right margin applies only to their last line).
Ah. I was fooled by there only being one very long line that indented at the wrap, and the rest following being too short for my lazy brain to notice the effect at a cursory glance. That makes sense now.

Quote:
Originally Posted by sourcejedi View Post
That's almost plausible, but CSS doesn't say anywhere "but P is special, ATDrake's explanation doesn't apply to P".
Honestly, it's all just handwavy guessing anyway. I think the real reason is that browsers apply a set default style to <p> and <p> in conjunction with <br> to match people's expectations of how they should work, but don't do it with <div> beyond putting in the obligatory block-level break from sibling content.

There's probably no actual consensus because the W3C's never bothered setting down even suggested base guidelines for how stuff might present itself in particular types of user agents for some form of lowest common denominator visual compatibility, and then kind of relied on CSS to automagically fix presentation issues across the board, and then people have to come up with various workarounds when it doesn't.

Quote:
Originally Posted by sourcejedi View Post
If I took that approach, I'd insert blank lines using flow content.
Only we're not supposed to do any of that anymore. Along with many of the more useful workarounds for the intersection of markup and presentation limitations. Sigh.

Quote:
Originally Posted by Jellby View Post
I think you are not addressing the core problem. Having poetry lines is easy, the tricky thing is having each line wrap independently and with a hanging indent when the block width is small.
You're right; I mistook the OPs' code as being intended to produce the more usual type of typographical hanging indent, rather than a line offset type. Sorry for the confusion.

Quote:
Originally Posted by sourcejedi View Post
=> once you've got block boxes, <br> at the end is going to leave blank lines, which you need to nullify somehow.

- you either have to rely on this undefined "a single <br> at the end of a block box has no effect on layout, unless the block box is a P element"

- or you have to do something even crazier like fixing the line-height and then setting a negative margin-top on br+span.
If it weren't for the cut-and-paste compatibility issue, I think I'd choose to go with appropriately classed and nested <div>s myself.

Your example code works exactly the way it originally displayed after I changed all the <p> and <span> to <div>, got rid of the <br>, and changed the now .basic-poetry > div > div from a margin-left to a text indent.

It would seem to avoid the uncertainty you describe above, without having to worry about much in the way of rendering agent incompatibility.

Quote:
Originally Posted by sourcejedi View Post
- which is why I think I prefer using inline boxes with negative margins.
Well, you've got things working the way you want them to with only one minor concern.

Possibly you could just test your example file in as many browsers/reader apps as you can try out and see if they're reasonably consistent in giving the no-extra-linespace after <span>+<br> for reassurance. They probably will, since everybody really just wants to look-and-feel like everyone else*.

After that, full speed ahead and damn the torpedos!

* Except Microsoft, who want everyone else to look-and-feel like them.
ATDrake is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Formatting, code, simple help needed panda6855 Sigil 43 01-13-2011 06:37 PM
request for comments on my poetry Joebill Writers' Corner 24 11-14-2010 06:25 PM
erm, simple question , hope for simple answer! al zymers Amazon Kindle 5 09-25-2010 01:01 PM
Let's create a source code repository for DR 800 related code? jraf iRex 3 03-11-2010 12:26 PM
Simple question for a simple mind :) PKFFW OpenInkpot 6 08-27-2009 09:00 PM


All times are GMT -4. The time now is 10:21 PM.


MobileRead.com is a privately owned, operated and funded community.