Poetry is a difficult form to layout consistently across the board. Every e-reader seems to like and dislike different aspects of HTML coding. After a lot of testing I found a process that displays sell for the Kindle, Kindle Previewer, Kindle Reader app (Mac) Adobe Digital Editions (Mac) and Sony Reader App (Mac).
When typing poems it is common to add a break after each line to keep them together. You may also be tempted to add spaces to indent lines. Don’t do either. The result will be, in a word, ugly.
And if the viewer increases the font size, then you will have a really ugly mess. Fortunately there is a hack you can use to improve the look and layout.
CSS has a property called the text-indent and it is typically used to create the first line indent on paragraphs. By assigning this property a negative value, you can force the first line backwards into the margin of the book.
Then, if you push the entire paragraph toward the right margin, you can create a style where the first line is flush-left and every successive line will be indented.
However, to achieve the effect you want, you need to turn every line of the poem into its own paragraph. So that means no breaks after each line.
There once was a dog from the sea,
Who dared never listen to me,
Though I yelled and I pled,
The cur simply fled,
Choosing to live in the city.
Disregard the space between the lines when working in your manuscript. Typically, they will flow very nicely once in the e-reader.
Poetry within a Novel or normal text
If you are creating a book that occasionally references a poem or music lyrics then you need to add a special class to your style sheet that defines your poem style properties.
First, create your poem with each line on its own paragraph. This is how your converted Word to HTML file should look:
<p>There once was a dog from the sea,</p>
<p>Who dared never listen to me;</p>
<p>Though I yelled and I pled,</p>
<p>The cur simply fled, </p>
<p>Choosing to live in the city.</p>:
We need the first line of the paragraph style to have a negative indent of, let’s say 2em. That’s equivalent to a basic paragraph indent.
Now, offset the negative indent on the first line and force all lines to indent by increasing the left margin by the same amount.
Because some e-readers create a gap at the top and bottom of paragraphs by default, you need to turn that off so that your paragraphs will look like one block of text.
Add these new properties to your style sheet
p.poem {
text-indent: -2em;
margin-left: 2em;
margin-top: 0;
margin-bottom: 0;
}
◆ TIP
If you want a less obvious indent, change the offset to a smaller number. I did a test and modified the text-indent to -0.5em and the margin-left to 0.5em to have a less obvious indent. You can change this to fit your needs.
You now need to add the class to each paragraph. The final coding will look like this:
<p class=”poem”>There once was a dog from the sea,</p>
<p class=”poem”>Who dared never listen to me;</p>
<p class=”poem”>Though I yelled and I pled,</p>
<p class=”poem”>The cur simply fled, </p>
<p class=”poem”>Choosing to live in the city.</p>
Pre-Made Poetry Template
The 3.0 Update to my Ebook Formatting Kit includes premade poetry templates. Included:
Line Poetry — poetry or lyrice within a novel or other text
Stanza — for full length poetry books or stanzas within novels
Pre-made template and CSS included.
