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

Leave a 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 (*note). 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.

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

*Note: 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.

1 Comment

Filed under Code Samples

Famous Last Word Post

We’re here! Which is to say, we’re done with Microsoft Word, and we can now start doing stuff directly related to making E-books for EPUB and Kindle.

If you’re an old pro text editor who skipped the first four tutorials because they were too Word-y, welcome back! I’ll ask your indulgence for just one more paragraph:

Word people, now that you’ve used Microsoft Word’s Styles to define all parts of your document, now that you’ve proofread it, now that you’ve sent drafts out to your contributing poets for their input, all you need to do to join us in Web world is save your Word document as .html. Go to the File menu, select Save As, and then select “Format: Web Page (.htm)” and select “Save only display information into HTML.” Give your file a name without spaces, such as “YBR_MSWord_Style_Formatted.htm.”

Image

That’s it! Done with Microsoft Word. Now you’ve got ONE .htm file. Continue reading

Leave a comment

Filed under Look and Feel, Manuscript Preparation

Stylesheets, Then and Now

Some book designers don’t know what CSS stands for. That might actually be a good thing.

css illustrationCSS stands for Cascading Style Sheet. It’s basically a dress code for your website or your E-book. “Business casual! Serifs optional!” The E-books at Bicycle Comics have had two or three Cascading Style Sheets inside them. “Cascading” means that the different style sheets know which one to listen to if the instructions conflict. (If the company picnic is “T-shirts and jeans,” but your boss tells you “Dockers and polo shirts” then you’ll probably wear Dockers and a polo shirt.)

The thing is, the term “style sheet” far predates Web pages and E-books. Traditional book and magazine publishers have used style sheets for decades, to define a standard look and feel for all the different editors and designers. Stories in The New Yorker famously have three columns of text per page. The front cover of Time always has a red border. Apple Computer wrote all their user manuals in Garamond back in the 1990s. These consistent presentations resulted from the use of company-wide style sheets. Continue reading

2 Comments

Filed under Book vs. Ebook, Look and Feel