How to Mark Up Poetry

If Charles Goldfarb, Edward Mosher, and Raymond Lorie — the creators of GML (get it?) and the grandfathers of modern-day HTML — had been tasked with the project of making the world’s poetry machine-readable (instead of government, legal, and scientific documents) we would have at our disposal the <poem>, <stanza>, and <line> tags and I wouldn’t be writing this post.

But here we are in 2013, and we are still mired in the “div-class-tag-soup-nonsense” bemoaned by Dr. Olaf Hoffmann in his 2007 email to the W3C regarding this very matter. In fact, he proposed the very same elements above in his email, except for <stanza> which he thought should be <strophe> which I think is a little too specific and esoteric for most people.

View Source on most any site devoted to poetry and you’ll encounter one of three approaches:

  • The poem in a <pre> tag. Here is how poets.org marks up “Syringa” by John Ashbery:syringa_poets_org

    First off, the <table> tag is not a good look. As for the <pre> tag, it’s understandable to think a poem needs to be “preformatted” since we want to treat a poem’s whitespace and linebreaks literally. But the by-product of this treatment is that the structure of the poem is completely lost. Essentially the poem becomes one big blob of “preformatted” text and whitespace. They’re essentially treating the poem as an image and punting on marking up the poem semantically.

    The critical failure is highlighted in red above. Why is the line break preserved here? Is this what the poet intended? Or is it the artifact of the page boundary in a printed edition? This is completely arbitrary and unsustainable.

    Shouldn’t we treat each line as its own entity so it can stand up to the changing widths of the various displays it will encounter in the future?

  • Each line in a <p> tag. This method seems fairly widespread but suffers from cruft and is semantically questionable. Joshua Tallent’s oft-cited post details the virtues of using CSS to make long lines indent correctly (plus has some clever tricks for making things work on older Kindles), but I can’t get past the fundamental wrongness of calling each line in a poem a paragraph. The negative indent technique is the right one, though, and it doesn’t have to be at the expense of semantics. (See below.)
  • A <div> for each line. Another bloated, semantically empty solution that is ultimately unsustainable.
    syringa_poetry_foundationThe above example is from the Poetry Foundation. The inline styling and un-semantic use of the div tag makes this the digital equivalent of printing your poem on newsprint. How long before this representation of poetry yellows and crumbles?

So, what, then?

Over the past two years, I’ve had the privilege to work on a project involving John Ashbery’s poetry, and I believe I’ve arrived at what I believe to be the best approach to setting poetry using standard HTML (in the absence of poetry-specific tags) and CSS. Caveat: I haven’t tested this technique on older Kindles (though I have tested it successfully on KF8).

Semantically, what is a poem?

Well, it’s a series of lines sometimes grouped into stanzas. And since line numbers are significant in verse, why don’t we mark up poems with stanzas as groups of ordered lists (<ol>), and each line an <li>?

For example,

<div class="poem">
<ol>
	<li>Do not go gentle into that good night,</li>
	<li>Old age should burn and rave at close of day;</li>
	<li>Rage, rage against the dying of the light.</li>
</ol>
<ol>
	<li>Though wise men at their end know dark is right,</li>
	<li>Because their words had forked no lightning they</li>
	<li>Do not go gentle into that good night.</li>
</ol>
</div>

which on first pass yields this:

  1. Do not go gentle into that good night,
  2. Old age should burn and rave at close of day;
  3. Rage, rage against the dying of the light.
  1. Though wise men at their end know dark is right,
  2. Because their words had forked no lightning they
  3. Do not go gentle into that good night.

Finally, making it look like poetry requires only a few lines of CSS:

.poem ol { list-style-type:none; margin:0 0 10px 0; padding:0; }
.poem ol li { text-indent:-2em; padding-left:2em; margin:0; }

And you get this:

  1. Do not go gentle into that good night,
  2. Old age should burn and rave at close of day;
  3. Rage, rage against the dying of the light.
  1. Though wise men at their end know dark is right,
  2. Because their words had forked no lightning they
  3. Do not go gentle into that good night.

