Formatting Tip: Poetry

About Formatting Tips.

Poetry is one of the hardest elements to get right when formatting an ebook. The biggest issue is poems visually use a fixed width. Each line needs to be easily distinguishable. If they run together the rhyming and meter can easily be thrown off. Ebooks typically allow for reflowable text. This is where the text on screen changes to accommodate the users selected font, font size, and the screen size. This is exactly what happens on a web page how each line changes length when the browser window is resized.

When dealing with a poem do not put it in a pre tag. Do not use a single p tag and separate each line with a br tag. Do use an ul tag and hide the bullet. All of these methods will end up looking terrible.

When dealing with a poem there are two parts: the poem’s text and the attribution. Each of these parts will be in p tags. Lets start by setting a base p style with CSS. We want to remove the empty space between paragraphs.

p {
    margin-bottom: 0;
    margin-top: 0;
}

There are a few special things we want to do with the poem’s text. First, we want it pushed to the right so it is clear to the reader that they have entered a poem. One way to do this is to put the entire poem in a blockquote tag. I don’t like this because this affect can be achieved with CSS. Second, the text should be smaller than the regular text. Third, we want each line to not be indented. However we do want each line to be distinguishable even if the text is wrapped. The trick is to indent the portion of the line that wraps. Think of this like a reverse paragraph indent. We can make this happen by using a negative value for the text indent. Here is the CSS block to make all this happen.

.poem-text {
    margin-left: 3em;
    font-size: small;
    text-indent: -1em;
}

With many poems there are often breaks ever few lines. Handles these by putting in an almost empty paragraph. It’s necessary to put a non-breaking space in the empty paragraph because completely empty paragraphs are often ignored by devices and reading software.

<p>&nbsp;</p>

For the title we want to have it appear italicized. We also want to force a little space between the poem’s text and the title. The author we want to force some blank space after it so it doesn’t run into a paragraph below. Both the title and author need to be right justified. Finally, I like to use small caps with the title and author. However, there is one major issue with small caps. Many reading devices and software (one’s using Adobe’s software) do not support small caps. Sometimes you can get away with using a CSS transformation to uppercase. Check your targeted reading platform / device to make sure this will come through. If it doesn’t you will need to make the title and author uppercase in the text itself.

.poem-title {
    font-style: italic;
    text-align: right;
    margin-top: 2em;
    /* Pick one or neither */
    font-variant: small-caps;
    text-transform: uppercase;
}

.poem-author {
    margin-bottom: 2em;
    text-align: right;
    /* Pick one or neither */
    font-variant: small-caps;
    text-transform: uppercase;
}

The best way to illustrate this concept is with an example. Download ft-poetry.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.