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.