Semantic approaches to producing poetry on the Web
In April 2005, Molly Holzschlag asked: what's the best way to mark up poetry for the Web?
What follows is the answer I gave her.
Background
Because HTML was designed for a narrow scope only to see that scope overtaken by the Web's popularity, semanticians and stylists - whom some might call "standardistas" - are stranded when it comes to finding the most extensible way to mark up certain types of poetry with HTML alone.
Molly suggested two approaches: using <br />
to
represent the breaks between lines and paragraphs as stand-ins for
stanzas, or preformatting the whole mess.
On consideration I decided that neither approach was especially desirable, when one considers the structural nature of poetry.
Recursing through the structure of a poem
When we look closely at a poem, we discover that we can break it down with a textbook taxonomy that's well-lent to the strengths of the Document Object Model. For the sake of completeness, I'll use the structure of a Classical epic to illustrate my point:
- Work
- Book
- Chapter/Part/Act
- Stanza/Scene
- Line
- Beat
- Line
- Stanza/Scene
- Chapter/Part/Act
- Book
Now, just between you, me, and our network cards, I'd say that we've
got a good document tree doing here. Under the circumstances, I reckon
that the conscientious semantician is best-off using nested
ordered-lists, or (as I'm about to propose) nested
<div>
s. The list approach has a certain elegance,
but it's even greater overkill, in my opinion: an ordered list is what
you use for points on an agenda or a shopping trip, but poetry's quite a
bit more sublime than that... and if it's ever converted to
XML, the markup we use is down to a choice between sheep and goats.
Meanwhile, the styling will be easier if we stick with
<div>
s.
Marking up the poem
All that's needed hence is to nest markup properly. Assign classes as needed, and if needed, id's for the sake of margin notes.
Adding the line numbers
Oftentimes, we see lines included with poems for the sake of reference, and also as an aid to performers in respecting the structure of the poem. However, they're not an integral part of the poem, so we can turn to an external source, such as JavaScript, for annotation.
Since we're using classed <div>
s for the sake of
defining structure, we can simply walk through the elements that are
direct children of the stanza class, and create them accordingly. Once
created, they can be relatively positioned as needed.
Interested readers should read through the source markup of the fragment below. The line-number scripting is at http://www.henick.net/articles/poetry.js.
The poem: The Song of Wandering Aengus
Note: Some of you, particularly devoted fans of the Star Trek universe, may be wondering why I chose this particular poem... and that's because it's been my hands-down favorite since my senior year of high school.