Formatting Poetry in ePUB: Part 1
Liz Castro has a great post on making poetry look good across multiple devices using media queries in ePUB, “Media Queries for Formatting Poetry on Kindle and ePUB.” Castro focuses most of the post on how to use media queries to make poetry that looks good in ePUB display in a way that will also look correct on Kindle and Kindle Fire in thew new KF8 format. Her information is a result of close reading of the Amazon Kindle Publishing Guidelines and her own testing. [Editor’s note: This is updated and corrected from an earlier version of this post.]
Joshua Tallent also has a post on this at his new eBook Architects Blog titled “Backwards Compatible Poetry for KF8/Mobi.” In this post, Tallent shows you how to use media queries and CSS to apply the old negative text-indent
and non-breaking space Mobi poetry workaround in legacy Kindle devices while applying standard CSS negative text-indent
and positive margin-left
for the KF8. Much of the Kindle formatting instructions are also in Joshua Tallent’s seminal book Kindle Formatting.
Natasha Fondren (@eBookArtisans) also has a great post of backward compatibility of pull quotes in Kindle and KF8 titled “Pull Quotes in Kindle Format 8.”
With these recent posts about poetry in KF8, I thought it might be a good time to go over some basic ePUB poetry formatting since it seems to be a question that comes up a lot as people move into ePUB creation.
Block Poem Quotes in <div>
If I am placing a poem or a poetry block quote in running text, I generally will put it in a <div>. A general poetry <div> would have indented margins and space before and after it. It might look like this in the CSS:
div.poem {
margin-left: 1em;
margin-right: 1em;
margin-top: 1em;
margin-bottom: 1em;
font-size: small;
}
This will create indented margins on the left and right sides of the poem compared to the running text and create a 1em space before and after the poem.
Paragraph Styles for Poems
I then want a paragraph style that will ensure that any long line that runs over is not flush left but has a “poetic indent,” that is it is indented slightly further than the greatest intentionally indented line (I will explore this more fully below). So the paragraph style for a poem might look like this:
p.poem1 {
text-indent: -2em;
font-size: small;
margin-left: 2.5em;
margin-top: 0.0em;
}
So a poem with no indented lines or stanza break might look like this:
<div class=”poem”>
<p class=”poem1″>The world is charged with the grandeur of God.</p>
<p class=”poem1″>It will flame out, like shining from shook foil;</p>
<p class=”poem1″>It gathers to a greatness, like the ooze of oil</p>
<p class=”poem1″>Crushed. Why do men then now not reck his rod?</p>
<p class=”poem1″>Generations have trod, have trod, have trod;</p>
<p class=”poem1″>And all is seared with trade; bleared, smeared with toil;</p>
<p class=”poem1″>And wears man’s smudge and shares man’s smell: the soil</p>
<p class=”poem1″>Is bare now, nor can foot feel, being shod.</p>
<p class=”poem1″>And, for all this, nature is never spent;</p>
<p class=”poem1″>There lives the dearest freshness deep down things;</p>
<p class=”poem1″>And though the last lights off the black West went</p>
<p class=”poem1″>Oh, morning, at the brown brink eastwards, springs—</p>
<p class=”poem1″>Because the Holy Ghost over the bent</p>
<p class=”poem1″>World broods with warm breast and with ah! bright wings.<a id=”c03-ftn2a”></a><a class=”hlink” href=”9780829435566_epub_nts_r1.htm#c03-ftn2″><sup class=”frac”>2</sup></a></p>
</div>
and display like this (in ADE):
Line Indents in Poems
In the case of this particular poem, however, some of the lines in the poem should be indented, so a second paragraph style is needed. Here is what my second poetry paragraph looks like in the CSS:
p.poem2
{
text-indent: -1em;
font-size: small;
margin-left: 2.5em;
margin-top: 0.0em;
}
This second poem style will indent the first line 1em right of the p.poem1
style. Note that the actual margin-left
is still 2.5em
, so any run-over lines with be further indented 0.5em
. You can add additional levels of indent as long as the margin-left
can accommodate all the negative text-indents needed. If three levels are needed, move the margin-left
to 3.5em
and your three negative indents should be -3em
, -2em
, and -1em
. The progression for additional indents should be clear.
Applied appropriately to the poem, it looks like this:
<div class=”poem”>
<p class=”poem1″>The world is charged with the grandeur of God.</p>
<p class=”poem2″>It will flame out, like shining from shook foil;</p>
<p class=”poem2″>It gathers to a greatness, like the ooze of oil</p>
<p class=”poem1″>Crushed. Why do men then now not reck his rod?</p>
<p class=”poem1″>Generations have trod, have trod, have trod;</p>
<p class=”poem2″>And all is seared with trade; bleared, smeared with toil;</p>
<p class=”poem2″>And wears man’s smudge and shares man’s smell: the soil</p>
<p class=”poem1″>Is bare now, nor can foot feel, being shod.</p>
<p class=”poem1″>And, for all this, nature is never spent;</p>
<p class=”poem2″>There lives the dearest freshness deep down things;</p>
<p class=”poem1″>And though the last lights off the black West went</p>
<p class=”poem2″>Oh, morning, at the brown brink eastwards, springs—</p>
<p class=”poem1″>Because the Holy Ghost over the bent</p>
<p class=”poem2″>World broods with warm breast and with ah! bright wings.<a id=”c03-ftn2a”></a><a class=”hlink” href=”9780829435566_epub_nts_r1.htm#c03-ftn2″><sup class=”frac”>2</sup></a></p>
</div>
It displays like this:
Stanzas and the Space Between Stanzas
In this particular poem, the text should actually be broken into two separate stanzas. There are a number of ways you can add the line space needed to separate two stanzas. I will go through them from what I feel is the least desirable solution to the most desirable.
Use a <br>
First, you can use an inline break or <br>
to add a line space. In my view, this is equivalent of using a soft return in for-print files. It is easy to do, but I do not recommend it since you are not really identifying the significance of the space and it often leads to content displaying incorrectly.
Use Inline Styling
Second, you can add the line space as a margin-top
or a margin-bottom
inline. It would look like this:
<p class=”poem1″ style=”margin-bottom: 1.0em;”>Is bare now, nor can foot feel, being shod.</p>
or
<p class=”poem1″ style=”margin-top: 1.0em;”>And, for all this, nature is never spent;</p>
It would display like this:
This will accomplish what you want to do, but I like to avoid local inline styling if possible since you are losing some semantic meaning by applying it.
Use a Paragraph Style
A third way to create a stanza space is to create a paragraph style for the last line of a stanza or the first line of a stanza following the first stanza. In this case, the first line is always flush left and adding a space after the last line of a stanza could lead to too much space after the last line of the poem with the addition of the <div> margin-bottom
, so I am going to create a paragraph style for a poem that has margin-top: 1em;
that I will call poem1s2
. It looks like this in the CSS:
p.poem1s2 {
text-indent: -2em;
font-size: small;
margin-left: 2.5em;
margin-top: 1.0em;
}
Inline, applying the style will look like this:
<p class=”poem1s2″>And, for all this, nature is never spent;</p>
This will display exactly like the previous example.
This is not a terrible way to add the stanza space, but it does mean that you have to make sure you apply the style where needed and it adds one more paragraph style to keep track of on your CSS and apply properly.
Use Two <div> Classes
The fourth way to add the stanza class is to apply a <div>
class to the first stanza and a different <div>
class to each subsequent stanza. First, I rename the div.poem
class to div.stanza
in the CSS.
div.stanza {
margin-left: 1em;
margin-right: 1em;
margin-top: 1em;
margin-bottom: 1em;
font-size: small;
}
I will apply this to the first stanza of any poem. If there is only one stanza, it is the only <div>
needed, the <div>
adds a space before an after the poem, and it looks just as it should.
Next, I create a second <div>
class named div.stanza1
that will be applied to all subsequent stanzas with the only difference being that there is no margin-top
.
div.stanza1 {
margin-left: 1em;
margin-right: 1em;
margin-top: 0em;
margin-bottom: 1em;
font-size: small;
}
Using the two <div>
s, you can add the space between stanzas of a poem without having to worry about adding specific paragraph or inline style to indicate a stanza break. The <div>
class also has semantic meaning and will help you identify the parts of the poem. It displays just as the other choices did.
How are you doing basic poetry coding and indents? How do you create breaks between stanzas?
That’s some beautiful poetry! Seriously, though, gorgeous.
Thanks for the link back! 🙂
I’ve been doing div style=”padding-left: 1.5em; text-indent: 1.5 em;” sort of thing for EPUB, and it’s harder to be the conversion to MOBI to work right in Kindle. (I wish Kindle would support EPUB.)
I meant to write div style=”padding-left: 1.5em; text-indent: -1.5 em;”.
In the past I haven’t been happy with using paragraph elements to wrap lines of verse (it seems semantically confusing). Instead I wrapped stanzas in p elements, wrapped lines in span elements, and broken the lines with br elements. Poetic indent can be provided by creating a positive margin-left for the p, and a negative margin-left for the span. Note: this doesn’t work on older Kindles.
[…] TweetFormatting Poetry in ePUB: Part 1 focused on basics of getting poetry indents right on multiple devices. In this post I wanted to give you a round up of other posts that have addressed poetry formatting issues in ePUBs. Most of these have been collected by Robert Nagle (@nagletx) on the MobileRead Wiki under “Formatting Verse for Epub, Kindle and Epub 3.” […]
“ePUBSecrets
The css class I use for poetry looks like:
p.poetic {
text-indent:-1em;
text-align:left;
margin-left:2.5em;
}
At least on my nook, this looks good (after finding out it doesn’t recognize auto values for margins…)
I’m converting a long poem to HTML for use in an ePub, as a favour for a friend. Is there a way to force e-readers to keep stanzas intact on a page (when possible)? I’d also like the spacing at the top of a page to be related to the font size and screen size, and the spacing at the bottom to never go below a set minimum (also based on the font size and screen size). I’m a beginner in CSS and am finding it quite daunting – can anyone tell me if, and how, this can be done?
Very nice poetry…Words are present here so beautifully…
Thanks for shre with us… 😀
Thanks
Excellent post. I used to be checking constantly this blog and
I am inspired! Extremely useful information specifically
the last part 🙂 I care for such info a lot. I was looking for this certain info for a very long time.
Thanks and good luck.
Website: Grey Blocker funziona davvero