Archive for the ‘reading’ Category

How to Mark Up Poetry

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 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">
	<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>
	<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>

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

The future of textbooks (as seen through the eyes of students)

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, 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

Post to Twitter Tweet This Post

At the Zeitgeist Panel: Human-Machine Interaction

Friday, December 3rd, 2010

Back in the heyday of the 90s tech bubble, I was the Design Technologist for FEED Magazine. When I look back on it, FEED was a wonderful place to be at that time because FEED took it upon itself to look critically at media and culture (a digital New Yorker, if you will, at a time when the New Yorker didn’t even have a website). Plus, the writers and thinkers that made up FEED were an incredible bunch of visionaries and future stars and ended up churning out a great number of amazing books. Steven Johnson (Editor in Chief) alone has cranked out 7.

Anyways, Freyja Ballmer, who sort of inherited my position at FEED after I left, asked me to talk at the first Zeitgeist NY Panel this past October. (Zeitgeist is a think tank/social club for digital people.) I gave a little talk on the future of reading. You can read more about what happened here.

BTW, this is Dan Paluska’s (one of the evening’s other speakers) stop motion video of that day and the event, which comprises the latter half of his day (I go on about 1:37 to 1:42):

Post to Twitter Tweet This Post

Irwin redubs reading at Pecha Kucha NY

Tuesday, September 22nd, 2009

I know, I know, it’s taken me this long to post my video from PKNY7? Yes, the shoemaker’s children etc. Anyhow, this presentation and the strict format forced me to distill my ideas into a frustratingly succinct argument (which sidesteps the more interesting parts about the cognitive attention mechanism and information foraging talent of the brain). I’ll be posting the “Director’s Cut” version here at some point.

My presentation on the future of reading, long-form journalism and publishing (plus some screenshots of the Redub Reader) in 20 slides (20 seconds each slide) at Pecha Kucha NY, 9/14/09 at Solar1.

Thanks to Ayagwa for filming and editing!

Post to Twitter Tweet This Post

Don’t Make Me Scroll

Tuesday, July 7th, 2009

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.

And feedback is welcome!

Post to Twitter Tweet This Post

    Recent Work

    Follow Redub