molly.com
Friday 29 April 2005
p or pre?
So what’s the semantic verdict?
p or pre?
Help me out here, friends. Which is truly better?
This one:
<p>The world is my family<br />
Wherever I am right now<br />
Is all that matters.</p>
Or this one:
<pre> The world is my family Wherever I am right now Is all that matters. </pre>
Well, you get the idea. I know others have asked this before, but I’m still at a loss for a really articulate answer.
Any ideas? If so, please do submit below.
Filed under: society, standards, travel, web design and development
Posted by: Molly | 23:10 | Comments (47)
Well I understandable that is bolder and is simple without bolder. If you want bolder to strike anyone pay attention on your message…use . Just professional look then use without strike. That my opinion. That all.
This IS a tough one. Whitespace is important in poetic structure, so from a strictly semantic viewpoint, I would say is appropriate. However, is supposed to be rendered only in fixed-pitch, so … I think W3C should recommend be rendered in any pitch and
rendered in fixed-pitch.Let’s try this again…
This IS a tough one. Whitespace is important in poetic structure, so from a strictly semantic viewpoint, I would say pre is appropriate. However, pre is supposed to be rendered only in fixed-pitch, so … I think W3C should recommend be pre rendered in any pitch and code rendered in fixed-pitch.
My vote is for <pre>: In a poem it’s of importance both that existing whitespace is preserved, and that no extra whitespace is inserted.
If you fear the monospace font, there’s always CSS.
If you were to use P’s, you should separate the BR’s with commas for screen-readers. However, you should actually be using a PRE tag for this because the text is preformatted.
“For all HTML elements except PRE, sequences of white space separate ”words“ (we use the term ”word“ here to mean ”sequences of non-white space characters“). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.”
This quote from the W3C indicates that whitespace in PRE tags has meaning. Thus, you don’t need any commas or other separators. Screen-readers should understand that the new line in a PRE tag represents the ending of a sentence or phrase. Additionally, the W3C defines a BR tag as whitespace when it says, “Line breaks are also white space characters.” This indicates that even if you did use a P tag with BR tags, a screen reader would ignore the BR tags and consider it all one sentence. This would obviously cause the screen reader to read the sentence as a group of fused sentences (sentences joined together without any punctuation, for those who don’t care to know a lot about English grammar).
If you read up on the HTML 4.01 specification, you’ll find that the W3C mentions, “non-visual user agents are not required to respect extra white space in the content of a PRE element.” Although this may indeed be the case, I think most non-visual user agents respect the whitespace anyway. In either case, the W3C seems to suggest the use of PRE tags for poetry, because a little later in the specification there is a W3C example of a poem (from To a Skylark) that is wrapped in PRE tags.
In your case, Molly, I don’t think either is correct. Your P example would definitely be incorrect, but your PRE example is incorrect as well. Your poem lacks some punctuation. If all of that text were put onto one line and read aloud, anyone listening would be confused. Your first line needs a period or semi-colon in order to make sense. If you use a semi-colon after the first line and wrap the poem in PRE tags, I am convinced that your code will be 100% semantic.
In the case of poetry I would prefer P.
The way I see it, what you are doing is ending a line and starting a new one, not preserving formatting. It seems like the perfect use of BR.
The line break is part of the structure of your content (the poem) so the line break in the source code is justified: it’s part of the structure, it is not presentational.
Of course the question is: isn’t poetry always presentational anyway? The very purpose of poetry is its form not in its meaning (you can’t translate poetry). Where you can see that the web was made for scientific exchange more than poetic or litterary expression.
@ Jonathan
With all due respect I don’t think one should add any kind of punctuation to poetry just to make it accessible. Punctuation is very important to poetry (at least in French, my mother tongue).
Tables, for sure. I reckon you could wrap a table around each line, and then a table around the lot (maybe two for good measure).
With any luck, i could get up to four or five tables going to mark that up!
Would a blockquote be inappropriate?
It depends on what you want to preserve—just the line breaks or all the whitespace. In your example, the only whitespace to preserve is the line breaks, but I suspect that you’d want to preserve other layout spacing if it existed. Therefore
pre.My first thought was that using the
pelement, with style rule ofwhite-space: pre, was the obvious solution; however, when the CSS is disabled it lacks semantics. It seems, therefore, that thepreelement makes more sense.When XHTML 2.0 emerges, a new
lelement (see working draft) will do the task for you.As mentioned before, the new
litem does look like a good solution; but it isn’t here yet.I would vote for the <p> tag with <br>’s for the following reasons:
<pre> tag denotes that whitespace matters. This would be good for ascii art, but you don’t really care about that, you only care about line breaks
<br> What do you know, a semantec tag which actually means line break. Sounds like a good use to me. This would allow us to break each line in a section of a poem perfectly.
<p> A paragraph tag, in the example of a poem, I think this is perfect for each section (or paragraph) of the poem.
other options: You could also wrap each line in a <nobr> tag, with a <wbr> tag between each line.
Jehiah, she Does want whitespace to matter. As said above by Jonathan, linebreaks may be considered as non-meaningful linebreaks, and screenreaders would simply read the entire piece as one sentence, but that’s not what she’s going for, here. She wants the whitespace (newlines, in this case) to indicate a pause or a new “sentence”; a new line in the poem.
PRE is the better usage.
In line with Russ’ comment, I missed one solution.
Make it a GIF image with a longtext=”" attribute, detailing how the poem should be pronounced with a full essay on the choice of GIF instead of either P or PRE, and how you feel that longtext attributes should always be filled accordingly, i.e. with a long, long text….
Code is poetry. And how do you mark up code?
<pre><code>. Exactly.P.S. I tried to wrap “Code is poetry” in
<q>, but it didn't work...Thanks Faruk, for the longdesc quote. It should also be an animated GIF, with each line in a frame.
Faruk Ates said:
“she Does want whitespace to matter”
Could you point me to where Molly said that?
Thanks
Molly,
Both offerings would seem to be correct. The option however places more demands on any system the content passes through and requires it to fully parse the HTML DTD and understand the whitespace preservation properties of that tag.
Whilst that should of course be the case, using the tags will offer a little more robustness as your content is passed from system to system (and for instance through a dumb whitespace stripper).
Personally I’d go with the option. However, this is in exactly the same way as I prefer XHTML to html – I feel it’s just a little more upfront with me about exactly what it’s communicating.
Peter
Rats,
I didn’t realise these comments would respect html.
ok, so, once more:
Molly,
Both offerings would seem to be correct. The pre option however places more demands on any system the content passes through – it requires it to fully parse the HTML DTD and understand the whitespace preservation properties of that tag.
Whilst that should of course be the case, using the br tags will offer a little more robustness as your content is passed from system to system (and for instance through a dumb whitespace stripper).
Both options give more or less the same information it’s just that one requires the DTD a little more strongly than the other.
Personally I’d go with the robustness of the br option. However, this is in exactly the same way as I prefer XHTML to html – I feel it’s just a little more explicit with me about what it’s communicating.
Peter
My vote is for neither of the above.
While somewhat arbitrary, the use of class and id as applied to generic div’s would seem to offer the most flexibility.
…Like this.
The script that appends the line numbers could do for some embellishment, but if you know any JavaScript at all, both the "problem" I was trying to solve and the solution I created for it will make sense.
I use PRE to format my online poetry. It’s my understanding that neither a poem nor a stanza of a poem is a paragraph, so a poem should not be marked up with P. It’s worth noting that some poems are almost word art, utilising spaces at the start of lines; PRE preserves this formatting where P does not.
Use P with
white-space: pre.If only line breaks matter, use the P element in combination with the BR element. If all whitespace matters, use the PRE element. Some poems are presented as figures in which case you really need the PRE element to represent the same message of the original in a semantic way.
However, with most poems you get away with using the P element although you might miss the exact typography fantasai told me, but there is no markup or CSS to represent typography correctly at the moment. The CSS3 Text module offers some additional options, but not enough.
O and also, since poems are mostly quotes you need a BLOCKQUOTE element around it.
When quoting or writing poetry online I’d choose the pre option. Since we started writing poetry down rather than just reciting it the form of the poem has become important. This goes beyond simply line breaks to include all whitespace. So while Molly didn’t explicitly express that she wanted to retain all of the whitespace, this is implied in that the piece of content is a piece of poetry. A great example of this is pattern poetry, where the lines and whitespace of the poem form something akin to ASCII art (e.g. George Herbert’s “Easter Wings”).
And now I’d like to disagree with Ghola. While you are correct poetry often loses some of its meaning in translation, I don’t think that justifies the statement that poetry is only about form. If that were true a series of gibberish formatted exactly like Elizabeth Barrett Browning’s Sonnet XLIII (“How do I love thee? Let me count the ways.”) would have the same heartfelt meaning as the poem itself.
Is it too late to pick BLINK?
Tim,
Obviously when I said form I didn’t mean formatting! That would be totally silly. Form was intended as sound, musicality instead of meaning.
“poetry often loses some of its meaning in translation”. Sometimes it is possible to translate, though the translation cannot always be good. Shakespeare translated into French loses all its interest. I can imagine that I wouldn’t find the charm of Beaudelaire translated in English. The same goes for opera (Carmen in any other language but French is as much a shame as “Die Entführung aus dem Serail” in English).
Perhaps I need to work on my English.
Departing from separation
Last Friday, Molly posted the question p or pre? in which she ponders about the proper semantic markup for a poem in which linebreaks are essential. Should the piece be a paragraph, or pre-formatted text? The reason it is hard…
Interesting question that I’ve been pondering myself, Molly.
I’ve been moving away from pre for poems, as it preserves the source line length which has mucked up the layout when I’ve changed stylesheets, and prefer the first option of using br tags.
In poetry, the form is part of the meaning, so the br tags are content, not just presentation.
The biggest problem I have then with a liquid layout site is what happens if the browser window is very small and the browser breaks a line before the “real” end.
In print, a break before the end of the line requires that the remaining wordsn after the break be right-justified (so the reader can distinguish between a layout break and an authorial end of line), but there’s no way to tell CSS to use a “poetry” format.
Too many scientists on the w3c and not enough literature graduates. (That’s why, if you read out the xhtml 1 spec, it doesn’t even rhyme.)
How About:
The world is my family
Wherever I am right now
is all that matters.
Correction:
<div><div>The world is my family<br/>
Wherever I am right now</div>
<div>Is all that matters.</div></div>
Put me down for <p> option. Preformatted code might be appropriate for e.e. cummings, but not for normal poetry. The <br /> tag has a semantic value in this case – it’s indicating that there’s a deliberate change in the flow of the text.
Poetry seems to break the whole content/presentation duality thing that semantic design encourages.
It seems rather backwards to me that a screenreader would consider line breaks in a pre-formatted code block, but not a break tag.
[...]
Published on Thursday, May 5th, 2005
For you purists out there: P or PRE?
Leave a Reply
[...]
I think it has to be using <br /> (or something other than whitespace) that indicates line breaks. Without it, you simply cannot depend on the presence or behavior of CSS (people browsing with text browsers and the like).
That being said, it seems to me you could consider a poem a list (or collection of lists) of lines. So there’s something to be said for:
The world is my family
Wherever I am right now
Is all that matters
And then use CSS to clean up the bullets (which, of course, will remain in a text-based browser).
oh, um… forgot to encode my entities in the last example. Should be:
<ul>
<li>The world is my family</li>
<li>Wherever I am right now</li>
<li>Is all that matters</li>
</ul>
The proposal above with s above is inaccessible and without semantic structure, I would not recommend this.
Recently I attended a W3C tutorial about XHTML 2.0 with the chairman of the XHTML working group, Steven Pemberton, and the XHTML 2.0 solution is:
“In HTML the only method to retain whitespace in content is with .
In XHTML2, all elements can use the attribute layout=”relevant”.
…
This doesn’t impose a fixed-width font on the output, just that spaces and newlines are preserved.”
So XHTML 2.0 has a with the attribute layout=”relevant”… Hm, today we got and CSS “white-space: pre”. Voilà!
Oops, my code has been erased. It should read:
The proposal above with <div>s above is inaccessible and without semantic structure, I would not recommend this.
Recently I attended a W3C tutorial about XHTML 2.0 with the chairman of the XHTML working group, Steven Pemberton, and the XHTML 2.0 solution is:
“In HTML the only method to retain whitespace in content is with <pre>.
In XHTML2, all elements can use the attribute layout=”relevant”.
<p class=”poem” layout=”relevant”>
…
</p>
This doesn’t impose a fixed-width font on the output, just that spaces and newlines are preserved.”
So XHTML 2.0 has a <p> with the attribute layout=”relevant”… Hm, today we got <p> and CSS “white-space: pre”. Voilà!
I fought with the same problem. Semantically, I’d have to say , for line breaks and white spaces can be keys to a poem, if so wants the author.
However, in my personal example, there were some long lines I wanted to wrap and align to the right (which happens in printed books). The non-breaking long line messed up design and usability, as it overlapped a sidebar and required horizontal scroll.
Finally, I decided to use a for each verse, cause in the example in question I don’t use white espaces at the beginning of any verse. But question remains.
I have just finished reading ‘About Face: Reviving the Rules of Typography’ by David Jury (2004).
On pages 114-115, there is a description of a typographical layout of John Cage’s lecture, and a picture of it.
I would imagine that this particular lecture would be very difficult to mark up using element, and due it’s highly visual nature, should be marked as .
I would suggest that in many poems the white space is significant, not necessarily either before or after the line, but possibly, as the example lecture, in the middle.
For many poems, the line break represents a pause, and so the poem should not be read out as a paragraph, breaking only at punctuation. Imagine reading the example poem above, given by Molly, pausing only at punctuation. This poem is using the line break as a pause at the end of The world is my family.
I would go with for this particular example.
Missing elements:
1. <p>
2. <pre>
3. <pre>
[...] Poetry is one of the most expressive and creative writing formats. It allows plenty of artistic freedom and creativity. Historically, layout and style has been of great importance in a poetry. In poetry, line and stanza breaks are extremely important as apposed to prose. When taking poetry to the web, I (and others) feel that this styling and layout needs to be preserved. There are a number of ways to do this using XHTML and CSS. Just like in WordPress, let’s make sure that our code is poetry. [...]
Successful website
good sitee
good blogger
very nice
between you and a thread that begin earlier with Estelle i believe script is like a poet’s candle giving light that can cascade.
i must be in a sandbox but i never left the house- where textile is the bucket and shovel is the mouse.