Formatting poetry for EPUB and Kindle

2018 note: this post has some formatting issues from when I migrated to a new blog engine. Until I get time to get it fixed, you’ll have to view source to see the markup correctly. (The post is also somewhat obsolete now, I think.)

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:

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

    
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.

So, encapsulate the poem in a .poetry div, put each line in a <p> 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

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.

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   entity. If any of you figure out how to get indents and hanging indents on the Kindle, let me know.

Markup

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.

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:

And right-aligned:

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

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

    
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.
    
Syllic wæs se sigebeam,  ond ic synnum fah,
    
forwunded mid wommum.  Geseah ic wuldres treow,

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  , because the spans don’t work on Kindle.

Markup

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.

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.