View Single Post
Old 04-21-2011, 05: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: 7,330
Karma: 20140432
Join Date: Mar 2010
Location: Roundworld
Device: Kindle 2 International & Sony PRS-T1 & BlackBerry PlayBook
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 online now   Reply With Quote