Marking Up Poetry

Marking up a poem in HTML is a pain in the neck. The phrase "square peg in round hole" comes instantly to mind. I've been publishing poems on the web since... hmm... around 1997 or something? and I still haven't hit upon a good solution for displaying my poetry in all its indented, stanzaed glory.

Apparently, XHTML2 will partially address the problem by introducing a new tag: <l> </l>. But I'm starting to think that going all the way over to pure XML styled by CSS might be a better solution, although it will have disadvantages.

HTML Markup Methods for Poems

I see two main hurdles for getting a poem to look like a poem on a web page. The first one is how to break the lines up and break groups of lines into stanzas. The second issue is how to handle weird indents and spacing. Both of these can be tackled by such a huge number of ways that it makes me go cross- eyed, but basically it can be broken down into something like the following.

P's and BR's - Brute Force Manual HTML

One way to mark up verses would be to use a paragraph (<p> tag) for each verse and line breaks (<br />) at the end of each line. It works, but it's not pretty, and I agree with Dorothea that it's a bit of a nasty way to go about it.

Similarly, if you're going to stick with plain vanilla HTML methods of styling a poem, you'd use a non-breaking space character to add your indents (or if you're cummings, random leaps of space inside a line), since HTML ignores tab characters altogether and doesn't stack additional space characters.

As suggested, these methods are pretty ugly under the hood, but they'll do in a pinch. The only thing worse would be putting the entire poem inside a <pre> tag. Ew.

Styled DIV's

Anything inside a div tag will be visually placed onto its own "line" without the standard margin additions that browsers add onto paragraph tags. Adding CSS styles (through either the style attribute, or by adding class attributes that have defined styles in a stylesheet) to the divs will cover spacing between stanzas and indentations, but carry the additional overhead of having to write styles in addition to marking up the document itself. Since I write up all my HTML by hand, it gets a bit tiresome to type something like: <div class="stanza indent5">There once was a geek with a poem,</div> for every line. The additional problem with using DIV's is that they're not very semantically appropriate tags for poetry. At least you can somewhat conceptually shoehorn the idea of a stanza into the idea of a paragraph.

XML Alternative?

Currently I use a bastardized version of the two diametrically opposed methods described above: styled P tags. It also falls into the trap of being pretty semantically unsound (each line is in a <p> </p>, and given a class if it's a) indented or b) the first line of a new stanza). But I just hate line breaks. They're annoying to type and they're just dumb. So this was my evil Frankenstein monster compromise of the moment.

After doing some reading, though, I think I can come up with a better one. It's still a bit wanky, but due to the slippery nature of markup, just about any solution will have some wank factor.

XML can be styled by CSS, so why not mark up the poem in pure XML that makes semantical sense and make it look right with an accompanying stylesheet document? Styled XML can potentially be embedded through various means in an HTML document, or I can alternatively just deliver the poem as a straight XML document.

I'm going to have to test this out through a proof-of concept example, but tonight I will be exploring my creative side and making lino cut prints instead. Stay tuned. Or not.

[Link] Comments: [1]

I would love to see a solution to this.

Dan danjeffers76 12 Aug 2005