To Make a Long Narrative Poem Short

This blog addresses the challenges of coding poetry anthologies, but if you just need a one-stop primer on formatting a single poem for E-books, here it is.

poem screenshot

What did the barn owl see? Ask Cicero.

For the HTML, use XHTML 1.1. That’s what the authorities on EPUB recommend (1). Use <hx> elements for titles and authors. Use <p> tags for almost everything else. Use the <span> tags sparingly. Define your distances with ems: 1em, 3em, 5em, and so on. The final result ends up looking like this:

<h3>What the Barn Owl Saw</h3>
<h4>Nancy Kilroy</h4>
<p class="PoemDedication">for Sally Samples, 1980-2011</p>
<p class="PoemStanza">in fermentum leo ut urna</p>
<p class="PoemLine">hendrerit commodo.</p>
<p class="PoemLine">vestibulum posuere,</p>
<p class="PoemStanzaIndent1">lorem quis tristique imperdiet,</p>
<p class="PoemLineIndent1">nulla dolor auctor augue,</p>
<p class="PoemLineIndent1">quis egestas elit ante id nisi.</p>
<p class="PoemStanza">integer pretium non</p>
<p class="PoemLine">nunc et tincidunt.</p>
<p class="PoemLine">morbi ante magna,</p>
<p class="PoemStanzaIndent1">consequat in ultrices quis,</p>
<p class="PoemLineIndent1">tincidunt sed quam.</p>
<p class="PoemLineIndent1">integer eu mi ut eros aliquet</p>
<p class="PoemStanza">Nam felis tellus, accumsan sit amet auctor et, tempus ac risus. </p>
<p class="PoemLine">Nunc congue nunc orci, non ornare felis rutrum ac.</p>
<p class="PoemStanzaIndent1">Maecenas vitae auctor neque, vel pellentesque mauris. </p>
<p class="PoemLineIndent1">Phasellus eros tortor, rhoncus in turpis et, blandit dictum mi.</p>

Notice that I have each line in its own <p> paragraph tag. That isn’t wrong—artistically, technically, or semantically (1). Lines in poems are independent of sentences; a sentence can be enjambed across two or more lines, or a line can comprise multiple sentences. A line of a poem is largely analogous to a paragraph (2). I do use a few different classes. Here is what each class does:

  • “PoemLine” is my basic, go-to line. It is left-justified with a hanging indent. 60% or more of all lines of poetry in Bicycle Comics’ anthologies are <p class=”PoemLine”>.
  • “PoemLineIndent1” is indented by 3ems. There aren’t tabs in HTML, but it’s about “one tab” in from the left margin.
  • “PoemStanza” is the class I use for the first line of each stanza. If a poem has four stanzas, it will have four <p class=”PoemStanza”> tags (3).
  • “PoemStanzaIndent1” is the class I used for the first line of an indented stanza.
  • “PoemDedication” is the class for dedications, epigraphs, introductions, or other quick notes at the beginning of a poem. I don’t care for dedications in poems, so I try not to use this very often. It is right justified and italicized.
  • There are other classes I use for other, more complex poems, and anthologies are a whole other kettle of fish, but this covers 80% of what I use on a poem-by-poem basis.
  • Some people want to add <div>’s on each stanza. Okay, but I don’t see the necessity.

A haiku would look like so:

<p class="PoemStanza">Start with five short words.</p>
<p class="PoemLineIndent1">Now come seven syllables.
<p class="PoemStanza">Five more and you're done.</p>

Here’s what the css for all of this looks like: (4)

h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 175%;
text-align: right;
}

h4 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 150%;
font-style: italic;
color: #CCC;
text-align: right;
line-height: 200%;
}

.PoemLine {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
padding-left: 1em;
text-indent: -1em;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
}

.PoemLineIndent1 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
padding-left: 3em;
text-indent: -1em;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
}

/* Here's the same .PoemLine as above, but with extra top margin to set it apart for a new stanza */

.PoemStanza {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
padding-left: 1em;
text-indent: -1em;
margin-top: 1em;  /*this is the only change from regular .poemLine */
margin-bottom: 0;
line-height: normal;
}

/* Here's the same .PoemLineIndent1 as above, but with extra top margin to set it apart for a new stanza */

.PoemStanzaIndent1 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
padding-left: 3em;
text-indent: -1em;
margin-top: 1em; /* the only change I make for a new stanza */
margin-bottom: 0;
line-height: normal;
}

.PoemDedication {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
font-style: italic;
padding-left: 1em;
text-indent: -1em;
text-align: right;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
}

That’s all there is to it. Wanna see? Try it yourself. Don’t forget to make your browser window really narrow so you can test the line breaks on the final two couplets.

Updated July 28, 2014 with footnotes.

(1) The people who creatively advocate using unordered lists for poetry stanzas out of a philosophical ideal of syntax have the right spirit, but they miss the point that poems are not lists of lines anymore than they are collections of tiny paragraphs. The Web was not designed for poetry; anything poetry does to render itself properly on the Web will therefore be utilitarian in its approach.

(2) Liza Daly of Safari Books Online first clued me in to the value of treating each line of poetry as a unique unit, although in the end I chose the (p) tag as more appropriate for poetry (philosophically and semantically) than (span).

(3) Portions of this CSS are derived from Liz Castro’s blog post on media queries, although the Bicycle Comics workflow doesn’t go down the media-query path. If you need to specify your formatting at the device level, Castro’s workflow is the way to go; it should get along pretty well with the CSS I’ve outlined here.

(4) There are several ways to condense and combine rules to make these CSS classes much shorter. Please check out my other blog posts for tips on more efficient CSS.

1 Comment

Filed under Code Samples

One response to “To Make a Long Narrative Poem Short

  1. Reblogged this on Bicycle Comics on WordPress and commented:
    If you read only one post from our Yellow Buick Review project, this should be it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s