The Poem? How Many Divisions Does it Have?

As I put the finishing touches on Yellow Buick Review No. 2, I take a minute to reflect on what has changed, for good and ill.

This tutorial is based on the first generation of HTML/CSS techniques we figured out (with plenty of help) for our poetry E-books and E-book anthologies. The first issue of Yellow Buick Review used those techniques. The commercial offerings at Bicycle Comics all use the first generation markup/code. It works, it looks good, it’s even elegant in the right light.

We have a second-generation set of techniques, though. Those are what I’ve been using on Yellow Buick Review No. 2. The biggest difference? YBR 2 uses the div element to structure each stanza of a poem.

(Update: We now have a third-generation set of markup techniques that use media queries to serve cascading style sheets appropriate to the device in use. Most of this post is now outdated, but I’ll leave it here as a marker of our thinking in mid-September, 2014.)

Here are two stanzas of a poem formatted using 1st Gen YBR markup:


<p class="PoemStanza">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="PoemLine">Etiam id lacus ligula. Sed libero sem, ullamcorper</p>
<p class="PoemLine">Non pulvinar eget, ultricies eu felis.</p>
<p class="PoemStanzaIndent1">Etiam lacinia metus ligula, sed convallis turpis tristique eu.</p>
<p class="PoemLineIndent1">Nam in tortor dictum odio dapibus egestas.</p>
<p class="PoemLineIndent1">Nullam id odio ut ante lobortis sodales eget sed quam.</p>

Compare that with the same poem in 2nd Gen YBR markup:


<div class="PoemStanza">
<p class="PoemLine">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="PoemLine">Etiam id lacus ligula. Sed libero sem, ullamcorper </p>
<p class="PoemLine">Non pulvinar eget, ultricies eu felis. </p>
</div>
<div class="PoemStanzaIndent1">
<p class="PoemLine">Etiam lacinia metus ligula, sed convallis turpis tristique eu.</p>
<p class="PoemLine">Nam in tortor dictum odio dapibus egestas. </p>
<p class="PoemLine">Nullam id odio ut ante lobortis sodales eget sed quam.</p>
</div>

The big difference? In 2nd Gen, each stanza gets wrapped in its own <div> tags. It is the <div>, not the <p>, that holds the margin-top attribute and value. 2nd Gen also uses percentages for most of its measurements, not em.

Here are screenshots from Dreamweaver:

dreamweaver screenshot of plain 1st gen markup

With 1st Gen markup, Dreamweaver shows what we expect

obvious div boundaries in Dreamweaver

Dreamweaver shows us the boundaries of 2nd Gen markup

You can see the two approaches as Web pages: 1st Gen and 2nd Gen.

More importantly, here are the screenshots of how these two approaches look on a Kindle DX. The DX is an older Kindle, discontinued in mid-2013, that uses the .mobi7 E-book format, rather than the newer KF8 format:

1st Gen code on Kindle DX

1st Gen markup on KindleDX/ Kindle Previewer

Here’s where things get retrograde. Neither 1st Gen nor 2nd Gen will indent the second stanza. This is a limitation of .mobi7; there’s not much I can do about it. Mobi7 permits left-justified text, centered text, and right-justified text. That’s about it.

Let me stress that .mobi7 does honor the hanging indents of a long line that wraps onto a second line. We haven’t lost that; it’s the sine qua non of our approach!

But, disappointing though the lack of indents may be, it’s nothing to the sorrow of how things look using 2nd Gen formatting:

2nd generation code renders on Kindle DX

2nd Gen markup on KindleDX/ Kindle Previewer

Hurts, doesn’t it? We’ve lost seemingly everything, although hanging indents still survive. The obvious question is, why would we do this? Why not just stick with 1st Gen formatting if it preserves more of our intent on old Kindles?

There are two answers.

1. We can stick with 1st Gen. There’s no harm in doing so. It worked yesterday, it works today, it will (probably) work tomorrow. It sells well enough. I’d feel terrible telling someone who bought a Kindle DX in early 2013 that she needs to upgrade her “outdated” device, wouldn’t you?

2. <div> is the way of the future. Nobody is in the .mobi7 game anymore. All devices sold by Amazon these days are KF8. Five years from now, designing for .mobi7 will be a lot of work for few sales. Customers who upgrade their Kindles may be disappointed or even angered that their poetry E-books don’t come along gracefully. Beyond Amazon, all major E-reader platforms are moving to EPUB3 if they aren’t there already. Books designed to capture the old E-readers pass up the numerous advantages and future-compatibility of EPUB3’s support for full CSS 2.1 and HTML5.

The simple answer is there isn’t a simple answer. 2nd Gen markup seems the best move as I get ready to launch Yellow Buick Review’s second issue. Eventually, we might move to media queries to get full compatibility for older Kindle devices. See it differently? Let me know in the comments.

Leave a comment

Filed under Look and Feel, Testing and Uploading

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s