MobileRead Forums - View Single Post - Semantic formating for simple poetry: any comments on my code?

sourcejedi · 04-19-2011, 01:34 PM

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.

04-19-2011, 01:34 PM	#1
sourcejedi Groupie 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.