Become a Yellow Buick Review…Reviewer!

I’m tired of poetry anthologies that suck. Help me help other small presses get it right.

I’ve been posting E-book formatting tutorials for two months, and while I still have more ground to cover, I can see that I’m getting close to releasing the first issue of The Yellow Buick Review, so you can see what all this HTML/CSS/mobi7 fuss is about. To be clear, the techniques I’m describing are the techniques we actually use over at Bicycle Comics to produce and sell chart-topping poetry E-books. So I know our code works. But E-books and E-readers evolve quickly, and I want to be sure that the first issue looks great on old and new devices. So I’m asking for a few beta readers to review The Yellow Buick Review.

Yellow Buick Review DownloadReviewing is easy. I’ll just need you to load the Yellow Buick Review file onto your device, flip through a few pages, and send me one or two screenshots. You don’t need to read the book. You don’t need to write and post a review to Goodreads or Amazon. (The book, as you’ve probably noticed, is total gibberish, so you can’t read it.) And if you find any problems or glitches, I’d appreciate your letting me know. You can sign up to be a reviewer with this form.

Hey, lots of literary magazines have indecipherable poems and bogus “reviewers.” YBR is just the first lit mag to brag about it.

Thank you in advance!

Leave a comment

Filed under Testing and Uploading

Streamlining CSS: Chicken Sandwiches, Simplified

Let’s order lunch and streamline our code classes.

We’ve already nuked and simplified The Yellow Buick Review’s HTML/CSS. Before we make it external, let’s streamline our CSS (cascading style sheet) even more. What’s that? You don’t know how to streamline CSS code for a poetry anthology E-book? That’s no problem. Do you at least know how to order lunch? Cool! Let’s start with that. There’s an amazing fried chicken place around the corner from the office. I’ll go around and get everyone’s order: Continue reading

Leave a comment

Filed under Code Samples, Look and Feel

Simplify, Simplify (CSS Portion)

Dump the needless CSS you’ve inherited from prose-oriented programs, and replace it with CSS that understands poetry’s unique needs.

illustration of HTML with internal CSS

Pardon the mess; MS Word was visiting.

Through this whole tutorial, we’ve been using cascading style sheet information that we inherited from the original MS Word save-to-HTML operation. Here’s where we set ourselves free. The CSS we have in our sample file is an inline cascading style sheet: it occupies the top third of our HTML. (Quick clarification: an .html file can hold all kinds of code—CSS, HTML, XML, javascript, php, and so forth. HTML is just one kind of information that can sit in an .html file.) There are two problems with this approach.

  • It’s inside our .html file, which is not as useful/easy as giving it its own document.
  • It’s terrible, terrible code anyway.

Just look at my highly technical illustration of the HTML file. See all the “junk” in there? That’s no good. Most poetry anthologies have enough junk as it is; let’s not put junk CSS in there, too. So, here’s what we’ll do about it:

Continue reading

1 Comment

Filed under Code Samples, Look and Feel

Simplify, Simplify (HTML portion)

If your E-book’s .html file has too much junk in it, take Thoreau’s advice and “simplify, simplify.”

Here’s what we’ll do.

  1. Make multiple backup copies.
  2. Change our HTML file to HTML5.
  3. Tidy up our HTML code automatically.
  4. Tidy up our HTML code manually.
  5. We’ll tidy up the CSS part next.

1. Make multiple copies of our .html (or .htm) file

Do it. We’ll be performing major surgery on these files. E-mail one to yourself. Put one on a USB thumb drive. Put one on DropBox. Redundancy defines our age. I’m starting with the file “YBR_1_MSWord_Style_Formatted.htm“. All Yellow Buick Review source files are free to download.

Continue reading

Leave a comment

Filed under Code Samples, Look and Feel

Picking an HTML Editor for E-books

When it comes to E-books, I find nothing can replace a good Find/Replace text editor.

html editors dogpile

Past and present HTML editors

Even if you start your E-books in InDesign, QuarkXPress, or Microsoft Word, chances are pretty good you will end them in an HTML editor. An HTML editor—wait for it—helps you edit HTML. They also edit CSS, and many also handle Javascript. You’ll need to get an HTML editor. Since I run a small press, I own Adobe Creative Suite (Adobe CS 6). I thus use Dreamweaver CS 6 as my HTML editor, and my screenshots and advice will use this program, too. Adobe Creative Cloud is a newer version of this software, which you can “rent” from Adobe for $19-$39 per month depending on your needs. It is nice, but it is pricey. Here are some free or low-cost HTML editors you might want to consider if the Adobe Suite is too much for you: Continue reading

2 Comments

Filed under Look and Feel

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. 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.

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:

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. (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.

1 Comment

Filed under Code Samples