Wednesday, March 6th, 2013
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.
Tweet This Post
Thursday, November 17th, 2011
We recently created an interactive map for the James Mintz Group, an international investigative services firm, that shows where cases related to the Foreign Corrupt Practices Act have been settled. The map shows multiple dimensions: the country, the estimated amount of the penalty for that country, which sector the case belongs to. This data is displayed on rollover using a treemap which shows the relative sizes of the penalties for the country in question:
There is also a sector filter and each box in the treemap opens up the actual materials pertaining to each case.
To make this, we decided to use HTML5, SVG, Javascript, and CSS3 (it degrades down on IE7 and 8 but you really want to use IE9, Chrome, Firefox, or Safari) and we partnered with Type/Code who laid down the foundational code. We are using Kirill Lebedev’s jvectormap for the map and Renato’s Treemap as the basis for the dynamic treemap tooltip.
See the Mintz Group FCPA interactive map here.
Also, for some background on the FCPA, Frontline did a show on bribery and the history of the FCPA back in 2009.
UPDATE: The Wall Street Journal law blog has a post on the map here.
Tweet This Post
Monday, September 19th, 2011
We’re super-excited and proud of our most recent project, the website for the huge de Kooning retrospective that just opened at MoMA. As usual, we did the IA, UX, and project management for the integration, working hand in hand with Kiss Me I’m Polish (visual design) and Type/Code (development).
Tweet This Post
Wednesday, June 22nd, 2011
We recently collaborated with Kiss Me I’m Polish (with awesome illustrations by Papercut) to do a slide presentation and a series of infographics for the Knight News Challenge’s Interim Review of their 2007-8 grant winners. Here’s the Slideshare presentation:
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.
Tweet This Post
Thursday, May 19th, 2011
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).
There’s also a clever piece of SciFi in the Owl group’s website that addresses this issue:
How can I order The Owl?
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.)
Further Reading
Tweet This Post
