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:

  1. Survey the CSS to find junk.
  2. Explain why it is junk.
  3. Nuke it.
  4. Replace it with much better, poetry-specific CSS.

1. Survey the CSS to find junk.

This one is pretty easy.  Check out the top third of the source code for YBR_4_DW_DivSpan.html, particularly around lines 60-85*: lots and lots of span rules that we will never use in the final E-book. These rules aren’t even used in the actual HTML!

(*As always, all line numbers are +/- 3.)

YB6_CSS_junk

What IS this junk?

2. Explain why it is junk.

For sheet pointlessness, check out lines 70-72:

span.Heading3Char {
font-family: Helvetica;
}

Everybody clear on what just happened? We have a rule in our inline cascading style sheet that says “make this part of the heading Helvetica.” Helvetica is a great font, but will there ever be a moment when we’d want just a few words in a heading to show up in Helvetica? Unlikely.

Or look back at the last few lines of the inline css before the code switches to HTML:

span.DocumentMapChar {
font-family: "Lucida Grande";
}
.MsoChpDefault {
font-family: Cambria;
}

I have no idea what “DocumentMapChar” is for, nor do I understand why anything in my “Chp” would “Default” to “font-family: Cambria,” since the Yellow Buick Review never uses Cambria anywhere. The CSS is your code. Maybe some other program wrote it, but this is your code now. If you have no idea why it is there, if you can’t explain what it does or how it might be useful, it is junk.

But the BIG kicker is the way this CSS uses so many different units of measurement. Lines 108-117 are pretty good examples:

span.TitleChar {
font-family: "Calibri", "serif";
color: #17365D;
letter-spacing: .25pt;
}
p.PoemStanza, li.PoemStanza, div.PoemStanza {
text-indent: -.25in;
font-size: 14.0pt;
font-family: "Century Schoolbook";
}

“Letter-spacing: .25pt” it says. A quarter-point? What are we, stockbrokers? Don’t call letterspacing of .25pt in a reflowable E-book. At least, don’t do it with <span>! If you need that level of control, try PDF or old-fashioned paper books. Moreover, while specifying a “font-size: 14.0pt” made sense in print or PDF, it’s not useful in E-books, where the reader gets to decide font sizes. Finally, “text-indent: -.25in” would be a reasonable hanging-indent in print or desktop PDF, but just think of all the different E-readers out there: small Android phones, mid-sized Kindles, the gigantic iPad:

An inch is not always an inch
Device Screen size (diag.) .25″ as % of screen
LG Optimus Elite
3.5″
7%
Kindle Paperwhite
6″
4%
iPad Air
9.7″
2.5%

What’s the right answer? Use relative measurements; measurements that can scale. Define fonts as percentages: 100% for body text and most <p> tags, going up to maybe 250% for <h1> tags or down to 75% for <h5> or <h6> tags. Define margins, paragraph spacing, and line spacing as ems: the width of an uppercase letter “m” in whatever font we’re talking about. Indent a new prose paragraph by 2em, or leave a space of 1em after each section.

Defining measurements in absolute terms flat-out confuses early-model Kindles, and it ignores the diversity of devices and the preferences of readers. The CSS we have is junk. So let’s nuke it.

3. Nuke it.

We can beat around the bush, refine a class here, change a specification there, but there’s a shorter way. We can just nuke it. Delete the entire stylesheet. Ka-BOOM!

Here’s what how my file renders with the junk CSS we’ve got:

screenshot of yellow buick review title page screen shot of yellow buick review poems

Are these really worth keeping? Are they worth the trouble of line-by-line fixing? Nope.

So let’s delete the whole thing, starting from line 6 <style> down to line 167 </style>. What does that look like? It looks like YBR_5_DW_NukeCSS.html. Here are screenshots:

screenshot of yellow buick review title page with no css stylesscreenshot of yellow buick review poetry with no css styles

Hardly beautiful, but do they really look that bad? How can the HTML even render anything when it’s full of calls to styles that no longer exist? Well, remember when I first described cascading style sheets? Here’s what I said:

