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:
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. The 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:
Do not go gentle into that good night,
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.
Though wise men at their end know dark is right,
Because their words had forked no lightning they
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:
Do not go gentle into that good night,
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.
Though wise men at their end know dark is right,
Because their words had forked no lightning they
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!
Do not go gentle into that good night,
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.
Though wise men at their end know dark is right,
Because their words had forked no lightning they
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.
(IMHO, we’ve tried many of these grid generators, and while they all have excellent qualities, the Netprotozo grid generator has many intrinsic advantages, namely the flexibility and robustness that comes from having been empoyed in many real-world projects. Karl’s really done a great job of incorporating some critical elements which allow things like inter-column padding, and an underlying base unit which is an incredibly powerful concept not present in many other CSS grid systems.)
So I tried. My little experiment in trying to tame my attention deficit by limiting the number of tabs I would allow open at one time — FAIL. I suppose it was doomed to failure from the outset, but I learned a few things along the way about attention and how we browse:
Hyperlinking is the life-blood of the Internet. Emphasis on the “hyper.”
95% of the content you encounter on the web is about 25% as interesting as you hoped it might be. Which is why there are so many things crammed around the content itself — things like banner ads and links to other content some algorithm written by some programmer came up with. It shouldn’t be a crime to be interested enough to open up a link that intrigues you. Either we have to develop a better instinct (either from experience or some magical ESP) about what these links will lead to or we have to rely on filters to determine what links have a higher probability of being very, very interesting and valuable so as to be worth opening a new tab.
Web apps have a significant browser footprint. By default I tend to leave open tabs for webmail (Gmail), social networking (Facebook), and news (Nytimes). That’s at least 3 out of 7 already (if we’re trying to keep it below 7). I’ve heard productivity strategies that tell you to check these sites only twice a day or something crazy like that. Yeah, right.
Tabs = cognitive real estate. Throughout the day, you get links sent to you via email, or you stumble upon them or you see them on Facebook, and occasionally, you pop one open. And another. And another. And you forget to close them. Or some of them, you decide to leave open, because you want to re-tweet it, save it in delicious, or finish reading it later but you don’t want to go hunting for it again (where did I see that link?). Or sometimes you want them there as research for a blog post, and you want to refer back to it. You start your blog post, but you haven’t quite figured out what you want to say…
I used to doubt the hype about Twitter, until last week. When Alex and Adam posted a tweet (at 5am no less) looking for a presentation whiz to visualize balance sheets and the economic situation, I almost fell out of my chair, because as it happened, when they made their amazing episode on This American Life back in February called “Bad Bank”, I had started doodling (first on paper, then moved to the computer) as they were talking in an effort to try to understand what was going on visually. OK, I admit, I listened to it about 5 times, and eventually I ended up with a series of slides that I posted to them last week (I think it was 7am) via Twitter.
Turns out they were making a live presentation in LA a week later, and with Ryan Lauer, who was also a huge fan of the show (we listen to it in the office), we expanded it into a longer slideshow in Keynote ’09, which, by the way, kicks serious ass once you get to know how to use it. Anyways, I cannot tell you how amazing this experience was working with them and how much fun we had working on this. They are my heroes.
Plus, I’ve gotten an invaluable crash course in economics and I can’t wait to do more with them. They actually make this incredibly complex and crucial stuff understandable in human terms, which is exactly what Redub does with creative visualizations of data.
If you’re an information architect or user experience designer, or even if you’re not, you’ve probably heard the “Rule of Seven” axiom. That is, Seven (plus or minus 2) is the magical number of things your brain can comfortably hold in working memory before it freaks out and either shuts down or needs help. Call it “channel capacity” or “user-friendliness”(why does that term seem so antiquated?), call it what you will. Information architects know that chunking things into seven or less items or categories in a navigation bar is just a good, humane thing to do. It has been posited that a tightly-knit group of seven people is an optimal community size, because above that number communication tends to break down and not everyone interacts naturally with each other and cliques begin forming. Seven digit phone numbers, seven days of the week, seven wonders of the world, the seven seas, the seven deadly sins, the Magnificent Seven…the list goes on and on if you want to look for it. You can speculate as to why there is this natural limit on our perceptual machinery (my tongue-in-cheek hypothesis is that it’s the average of the number of fingers on one hand and the total number of fingers) but whatever the real reason, I accept it as a nice and useful constraint.
Recently, I started thinking about applying the Rule of Sevens (plus or minus two) to my own version of “Getting Things Done”. You see, I am a tab-slut.
If you walked by my monitor at any point in the day (or night) you would probably be astounded at the sheer number of tabs I have open at one time in my browser. On average I’d say I have at least 20 to 30 tabs open. And one day I asked myself, Why? Why does each and every one of these different websites need to be open? Is this a symptom of ADD? Or am I just lazy? I mean, you could say the same thing when you see the stack of dirty dishes in my sink (though I’m not as bad about that).
So as an experiment in productivity, I decided to impose the following rule on my browsing:
Thou shalt not have more than 7 browser tabs open at any given time.
Of course this also implies that Thou shalt not have multiple browser windows open (if you can help it).
I welcome anyone else to try this experiment with me and share your discoveries. I promise to post my thoughts at the end of today, because after tomorrow, I will leaving for my honeymoon, where I have decided to take things a step further and go completely off the grid. Wish me luck! (I’m gonna need it! Bad!)
The 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?
