How to Style Poetry in EPUB

Poetry is a notoriously sticky point for reflowable EPUBS, and for some poems, plain old EPUB is just not going to cut it. Concrete poems aren’t the only ones that present difficulties for ebook design. Because the ability to pour content into many different screen-sizes, and to allow readers to control the size of the text are central to ebook usability, even the shortest lines of poetry may wrap in ways you would rather they didn’t. That’s the bad news. The good news is that you can use a simple CSS hanging indent hack shared with the eBOUND team by Joshua Tallent of eBook Architects to ensure your poems wrap elegantly.

Class prerequisite

To follow along with this tutorial, you should have a basic grasp of HTML and CSS, and how they work together. Check out An Introduction to HTML and CSS for EPUB to get up to snuff.

The problem

If you were marking up a poem normally in HTML, it might look a little like this*:

<p>
There was an Old Man of the Nile,<br />
Who sharpened his nails with a file;<br />
Till he cut off his thumbs,<br />
And said calmly, "This comes -<br />
Of sharpening one's nails with a file!"
</p>

In this code, we’ve opened a paragraph at the beginning of the the poem, and closed the paragraph at the end (those are the <p> and </p> tags) and we’ve used the <br /> tag to break the text at the end of each line. That’s fine. But what if my grandmother tries to read the poem on her iPhone?

There was an Old Man of the Nile,
Who sharpened his nails with a file;
Till he cut off his thumbs,
And said calmly, “This comes –
Of sharpening one’s nails with a file!”

The lines are breaking where we want them to, but they’re breaking where we don’t want them to as well, and the text all running flush-left creates a lot of confusion.

The solution

Reading a poem in large font on a small screen will never be ideal, but let’s see what we can do to improve the experience somewhat.

CSS has a property called text-indent that is typically used to create a first-line indent on paragraphs. By assigning this property a negative value, we create a style that pushes the first line backwards into the margin of the book. If we then push the whole paragraph forward, we can create a style where the first line of each paragraph is flush-left, and each successive line in that paragraph is indented.

Of course, the aim is not to apply that paragraph style to the poem like this:

WRONG

There was an Old Man of the Nile, Who sharpened his nails with a file; Till he cut off his thumbs, And said calmly, “This comes – Of sharpening one’s nails with a file!”

To achieve the effect we want, we must turn every line of the poem into its own paragraph, so that each line starts flush left, and indents only if it is forced to wrap by the screen size. This is not correct semantic markup; it’s a hack. But it’s a hack borne of necessity, so until something better comes along, you have eBOUND’s permission to bend the rules here.

Let’s get down to brass hacks

The first thing we’re going to do to pull off this great con, is to create a paragraph class called poem in our CSS file that carries all the attributes we want. We need to achieve three main things in this style:

  1. We need the first line of the paragraph style to have a negative indent of, let’s say 20 pixels. The code for that will be
    text-indent: -20px;
  2. By setting a corresponding margin on the left side of the paragraph, we’ll cancel out the negative indent on the first line, and force wrapped lines to indent. The code for that will be:
    margin-left: 20px;
  3. Because some browsers and ereaders create a gap at the top and bottom of paragraphs by default, we need to turn that off so that our hacked paragraphs will look like one block of text. That will look like this:
    margin-top: 0;
    margin-bottom: 0;

The default for the right margin is fine, so we’ll leave that alone. All together, the code looks like this in our CSS file:

p.poem {
text-indent: -20px;
margin-left: 20px;
margin-top: 0;
margin-bottom: 0;
}

So that’s our styling done. Now we just need to apply the styles to the poem in our HTML file. To do this will change every line to a paragraph with the class poem. For good measure, we’ll replace the dash at the end of the fourth line with an em-dash entity, (&#x97;) and to keep the em-dash from breaking onto a new line, we’ll also use the entity for a non-breaking space (&#xa0;). All together, it looks like this: <p class="poem">There was an Old Man of the Nile,</p>
<p class="poem">Who sharpened his nails with a file;</p>
<p class="poem">Till he cut off his thumbs,</p>
<p class="poem">And said calmly, "This comes&#xa0;&#x97;</p>
<p class="poem">Of sharpening one's nails with a file!"</p>

Let’s see that in action!

The grand finale:

There was an Old Man of the Nile,

Who sharpened his nails with a file;

Till he cut off his thumbs,

And said calmly, “This comes —

Of sharpening one’s nails with a file!”

And when the reader cranks the font size way up:

There was an Old Man of the Nile,

Who sharpened his nails with a file;

Till he cut off his thumbs,

And said calmly, “This comes —

Of sharpening one’s nails with a file!”

* For our demonstration, we’re using Book Of Nonsense Limerick 61 by Edward Lear.

  • To learn more about HTML and CSS, there is no better resource than W3 Schools.
  • Thanks go out to Joshua Tallent of eBook Architects who shared this hack in our ebook production workshops of December 2010 and March 2011.