Tag Archives: poetry formatting

The Poem? How Many Divisions Does it Have?

As I put the finishing touches on Yellow Buick Review No. 2, I take a minute to reflect on what has changed, for good and ill.

This tutorial is based on the first generation of HTML/CSS techniques we figured out (with plenty of help) for our poetry E-books and E-book anthologies. The first issue of Yellow Buick Review used those techniques. The commercial offerings at Bicycle Comics all use the first generation markup/code. It works, it looks good, it’s even elegant in the right light.

We have a second-generation set of techniques, though. Those are what I’ve been using on Yellow Buick Review No. 2. The biggest difference? YBR 2 uses the div element to structure each stanza of a poem.

(Update: We now have a third-generation set of markup techniques that use media queries to serve cascading style sheets appropriate to the device in use. Most of this post is now outdated, but I’ll leave it here as a marker of our thinking in mid-September, 2014.)

Here are two stanzas of a poem formatted using 1st Gen YBR markup:


<p class="PoemStanza">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="PoemLine">Etiam id lacus ligula. Sed libero sem, ullamcorper</p>
<p class="PoemLine">Non pulvinar eget, ultricies eu felis.</p>
<p class="PoemStanzaIndent1">Etiam lacinia metus ligula, sed convallis turpis tristique eu.</p>
<p class="PoemLineIndent1">Nam in tortor dictum odio dapibus egestas.</p>
<p class="PoemLineIndent1">Nullam id odio ut ante lobortis sodales eget sed quam.</p>

Compare that with the same poem in 2nd Gen YBR markup:


<div class="PoemStanza">
<p class="PoemLine">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="PoemLine">Etiam id lacus ligula. Sed libero sem, ullamcorper </p>
<p class="PoemLine">Non pulvinar eget, ultricies eu felis. </p>
</div>
<div class="PoemStanzaIndent1">
<p class="PoemLine">Etiam lacinia metus ligula, sed convallis turpis tristique eu.</p>
<p class="PoemLine">Nam in tortor dictum odio dapibus egestas. </p>
<p class="PoemLine">Nullam id odio ut ante lobortis sodales eget sed quam.</p>
</div>

The big difference? In 2nd Gen, each stanza gets wrapped in its own <div> tags. It is the <div>, not the <p>, that holds the margin-top attribute and value. 2nd Gen also uses percentages for most of its measurements, not em.

Continue reading

Leave a comment

Filed under Look and Feel, Testing and Uploading

Available Now: The Yellow Buick Review Vol. I

Download your free copy of The Yellow Buick Review today.

yellow buick review cover

Ain’t she a beauty?

I’m still working on my backlog of tutorials, but since Yellow Buick Review is now accepting submissions, I figured I ought to make Volume I available. You can download it free from Bicycle Comics starting today. Once all the tutorials are up, I’ll also list it on the official stores for Amazon Kindle, Barnes & Noble Nook, and Kobo.

The Yellow Buick Review is the world’s least-prestigious, most-helpful literary magazine. The poems are total nonsense, the formatting is solid, and the code is open-source for all to see, critique, and adapt.

Download your free copy of The Yellow Buick Review, take it for a spin, and pop the hood to see how it all works. I’d love to know what you think.

Creative Commons License
Yellow Buick Review by yellowbuickreview.wordpress.com is licensed under a Creative Commons Attribution 4.0 International License.

2 Comments

Filed under Testing and Uploading

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

First Substance, then Style

Once you have a plain text file, dress it up with MS Word Styles. Just be careful not to fall in love.

Again, that screaming sound you hear is from well-intentioned people (well-informed, even) who simply cannot abide the thought of using MS Word for any part of making a poetry E-book anthology. If you are comfortable in CSS/HTML, then you can ignore this post, and catch up with us once we get into the posts about line and stanza classes.

But if you’re squeamish about CSS/HTML and comfortable in MS Word, then perhaps this step will serve as a gentle introduction to the concept of logical, hierarchical page structure. Many other sites cover MS Word Styles in depth. The main idea, here and later on, is simple: Don’t make text look fancy. Define it as fancy. Continue reading

7 Comments

Filed under Manuscript Preparation

Indented Indentured Servitude

Poets have their own styles. But a poetry anthology should set some formatting ground rules.

For Bicycle Comics’ poetry anthologies, we allow three levels of indent, plus centered and right-justified text. That’s five different relations a line of poetry can have with its margins.

indents on screen

  1. flush left or “normal.” This is level “0” above, for 0 indents
  2. 1 indent, still left justified with a hanging indent
  3. 2 indents, still left justified with a hanging indent
  4. centered text, indents not applicable
  5. flush right or right-justified text, indents not applicable

I think that’s enough. Limitations help creativity, they don’t hurt it. Few people complain anymore about Twitter’s 140 character limit, or SMS’s 160 character limit. Not that many people complain about sonnets with only 140 syllables, or pianos with 88 keys.

If a poet is really fussy about margins and indents, then chances are a digital anthology isn’t the right choice for that poet, anyway. With E-book poetry, you can only recommend the final appearance of a poem; you can’t control it.

 

5 Comments

Filed under Book vs. Ebook, Manuscript Preparation