Did you notice that the numbers start over with each <ol>? No problem. Just use the “start” attribute on the <ol>. You can set it manually or programatically using Javascript. Add another line of CSS to show the numbers on :hover and now you can easily refer to line numbers!

  1. Do not go gentle into that good night,
  2. Old age should burn and rave at close of day;
  3. Rage, rage against the dying of the light.
  1. Though wise men at their end know dark is right,
  2. Because their words had forked no lightning they
  3. Do not go gentle into that good night.

Here’s a live version you can fiddle with:

UPDATE (Oct 25, 2013): I recently found the Text Encoding Initiative, which has a pretty smart XML schema for poetry which is in line with my thinking above.

Post to Twitter Tweet This Post

1,500 Comments

Categories information architecture, publication design, reading, redub | Tags:

You can follow any follow up comments to this entry through the RSS 2.0 feed.

Comments

  1. western union check cashing | February 23, 2017 at 8:05 pm

    I was wondering if you ever considered changing the page layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or two images. Maybe you could space it out better?

  2. growing cannabis in canada | February 23, 2017 at 8:39 pm

    Hi there this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

  3. new orleans truck accident attorney | February 23, 2017 at 9:21 pm

    Hi! This is kind of off topic but I need some advice from an established blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about making my own but I’m not sure where to start. Do you have any ideas or suggestions? Cheers

  4. personal loans for bad credit in pa | February 23, 2017 at 9:22 pm

    This design is spectacular! You certainly know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Excellent job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  5. nursing home locations | February 23, 2017 at 9:43 pm

    Howdy just wanted to give you a quick heads up. The words in your content seem to be running off the screen in Safari. I’m not sure if this is a format issue or something to do with web browser compatibility but I figured I’d post to let you know. The style and design look great though! Hope you get the issue fixed soon. Many thanks

  6. rxdownunder.com reviews | February 23, 2017 at 9:51 pm

    I am extremely impressed with your writing skills and also with the layout on your blog.
    Is this a paid theme or did you customize it yourself?
    Either way keep up the nice quality writing, it’s rare to see a great blog like this one
    nowadays.

  7. lawyer divorce | February 23, 2017 at 11:48 pm

    I am curious to find out what blog system you’re using? I’m experiencing some small security issues with my latest blog and I’d like to find something more secure. Do you have any recommendations?

  8. cloud it | February 23, 2017 at 11:54 pm

    Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; we have created some nice procedures and we are looking to swap strategies with others, please shoot me an email if interested.

  9. long term care ratings | February 24, 2017 at 12:54 am

    I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz answer back as I’m looking to create my own blog and would like to find out where u got this from. cheers

  10. cheap cupcakes singapore | February 24, 2017 at 1:11 am

    Woah! I’m really digging the template/theme of this site. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between usability and visual appearance. I must say that you’ve done a great job with this. Additionally, the blog loads extremely fast for me on Chrome. Superb Blog!

  11. canada to legalize pot | February 24, 2017 at 2:05 am

    My developer is trying to convince me to move to .net from PHP. I have always disliked the idea because of the costs. But he’s tryiong none the less. I’ve been using Movable-type on several websites for about a year and am worried about switching to another platform. I have heard good things about blogengine.net. Is there a way I can import all my wordpress content into it? Any kind of help would be really appreciated!

  12. spa weekend breaks | February 24, 2017 at 8:19 am

    Wow that was unusual. I just wrote an really long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say wonderful blog!

  13. web developer website | February 24, 2017 at 9:40 am

    Hi there! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no data backup. Do you have any solutions to protect against hackers?

  14. I was reading this | February 24, 2017 at 11:03 am

    Have you ever thought about adding a little bit more than just your articles? I mean, what you say is important and everything. But just imagine if you added some great images or videos to give your posts more, “pop”! Your content is excellent but with pics and video clips, this blog could definitely be one of the very best in its field. Amazing blog!

  15. nurse jobs | February 24, 2017 at 11:59 am

    Greetings! I know this is kinda off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!

  16. canada pot laws | February 24, 2017 at 1:08 pm

    Good day! I know this is kinda off topic however , I’d figured I’d ask. Would you be interested in trading links or maybe guest writing a blog post or vice-versa? My website goes over a lot of the same subjects as yours and I feel we could greatly benefit from each other. If you are interested feel free to shoot me an e-mail. I look forward to hearing from you! Terrific blog by the way!

  17. learn accounting | February 24, 2017 at 1:17 pm

    I’m really enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a designer to create your theme? Exceptional work!

  18. canada marijuana | February 24, 2017 at 1:48 pm

    Hey there just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Safari. I’m not sure if this is a format issue or something to do with web browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the issue solved soon. Kudos

  19. mail order medical marijuana | February 24, 2017 at 3:47 pm

    Currently it sounds like Drupal is the top blogging platform out there right now. (from what I’ve read) Is that what you’re using on your blog?

  20. home loan repayments | February 24, 2017 at 5:26 pm

    Hey! I’m at work browsing your blog from my new iphone! Just wanted to say I love reading your blog and look forward to all your posts! Carry on the superb work!

  21. loans adelaide | February 24, 2017 at 5:52 pm

    Do you have a spam problem on this site; I also am a blogger, and I was wanting to know your situation; many of us have developed some nice practices and we are looking to exchange methods with other folks, be sure to shoot me an email if interested.

  22. official-drugstore.com legit | February 24, 2017 at 8:38 pm

    I love it when people get together and share ideas. Great blog, continue the good work!

  23. minecraft | February 25, 2017 at 3:50 am

    Great article. I am going through a few of these issues as well..

  24. minecraft | February 25, 2017 at 8:49 am

    I’m really enjoying the theme/design of your website. Do
    you ever run into any browser compatibility problems? A handful of
    my blog visitors have complained about my blog not working correctly in Explorer but looks great in Chrome.

    Do you have any recommendations to help fix this issue?

  25. 1stpharm.com review | February 25, 2017 at 11:15 am

    I’ve learn some good stuff here. Definitely price bookmarking for revisiting.
    I wonder how a lot effort you put to create this sort
    of excellent informative web site.

    my site … 1stpharm.com review

  26. sunrx.net legit | February 25, 2017 at 1:38 pm

    It’s awesome for me to have a site, which is helpful for my know-how.
    thanks admin

  27. minecraft | February 25, 2017 at 2:03 pm

    I blog frequently and I really appreciate
    your content. This great article has truly peaked my
    interest. I will bookmark your site and keep checking for new information about once per week.
    I opted in for your RSS feed too.

  28. minecraft | February 25, 2017 at 3:17 pm

    Thanks for one’s marvelous posting! I actually enjoyed reading
    it, you are a great author.I will be sure to bookmark your blog
    and will often come back someday. I want to encourage
    you to definitely continue your great posts, have
    a nice weekend!

  29. solid gold pet food company | February 25, 2017 at 3:57 pm

    Pretty! This has been an extremely wonderful post. Thanks for
    providing this information.

  30. 3gchemist.com review | February 25, 2017 at 7:15 pm

    Hello There. I found your blog the use of msn. This is a really neatly
    written article. I’ll be sure to bookmark it and
    come back to read more of your helpful information. Thanks for
    the post. I’ll definitely return.

  31. womens military jacket | February 26, 2017 at 9:10 am

    Have you ever considered about adding a little bit more than just your articles? I mean, what you say is fundamental and everything. However just imagine if you added some great pictures or video clips to give your posts more, “pop”! Your content is excellent but with pics and videos, this site could undeniably be one of the very best in its niche. Terrific blog!

  32. injury claims | February 26, 2017 at 9:19 am

    My programmer is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the expenses. But he’s tryiong none the less. I’ve been using Movable-type on a number of websites for about a year and am nervous about switching to another platform. I have heard great things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any kind of help would be greatly appreciated!

  33. 21 day fix extreme | February 26, 2017 at 9:23 am

    Hi! I know this is kind of off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having problems finding one? Thanks a lot!

  34. weed plant growing | February 26, 2017 at 2:26 pm

    Have you ever thought about including a little bit more than just your articles? I mean, what you say is important and all. Nevertheless think of if you added some great visuals or video clips to give your posts more, “pop”! Your content is excellent but with images and clips, this site could undeniably be one of the greatest in its field. Very good blog!

  35. secure self storage | February 26, 2017 at 2:53 pm

    We stumbled over here from a different web page and thought I might check things out. I like what I see so now i’m following you. Look forward to looking at your web page again.

  36. health clinic | February 26, 2017 at 3:08 pm

    I’m still learning from you, while I’m trying to achieve my goals. I absolutely liked reading all that is written on your blog.Keep the tips coming. I enjoyed it!

  37. canada medical marijuana | February 26, 2017 at 3:14 pm

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what youre talking about, why waste your intelligence on just posting videos to your site when you could be giving us something enlightening to read?

  38. vitamins | February 26, 2017 at 3:43 pm

    You could definitely see your expertise in the work you write. The arena hopes for even more passionate writers such as you who aren’t afraid to mention how they believe. All the time go after your heart.

  39. secure storage units | February 26, 2017 at 3:47 pm

    Have you ever considered about including a little bit more than just your articles? I mean, what you say is important and all. Nevertheless just imagine if you added some great images or videos to give your posts more, “pop”! Your content is excellent but with images and videos, this blog could certainly be one of the best in its field. Fantastic blog!

  40. tinder dating site | February 26, 2017 at 4:57 pm

    Hey there, I think your blog might be having browser compatibility issues.

    When I look at your blog site in Ie, it looks fine but when opening in Internet
    Explorer, it has some overlapping. I just wanted to give you a quick heads
    up! Other then that, fantastic blog!

  41. med-helpforme.net reviews | February 26, 2017 at 10:38 pm

    Greetings! Very useful advice in this particular article!
    It is the little changes that will make the largest changes.

    Thanks a lot for sharing!

  42. top 10 executive search firms | February 27, 2017 at 1:45 am

    Today, while I was at work, my cousin stole my iPad and tested to see if it can survive a twenty five foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views. I know this is totally off topic but I had to share it with someone!

  43. definition of medicare | February 27, 2017 at 4:53 am

    Greetings from Carolina! I’m bored to tears at work so I decided to browse your website on my iphone during lunch break. I love the knowledge you provide here and can’t wait to take a look when I get home. I’m surprised at how quick your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyhow, very good blog!

  44. create website | March 1, 2017 at 8:14 pm

    Hello very nice site!! Man .. Beautiful .. Amazing .. I will bookmark your website and take the feeds additionally¡KI am happy to search out a lot of helpful information here within the publish, we want work out extra techniques in this regard, thank you for sharing. . . . . .

  45. mobile web design | March 1, 2017 at 9:23 pm

    hey there and thank you for your info – I have definitely picked up something new from right here. I did however expertise some technical points using this site, since I experienced to reload the website many times previous to I could get it to load properly. I had been wondering if your hosting is OK? Not that I am complaining, but slow loading instances times will sometimes affect your placement in google and can damage your high-quality score if ads and marketing with Adwords. Anyway I am adding this RSS to my email and can look out for a lot more of your respective intriguing content. Ensure that you update this again soon..

  46. airline flights | March 1, 2017 at 9:23 pm

    I truly appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again

  47. real estate agent | March 1, 2017 at 9:24 pm

    Simply wish to say your article is as surprising. The clarity in your post is simply great and i could assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the enjoyable work.

  48. Renee | March 15, 2017 at 11:54 pm

    I have to thank you for the efforts you’ve put in penning this site.
    I’m hoping to view the same high-grade blog posts by you later on as well.
    In fact, your creative writing abilities has inspired
    me to get my own, personal website now 😉

Trackbacks

  1. Hallelujah
  2. Roof repair near me

    Recent Work

    Follow Redub

      

    Archives