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.
Here’s my favorite slide from the deck, The Hacker Journalist (or Journalist 2.0), based loosely on Brian Boyer, a 2008 winner as well as a repeat winner this year.
For the final project of the Core Interaction Studio course I teach at Parsons, I challenged my screenaged design students to re-imagine the textbook for the digital, networked age.
Here are some questions/observations that came out of the 2 month-long process:
How does the next generation value print? If I can extrapolate, print is not dead or dying to these 19-20 year olds. It’s just less of a commodity and more a luxury. For the most part they are sensitive to killing trees and at the same time intuitively aware of the power of print. Also, they see online publishing for what it is: fast, cheap, and hard to control.
Should textbooks be apps or will they be housed in a standalone device? Or a web service? Half of the students cast their lot with an existing platform (be it the iPad or the Web), and the other half felt the need to create their own, coincidentally reflecting the current e-reader market dynamic (Kindle/Nook vs Apple). (Strangely, Android didn’t even register.) Incidentally, 3 out of 18 students came with their own iPads, up from 0 last semester.
One group suggested a cloud-based Netflix-like subscription service called ShelfLife, which, for a $9.99 monthly fee, gives you access to ostensibly any book you’d need for your classes, synced and delivered to any of your devices. While in my mind they didn’t put enough thought into the “Now what?” question (ie, the reading and studying experience) it does play out an interesting position, a thought experiment also taken up by Tim Carmody in his post for kottke.org, A Budget for Babel. How much would you pay for digital access to every book ever published?
Transposing the Netflix UI to books makes some sense on the surface (access to a huge catalog of content) but the consumption of books is a far different animal than movies.
Prototype website for ShelfLife, a book subscription service
The curious appeal of dual screens
Long live the Courier! I’ll admit, I was a big fan of Microsoft’s vaporware concept tablet, but the prevailing form factor these days seems to be a single screen tablet. That didn’t stop The Owl team from making an intriguing argument for a two-screen, wood-paneled device.
The spine hinges so it can fold into single screen, one-handed mode
If you see a stylus, they blew it. Or did they?
One of our guest critics, David Brown, Editor at Melcher Media who was responsible for bringing the highly acclaimed Our Choice iOS app to fruition (oh, and also the dead tree book too), raised a key point about how we put content in being just as important as the quality or experience of getting content out. This is especially true of textbooks, which expect to be marked up and highlighted by their owners. And to that point we get into the argument still being had about stylus versus the good ol’ finger. Of the three iPad owners in the class, two owned styli, which went against Steve Jobs’ famous aphorism, who, when asked about other tablet platforms, remarked: “If you see a stylus, they blew it”. My theory is that in order to do any detail work (like drawing or adjusting Bezier splines) you need something with more precision than your fat 30px finger. The other argument for a stylus is more psychological, and it has to do with how note-taking and doodling engages our memory. The Owl Team included a stylus (in addition to responding to touch) which was thoughtfully chiseled to provide two different surfaces for mark-making — the sharp point for detail and a rounded long edge for highlighting. Nice touch.
Open or closed?
There was some debate as to whether the textbook of tomorrow should have internet access via a full browser. The Closed camp argued that the world is already too distracting and including access to the web would inevitably lead to a social media death spiral and no homework would get done. Who knew Generation Next was fully cognizant of how Twitter and Facebook are making them stupid? Does that mean these kids are actually more media savvy than the Executive Editor of the New York Times?
The Open camp argued the Web is ubiquitous anyways, to the point where it’s natural to want to Google a word or phrase you don’t know (instead of hoping that your built-in dictionary is any good) and not having that ability built in would be a huge omission. Google (and by extension, the Internet) has become a necessary context for information consumption.
Of course, once you open the floodgates to the entire Web, you will have to tolerate students checking their Facebook feeds in class (which I have actually tolerated grudgingly). I can only comfort myself by thinking this will prepare them for, say, all of the liveblogging they will need to do in the future.
A final thought about accessibility
If it feels wrong to expect students to pay $1000 a year in order to just participate in class, how fair will it be to require everyone to buy a Kindle/iPad/Owl? Though if Kevin Kelly is right, it’s not inconceivable that every student could be issued a Kindle for free at the beginning of the year. Chances are it’ll have ads, but hopefully they’ll just be ads for other books (and not, say, soda).
Under the Accessible Education Act of 2011, The Owl became the primary device available to students and teachers through federal funding. At the beginning of the school year, unique identification codes are distributed to schools and/or individual users, allowing them to place their orders for The Owl as a group, or as a single user.
(NB: There is much more to see and talk about from my class’ final projects. I just don’t have the time or room here. Thanks to Charis Poon, Zeke Shore and Lev Kanter of Type/Code, David Brown of Melcher Media for generously serving as last-minute guest critics.)
The demos are getting more and more realistic (first Mag+, now this). My initial reax:
It took a whole team from Adobe partnering with the staff of Wired Magazine to do this demo. The tools aren’t there yet, but publishers, your newsrooms and staff need to look and work like this. Right now, I don’t think they’re geared for this type of production. Yet.
The question is what hardware is it running on? Can it run on any old tablet that supports multi-touch (not an iPad)? Who makes such a device?
Does the video have to play full-screen or can it play inline?
Can you resize the text? I don’t think you can. To me, it looks like they’re taking the assets from the InDesign layout and converting to Flash/Flex/AIR.
HTML5 and CSS3+ Javascript can’t necessarily pull this off yet. Another big “YET”. jQTouch, I’m waiting…
I foresee an app per publication, not per issue, which means for books, you’ll buy the Penguin app, and the Knopf app, and pay a subscription fee to get particular chapters of books. In terms of magazines, you’ll buy the Wired app and the GOOD app, e.g., and pay a subscription fee to get particular issues. The question is sharing…
UPDATE: from Wired itself:
The content was created in Adobe InDesign, as is the case for the print magazine, with the same designers adding interactive elements, from photo galleries and video to animations, along with adapting the designs so it looks great in both portrait and landscape orientation. This is a departure from the usual web model, where a different team repurposes magazine content into HTML, unavoidably losing much of the visual context in the process. Wired.com is not a re-purposed version of the magazine, but rather an separately-produced news service.
Read More http://www.wired.com/epicenter/2010/02/the-wired-ipad-app-a-video-demonstration/#ixzz0fjhurJU8
This is the short version of a presentation on online magazines we’ve been working on here at Redub. It ends with a link to an in-development demo that features content from GOOD’s Transportation Issue 015. Casey Caplowe (GOOD’s Creative Director) generously gave us the InDesign files for the entire issue and we re-figured some of the content so it fit on the screen natively. We even had to re-imagine the Transparencies because they just didn’t work just throwing the original (for-print) image up on the screen (which is what most publishers do sadly) — since we didn’t have the high resolution of print, we took advantage of the screen’s native attributes, namely, animation. I’d even posit that what the screen lacks in dots per inch it more than makes up for in dots per inch per second.
There are still features we are hinting at but that we’re still working on adding, like annotation (which is the biggie). We’re laying in the sharing stuff now.
Oh, and as far as search engine optimization is concerned, we’re working on a solution for that. Right now all of the content is stored as XML in a database (modeled on WordPress). We just have to build a front-end for it that spiders can crawl all over.
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?
