Formatting poetry for EPUB and Kindle

A lot of the ebooks I’m working on have poetry, and after struggling with the formatting for a while, I think I’ve finally found some methods that are quite acceptable for EPUB (iBooks and Adobe Digital Editions) and somewhat acceptable for Kindle.

Without line numbers

This is the easiest. We’ll be working with the first two stanzas of “Adam-ondi-Ahman”, aiming for the following formatting:

This earth was once a garden place,

With all her glories common,

And men did live a holy race,

And worship Jesus face to face,

In Adam-ondi-Ahman.

We read that Enoch walk’d with God,

Above the power of mammon,

While Zion spread herself abroad,

And Saints and angels sung aloud,

In Adam-ondi-Ahman.

EPUB

First off, there’s no standard way to mark up poetry. This works for me, but if you’ve got a better way, let us know in the comments.

Markup
<div class="poetry">
    This earth was once a garden place,
        <p class="indent">With all her glories common,</p>
    And men did live a holy race,
    And worship Jesus face to face,
        <p class="indent">In Adam-ondi-Ahman.</p>

    <p class="stanza">We read that Enoch walk'd with God,</p>
        <p class="indent">Above the power of mammon,</p>
    While Zion spread herself abroad,
    And Saints and angels sung aloud,
        <p class="indent">In Adam-ondi-Ahman.</p>
</div>

So, encapsulate the poem in a .poetry div, put each line in a “ tag, and use the .indent class for indenting lines. For new stanzas, add a .stanza class to the first line.

CSS
.poetry                 { margin: 1em 0; }
.poetry p               { margin: 0 0 0 4em; text-indent: -2em; }
.poetry p.stanza        { margin-top: 1em; }
.poetry p.indent        { margin-left: 5em; }
.poetry p.indent2       { margin-left: 5.5em; }
.poetry p.indent3       { margin-left: 6em; }

And that’ll give you hanging indents and proper indentation and all that good stuff, indenting the whole poem 2em from the left; if you need further indentation, you can use the .indent2 and .indent3 classes (and of course modify them however you need).

To set the poetry flush left, by the way, change margin: 0 0 0 4em to margin: 0 0 0 2em and set the .indent classes to start at 3em instead of 5em.

Kindle (no hanging indent)

If your lines are short enough that you don’t need to worry about using hanging indents, this markup is clean and short:

Markup
<p class="stanza">This earth was once a garden place,
    <p class="indent">With all her glories common,</p>
And men did live a holy race,
And worship Jesus face to face,
    <p class="indent">In Adam-ondi-Ahman.</p>

<p class="stanza">We read that Enoch walk'd with God,</p>
    <p class="indent">Above the power of mammon,</p>
While Zion spread herself abroad,
And Saints and angels sung aloud,
    <p class="indent">In Adam-ondi-Ahman.</p>
CSS
p           { text-align: left; }
p.stanza    { margin-top: 1em; }
p.indent    { text-indent: 3em; }

Fairly simple.

Kindle (hanging indent)

With longer lines, you’ll usually want to give them hanging indents, as is traditional in formatting poetry. We can do this on the Kindle using nested “ tags.

There’s a catch, though: if you use this technique for hanging indents, you can’t do further indentation using CSS (like line 2 in our example poem) — as soon as you try to add the hanging indent, the whole thing goes flush left again. Instead, you have to resort to the dreaded &nbsp; entity. If any of you figure out how to get indents and hanging indents on the Kindle, let me know.

Markup
<p class="outer"><p class="inner">This earth was once a garden place,</p>
    <p class="outer"><p class="inner">&nbsp;&nbsp;&nbsp;&nbsp; With all her glories common,</p></p>
<p class="outer"><p class="inner">And men did live a holy race,</p></p>
<p class="outer"><p class="inner">And worship Jesus face to face,</p></p>
    <p class="outer"><p class="inner">&nbsp;&nbsp;&nbsp;&nbsp; In Adam-ondi-Ahman.</p></p>

<p class="outer"><p class="stanza">We read that Enoch walk'd with God,</p></p>
    <p class="outer"><p class="inner">&nbsp;&nbsp;&nbsp;&nbsp; Above the power of mammon,</p></p>
