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: standards, web design and development, travel, society
Posted by: Molly | 11:10 pm |
April 29th, 2005 at 11:44 pm
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.
April 29th, 2005 at 11:49 pm
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.April 29th, 2005 at 11:51 pm
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.
April 30th, 2005 at 12:12 am
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.
April 30th, 2005 at 12:22 am
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.
April 30th, 2005 at 1:12 am
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).
April 30th, 2005 at 2:55 am
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!
April 30th, 2005 at 4:39 am
Would a blockquote be inappropriate?
April 30th, 2005 at 4:44 am
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.April 30th, 2005 at 6:37 am
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.April 30th, 2005 at 7:01 am
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.
April 30th, 2005 at 7:54 am
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.
April 30th, 2005 at 7:57 am
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….
April 30th, 2005 at 8:02 am
Code is poetry. And how do you mark up code?
<pre><code>. Exactly.April 30th, 2005 at 8:03 am
P.S. I tried to wrap “Code is poetry” in
<q>, but it didn't work...April 30th, 2005 at 8:05 am
Thanks Faruk, for the longdesc quote. It should also be an animated GIF, with each line in a frame.
April 30th, 2005 at 8:40 am
Faruk Ates said:
“she Does want whitespace to matter”
Could you point me to where Molly said that?
Thanks
April 30th, 2005 at 8:42 am
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
April 30th, 2005 at 8:48 am
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
April 30th, 2005 at 10:55 am
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.
April 30th, 2005 at 11:02 am
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.
April 30th, 2005 at 11:35 am
Use P with
white-space: pre.April 30th, 2005 at 11:44 am
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.
April 30th, 2005 at 11:45 am
O and also, since poems are mostly quotes you need a BLOCKQUOTE element around it.
April 30th, 2005 at 4:57 pm
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.
April 30th, 2005 at 4:59 pm
Is it too late to pick BLINK?
April 30th, 2005 at 5:15 pm
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.
May 1st, 2005 at 10:22 am
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…
May 2nd, 2005 at 1:33 am
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.)
May 2nd, 2005 at 8:47 pm
How About:
The world is my family
Wherever I am right now
is all that matters.
May 2nd, 2005 at 8:49 pm
Correction:
<div><div>The world is my family<br/>
Wherever I am right now</div>
<div>Is all that matters.</div></div>
May 3rd, 2005 at 12:17 pm
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.
May 5th, 2005 at 3:35 am
[…]
Published on Thursday, May 5th, 2005
For you purists out there: P or PRE?
Leave a Reply
[…]
May 5th, 2005 at 12:10 pm
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).
May 5th, 2005 at 12:13 pm
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>
May 6th, 2005 at 1:32 am
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à!
May 6th, 2005 at 1:37 am
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à!
July 19th, 2005 at 11:26 am
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.
November 20th, 2005 at 12:26 am
Hi! What you do today by evening?
November 23rd, 2005 at 3:55 am
I have never had a problem with line breaks. I always seem to have lots of luck with coding.
January 14th, 2006 at 1:19 am
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.
January 14th, 2006 at 1:24 am
Missing elements:
1. <p>
2. <pre>
3. <pre>
December 29th, 2006 at 2:11 pm
[…] 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. […]
February 13th, 2007 at 4:55 pm
March 14th, 2007 at 1:13 am
Bad news
May 21st, 2007 at 11:14 pm
http://www.sh-scpv.com/ pump
http://www.sh-scpv.com/ china pump
May 22nd, 2007 at 2:05 am
http://www.sh-scpv.com/Diaphragm-Pumps.html Diaphragm Pumps
http://www.sh-scpv.com/Screw-Pumps.html Screw Pumps
May 24th, 2007 at 9:56 am
gbfwknf
June 22nd, 2007 at 5:07 pm
Hello! Good Site! Thanks you! dsxemhkiwz
July 8th, 2007 at 12:56 pm
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.
August 16th, 2007 at 1:24 am
I don’t know how I ever worked without it. http://www.2africanart.com I discovered that African art is exactly what our business has been lacking. Thanks for all your help.
September 28th, 2007 at 7:58 am
You have a terrific outlook on life.
January 12th, 2008 at 10:46 am
thank you
January 20th, 2008 at 7:22 pm
good! iam glad to see you!
March 14th, 2008 at 1:16 pm
thanx a lot
March 14th, 2008 at 1:16 pm
Successful website
March 30th, 2008 at 10:07 am
thanks
April 7th, 2008 at 2:26 am
it is easy to find it, i think u just search on google or yahoo
April 8th, 2008 at 6:28 am
but, i think it is another thing which you have
April 8th, 2008 at 3:58 pm
i like it
April 8th, 2008 at 9:25 pm
interesting, thanks
April 9th, 2008 at 6:40 am
do you know everything about css?
April 9th, 2008 at 2:35 pm
how can i find everything about css?
April 10th, 2008 at 5:18 am
what do you want to learn about css? we can help easily
April 11th, 2008 at 8:36 am
i want learn too, i want start at the beginning of css
April 21st, 2008 at 2:31 pm
it is good t see u
April 21st, 2008 at 6:42 pm
thats the matter i want to learn
April 21st, 2008 at 10:50 pm
ok,thanks
April 22nd, 2008 at 7:41 pm
Thanks,very nice blog.
April 22nd, 2008 at 7:41 pm
Nice job.
April 24th, 2008 at 6:10 am
hi, umit. how is going on