CSS 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 HTML portion of our file still renders, even without the CSS, for the same reason that you wouldn’t show up naked to the company picnic, even without specific dress code instructions from your boss. You’d wear khaki slacks and a white dress shirt, perhaps. Not very fashionable, but unlikely to get you in trouble. Well, Times Roman is how Web browsers do khaki slacks and a white dress shirt.

As bad as it may look, this is still progress. Because we’ll make things much better in the next step:

4. Replace it with much better, poetry-specific CSS

You can do this in one of two ways. If you trust me and want to get on with it, you can just paste in this CSS information, from <style> all the way to </style>. But if you’d like a better understanding of how this stuff works, go slowly, pasting in one class, class selector, or ID rule at a time, and refreshing the .html file in your browser as we go.

Here’s what the CSS looks like. (It’s big, but, we’ll streamline this CSS later):

<style>
<!--
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 200%;
background-color: #FFCC66;
text-align: left;
}

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 175%;
background-color: #CCC;
text-align: left;
page-break-before: always;
}

/* the h2.flip varient is only for headings that come after a poet's name */

h2.flip { 
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 175%;
background-color: #CCC;
text-align: left;
page-break-before: always;
}

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

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

h5 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 115%;
}

a:link, span.MsoHyperlink {
color: blue;
text-decoration: underline;
}

a:visited, span.MsoHyperlinkFollowed {
color: purple;
text-decoration: underline;
}

p.PoemLine, li.PoemLine, div.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;
}

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

p.PoemLineIndent1, li.PoemLineIndent1, div.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;
}

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

p.PoemLineRightJ, li.PoemLineRightJ, div.PoemLineRightJ {
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;
text-align: right;
}

/* The Stanza classes are the same as the Line classes, except the Stanza classes have a margin-top of 1em . Use them only for the first line of each stanza. -AM */

p.PoemStanza, li.PoemStanza, div.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;
}

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

p.PoemStanzaIndent1, li.PoemStanzaIndent1, div.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;
}

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

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

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

p.prose, li.prose, div.prose {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
text-align: justify;
text-indent: none;
line-height: normal;
margin-top: 0;
margin-bottom: 0;
}

p.ProseStanza, li.ProseStanza, div.ProseStanza {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
text-align: justify;
text-indent: none;
line-height: normal;
margin-top: 1em;
}

p.ProseSection, li.ProseSection, div.ProseSection {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
text-align: justify;
text-indent: none;
line-height: normal;
margin-top: 1em;
page-break-before: always; /* This is the only difference for .ProseSection over .ProseStanza */
}

.Section {
page-break-before: always;
}
-->
</style>

We’ll go through this CSS in more detail in subsequent posts, but notice that all the measurements are in ems or %. How do things look once I’ve got this CSS code in the file? Here are some screenshots, or you can see for yourself in your browser.

YB11a_BetterCSS YB11b_BetterCSS

I’ll save this file as YBR_6_DW_PurgedCSS.html .

We have line breaks. We have hanging indents. We have modern typography. We have right- and left-justified sections. It’s hardly perfect, but the Yellow Buick Review is starting to look like a real poetry E-book, after all.

Updated July 30, 2014 with links to new content and posts.

Updated February 28, 2015 with new “flip” class for <h2> elements (poem titles) that need to appear after a poet’s name (often done if the title of the poem serves as the first line)

5 Comments

Filed under Code Samples, Look and Feel

5 responses to “Simplify, Simplify (CSS Portion)

  1. Pingback: Streamlining CSS: Chicken Sandwiches, Simplified | The Yellow Buick Review

  2. Pingback: To Make a Long Narrative Poem Short | The Yellow Buick Review

  3. Pingback: Moving Out: Making Your Cascading Style Sheet External | The Yellow Buick Review

  4. Pingback: After Step 3 Comes…Step 3? | The Yellow Buick Review

  5. Pingback: Simplify, Simplify (HTML portion) | The Yellow Buick Review

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