<p class="outer"><p class="inner">While Zion spread herself abroad,</p></p>
<p class="outer"><p class="inner">And Saints and angels sung aloud,</p></p>
    <p class="outer"><p class="inner">&nbsp;&nbsp;&nbsp;&nbsp; In Adam-ondi-Ahman.</p></p>

Note that for a new stanza, we replace the .inner class with .stanza (since the Kindle parser can’t handle two CSS classes on the same element).

CSS
p           { text-align: left; }
p.outer     { text-indent: 2em; }
p.inner     { text-indent: -2em; }
p.stanza    { text-indent: -2em; margin-top: 1em; }

With line numbers

Now it gets a little more complicated. For all of these, I’m using manually entered line numbers. Once EPUB readers support more CSS selectors (like :nth-child), though, it’ll be possible to do this automatically.

There are two basic styles of line numbers in poetry. Here’s left-aligned, using the first twelve lines of the Old English poem “Dream of the Rood” as an example of what we’re trying to achieve:

Hwæt! Ic swefna cyst secgan wylle,
hwæt me gemætte to midre nihte,
syðþan reordberend reste wunedon!
þuhte me þæt ic gesawe syllicre treow
5
on lyft lædan, leohte bewunden,
beama beorhtost. Eall þæt beacen wæs
begoten mid golde. Gimmas stodon
fægere æt foldan sceatum, swylce þær fife wæron
uppe on þam eaxlegespanne. Beheoldon þær engel dryhtnes ealle,
10
fægere þurh forðgesceaft. Ne wæs ðær huru fracodes gealga,
ac hine þær beheoldon halige gastas,
men ofer moldan, ond eall þeos mære gesceaft.

And right-aligned:

Hwæt! Ic swefna cyst secgan wylle,
hwæt me gemætte to midre nihte,
syðþan reordberend reste wunedon!
þuhte me þæt ic gesawe syllicre treow
5
on lyft lædan, leohte bewunden,
beama beorhtost. Eall þæt beacen wæs
begoten mid golde. Gimmas stodon
fægere æt foldan sceatum, swylce þær fife wæron
uppe on þam eaxlegespanne. Beheoldon þær engel dryhtnes ealle,
10
fægere þurh forðgesceaft. Ne wæs ðær huru fracodes gealga,
ac hine þær beheoldon halige gastas,
men ofer moldan, ond eall þeos mære gesceaft.

EPUB markup (left- and right-aligned line numbers)

The markup is the same for both left-aligned and right-aligned line numbers:

<div class="poetry">
    Hwæt! Ic swefna cyst <span class="caesura"></span> secgan wylle,
    hwæt me gemætte <span class="caesura"></span> to midre nihte,
    syðþan reordberend <span class="caesura"></span> reste wunedon!
    þuhte me þæt ic gesawe <span class="caesura"></span> syllicre treow

    <span class="num">5</span>

    on lyft lædan, <span class="caesura"></span> leohte bewunden,
    beama beorhtost. <span class="caesura"></span> Eall þæt beacen wæs
    begoten mid golde. <span class="caesura"></span> Gimmas stodon
    fægere æt foldan sceatum, <span class="caesura"></span> swylce þær fife wæron
    uppe on þam eaxlegespanne. <span class="caesura"></span> Beheoldon þær engel dryhtnes ealle,

    <span class="num">10</span>

    fægere þurh forðgesceaft. <span class="caesura"></span> Ne wæs ðær huru fracodes gealga,
    ac hine þær beheoldon <span class="caesura"></span> halige gastas,
    men ofer moldan, <span class="caesura"></span> ond eall þeos mære gesceaft.
    Syllic wæs se sigebeam, <span class="caesura"></span> ond ic synnum fah,
    forwunded mid wommum. <span class="caesura"></span> Geseah ic wuldres treow,
</div>

EPUB CSS (left-aligned line numbers)

.poetry             { margin: 1em 0; }
.poetry p           { margin: 0 0 0 6em; text-indent: -3em; }
.poetry p.indent    { margin-left: 7em; }
.poetry .num        { float: left; margin-left: 5px; font-size: .8em;
                        color: #999; font-style: italic; }
.poetry .caesura     { display: inline-block; width: 2em; }

EPUB CSS (right-aligned line numbers)

.poetry             { margin: 1em 0; }
.poetry p           { margin: 0 2em 0 2em; text-indent: -2em; }
.poetry p.indent    { margin-left: 1em; }
.poetry .num        { float: right; margin-left: 2em; margin-right: 5px;
                        font-size: .8em; color: #999; font-style: italic; }
.poetry .caesura     { display: inline-block; width: 2em; }

Kindle (right-aligned)

With Kindle, alas, there’s no good way to set line numbers with poetry. The best I’ve come up with has the line numbers right aligned on their own line, which means every five lines (or however often you put line numbers in) there’s a stanza-like blank line. You’ll also notice that the .caesura spans have been replaced with manual strings of &nbsp;, because the spans don’t work on Kindle.

Markup
<p class="outer"><p class="inner">Hwæt! Ic swefna cyst &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; secgan wylle,</p></p>
<p class="outer"><p class="inner">hwæt me gemætte &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; to midre nihte,</p></p>
<p class="outer"><p class="inner">syðþan reordberend &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reste wunedon!</p></p>
<p class="outer"><p class="inner">þuhte me þæt ic gesawe &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; syllicre treow</p></p>

<p class="num">5</p>

<p class="outer"><p class="inner">on lyft lædan, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; leohte bewunden,</p></p>
<p class="outer"><p class="inner">beama beorhtost. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Eall þæt beacen wæs</p></p>
<p class="outer"><p class="inner">begoten mid golde. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Gimmas stodon</p></p>
<p class="outer"><p class="inner">fægere æt foldan sceatum, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; swylce þær fife wæron</p></p>
<p class="outer"><p class="inner">uppe on þam eaxlegespanne. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Beheoldon þær engel dryhtnes ealle,</p></p>

<p class="num">10</p>

<p class="outer"><p class="inner">fægere þurh forðgesceaft. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ne wæs ðær huru fracodes gealga,</p></p>
<p class="outer"><p class="inner">ac hine þær beheoldon &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; halige gastas,</p></p>
<p class="outer"><p class="inner">men ofer moldan, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ond eall þeos mære gesceaft.</p></p>
CSS
p           { text-align: left; }
p.outer     { text-indent: 2em; }
p.inner     { text-indent: -2em; }
p.num       { font-style: italic; text-indent: 90%; }

Conclusion

Nice as it would be to have a cross-platform EPUB/Kindle solution for formatting poetry, that day hasn’t yet come. But in spite of the occasional hassles (I’m looking at you, Kindle), you can get decent-looking results without resorting to too much hackery.

Comments

This is some interesting and good work, but it set me to thinking…

…I’m not sure it’s the right approach. I worked up a test html page using the <pre> tag. I’ll post it and some thoughts soon.

Okay, here’s a test page: http://dl.dropbox.com/u/1103457/poetry/poetry-test.html

Essentially, there’s an ongoing debate about poetry <html> tags: http://www.w3.org/html/wg/wiki/PoeticSemantics

I’m not sure where the debate has ended, but it looks like the main discussion didn’t get past 2008. That said, the HTML5 spec suggests alternate ways of marking up poems (see, for example, http://www.w3.org/TR/html5/grouping-content.html and do a search on the page for “poem”).

As somebody who deals with online published products at work (we’ve published numerous Oxford University Press publications, for example), breaking up stanzas into multiple <p> tags seems the wrong approach. You’ll note in my example, I’ve made <p> tags equivalent to stanzas. Naturally, I realize this is a semantic issue, and there are probably multiple ways of going about it. Also, if you need to, you can always specify the *type* of figure/p/element with a role attribute: http://www.w3.org/TR/xhtml-role/

role=”poem”
role=”stanza”

etc.

What do you think? Too nitpicky of me? :)

Ideally, yes, there’d be a nice semantic way to mark up poems (I like several of the options on that wiki page you linked to — stanza/line, ll/l, etc.). I’d love being able to use something like this:

This earth was once a garden place, With all her glories common, And men did live a holy race, And worship Jesus face to face, In Adam-ondi-Ahman.

We read that Enoch walk’d with God, Above the power of mammon, While Zion spread herself abroad, And Saints and angels sung aloud, In Adam-ondi-Ahman.

But the likelihood of something like that making it into the HTML spec is pretty low, since it’s too domain-specific.

The p/br approach is interesting, but I don’t really see it working for this kind of thing. First, you lose hanging indents, which are an absolute must when you’re viewing poetry on a small device and lines inevitably don’t fit. Second, the <pre> tag feels icky for poetry. I prefer indenting lines via a class or an attribute rather than just putting spaces in the source, since classes and/or attributes let me have more control over the final display. You can’t really style spaces. Plus, if you’re on a Kindle, <pre> tags automatically render as Courier even if you try to override it with CSS. Third, if you want to add line numbers, you have to stick them inside your p tag, which also feels icky. I prefer keeping separate containing elements for each line so I can style them with CSS, and the <p> tag is the best I could find for that purpose that actually works on existing ebook readers today. (I did look into using ol/li tags, which I’ve used for poetry on the web, but they don’t work so well on ebook readers. And “p” is shorter than “div”.)

If you can get the p/br/pre approach working nicely with hanging indents on EPUB readers and the Kindle, more power to you. Again, I’d love to live in an ideal world where I could do this semantically. I’m not entirely sure what the benefit of using semantic markup for ebooks is, though; since the HTML in EPUB and Mobipocket isn’t really accessible outside the ebook reader, what would be the purpose? Other than a clean conscience, I guess. :)

My wife and I are just getting started on a Great Books Project (http://greatbooksproject.com) where we hope to gather and organize many of the classics into easily usable formats. We’ll have lots of translated works, especially of ancient plays like those of Sophocles and Aeschylus which will require line numbers for proper reference and sharing in discussion.

What concerns me about the line number scheme shown above is that the line number becomes part of the document text rather than metadata that enriches it. I’m just reading the EPUB 3.0 draft, and it looks like “Canonical Fragment Identifiers” may provide some relief. It is sad, however, that we don’t have a clear convention for encoding line numbers into electronic format without including them as part of the actual document text.

If anyone has any thoughts about how to encode line numbers as true metadata, then I would love to hear about it. Thanks!

There are a few different ways you can do it on the web — I’ve used ordered lists (see my edition of [Sir Gawain](http://bencrowder.net/books/sir-gawain/)) and you could also use CSS counters. For ebooks, though, the problem is that ebook readers don’t really support either method very well. (EPUB readers like iBooks and ADE fare a little better, but there’s no hope for the Kindle.) EPUB 3.0 says it’ll support CSS 2.1, which means you’d get [counters](http://www.w3.org/TR/CSS2/syndata.html#counter), but the question is whether the ebook readers will actually support it. In my experience, most of the readers out there severely limit the CSS you can use (even beyond the EPUB spec). It’s sad.

Anyway, if you find something that works, let us know. :)

Thank you for compiling this info! Makes a great reference.
I don’t recommend using PRE for poetry unless the lines are very short because PRE-formatted lines don’t wrap in EPUB files. If you check the file using a large font size, you can see the lines getting cut off.

When approaching the markup of poems, one should take a look at the TEI (Text Encoding Initiative: http://www.tei-c.org/index.xml) XML specification. Whilst TEI does not concern with the rendering and viewing of it does allow for ‘behind the scenes’ markup of textual content which may help to address Mr Ross’ desire to sustainably encode line numbers. Of course, in EPUB one would need to convert the TEI XML document to XHTML, and in doing so ‘lose’ the markup from the viewable document.

I’m a little late but it’s worth noting that the Kindle format doesn’t support negative text-indent values as recommended above. A bummer really as I can’t for the life of me figure out how to do hanging indents on the Kindle.

Also Kindlegen hates nested tags and will generate all sorts of force-closed <p> errors.

Leave a comment