How to Format…the Format?

If an HTML formatting blog asks for advice regarding the formatting of the blog, will the universe explode?

The whole point of Yellow Buick Review is to help editors format their poetry E-books. I’ve been posting code samples here as plain preformatted text using the <pre> tag. It’s simple, clear, takes me all of five seconds in WordPress. Normally, I call out line numbers beforehand, if I think they’ll matter. Here are lines 167-172 of the Yellow Buick Review:

 <h3><a id="whatBarn"></a>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>

However, I just learned about the WordPress shortcode to offer much richer code snippets on the blog. Sounds useful, right? For example, here again are lines 167-172 of the Yellow Buick Review:

<h3><a id="whatBarn"></a>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>

What do you think? It takes just a little longer on my end. Is it helpful to have the lines numbered and the syntax highlit? Or are the colors garishly distracting? Let me know.

2 Comments

Filed under Code Samples, Issues

Before You Break Up, Make a List of Your Stuff

Make the table of contents before you split the interior .html file into chapters and sections.

We’ve already separated our CSS from our HTML, and soon we’ll split our HTML into separate pages. Before that happens, we’ll make a table of contents while we still have all the information we’ll need on one page. Ready to start? Here’s what we’ll do:

  1. Type up—but don’t link—the Table of Contents.
  2. Put <a> anchors on the titles of your poems.
  3. Pay attention to anthology-specific issues.
  4. Do some light housekeeping.

1. Type up—but don’t link—the Table of Contents.

Remember, Yellow Buick Review is a sample poetry anthology. Anthologies tend to have big tables of contents, and there are often many stakeholders (and egos) involved. So be careful. This is our ToC for Yellow Buick Review, without any links:

<h2>Table of Contents</h2>
<p class="PoemStanza">From the Editor</p>
<p class="PoemStanza">Epigraph</p>
<p class="ContentsSection">April Contest Winners</p>
<p class="PoemStanza">Stan Grenfield</p>
 <p class="PoemLineIndent1">Chrome Bumper Reflections</p>
 <p class="PoemLineIndent1">Penny Candy</p>
<p class="PoemStanza">Jennifer Riggle</p>
 <p class="PoemLineIndent1">The Lighthouse at Salt Marsh</p>
 <p class="PoemLineIndent1">Donec Elementum</p>
<p class="ContentsSection">April Contributors</p>
<p class="PoemStanza">Nancy Kilroy</p>
 <p class="PoemLineIndent1">The Tale of Three Eyebrows</p>
 <p class="PoemLineIndent1">What the Barn Owl Saw</p>
<p class="PoemStanza">Andy Crenshaw</p>
 <p class="PoemLineIndent1">The Sum of its Parts</p>
<p class="PoemStanza">Amit Matthews</p>
 <p class="PoemLineIndent1">On the Sixth Anniversary of its Demotion, Pluto Facebook-Stalks Astronomers Mike Brown and Neil deGrasse Tyson</p>
 <p class="PoemStanza">Poet Biographies</p>
<p class="PoemStanza">About our Next Issue</p>

Here’s how that looks in a Web browser:

screenshot of table of contents

Note: I decided that the major sections “April Contest Winners” and “April Contributors” needed a little more OOMPH, so I created a new style just for them. Remember, whenever I make a change or set of changes to my CSS, I’ll need to update the name to avoid confusing myself later, so I’ll incorporate these changes into YBR_Cranberry.css when I make it:

p.ContentsSection, li.ContentsSection, div.ContentsSection {
 padding-left: 1em;
 text-align: left;
 background-color: #CCC; /* helps this line read better in Table of Contents */

I’ll also need to make minor changes to this stylesheet elsewhere, adding p.ContentsSection, li.ContentsSection, div.ContentsSection class selectors:

p.PoemStanza, li.PoemStanza, div.PoemStanza,
p.PoemStanzaIndent1, li.PoemStanzaIndent1, div.PoemStanzaIndent1,
p.PoemStanzaIndent2, li.PoemStanzaIndent2, div.PoemStanzaIndent2,
p.PoemStanzaRightJ, li.PoemStanzaRightJ, div.PoemStanzaRightJ,
p.PoemStanzaCenter, li.PoemStanzaCenter, div.PoemStanzaCenter,
p.ContentsSection, li.ContentsSection, div.ContentsSection {

2. Put <a> anchors on the titles of your poems.

Put anchors on everything listed in the table of contents. For me, that’s the sections, poets, and titles of poems.

Here’s what the anchor looks like for April Contest Winners, which is an <h2> heading in my manuscript. The code is on line 73 (remember, line numbers are approximate if you’re looking at an old version of YBR or your own files):

<h2><a id="aprilContest"></a>April Contest Winners</h2>

And here it is as a screenshot from Dreamweaver (click to see it in full resolution):

screenshot of anchor link on <h2> tag

3. Pay attention to anthology-specific issues.

Importantly, note what I’ve done with the anchors for the poets’ names. Here are lines 85-86:

<h3><a id=”Grenfield”></a><a id=”chromeBumper”></a>Chrome Bumper Reflections</h3>
<h4>Stan Grenfield</h4>

And here’s a screenshot from Dreamweaver:

screenshot of anchors for h3 and h4

See what’s going on there? I have both anchors on the poem’s title. Stan Grenfield has two poems in Yellow Buick Review. His biography is in the back of the book; a reader should click on the “Poet Biographies” link to get the low-down on Mr. Grenfield. Someone who clicks on “Stan Grenfield” in the table of contents probably wants to read Grenfield’s poetry, so I’ve linked it to the first poem in there. A poet such as Andy Crenshaw has only one poem in Yellow Buick Review, so…wait for it…I put both anchors on his only poem.

Let’s put some special attention on Jennifer Riggle’s poem “Donnec Elementum.” Her poem does that trick where the title of the poem is also the first line. All the other YBR poems go:

<h3>Title of Poem</h3>
<h4>Author’s name</h4>
<p>First line…</p>

But I can’t do that with “Donnec Elementum,” because inserting the author’s name mid-poem would be very disruptive. This problem came up often enough with the Tandem anthologies that we came up with an official policy. Here’s how it looks on lines 123-125:

<h4>Jennifer Riggle</h4>
<h3><a id="donnecElementum"></a>Donec Elementum</h3>
<p class="PoemStanza">Sit amet odio consectetur tempor.</p>

And here’s how that looks on the page:

screenshot of inverted author and title anchor

 

If typesetting three anthologies has taught us anything, it’s that poets love typographical curve balls. We’ve learned to roll with it.

4. Do some light housekeeping.

Some other stuff has come up while I’ve been writing this tutorial, so I’ll handle some of that housekeeping here.

bicycle comics logo First, I really want the Bicycle Comics logo to appear in the copyright section, and I’d like it to link to the Website. So I’ll insert it now on line 17, like so:

 <p class="PoemStanzaCenter"><a href="http://www.bicycle-comics.com/"><img src="images/Bicycle-Logo-Red.gif" width="179" height="48" alt="Bicycle Comics Logo"></a></p>

When I do that, I realize that I’ve gotten all the way to this point with an error in my css rule for .PoemStanzaCenter:

p.PoemStanzaCenter, li.PoemStanzaCenter, div.PoemStanzaCenter {
 padding-left: 1em;
 text-align: left;
}

See the problem there? See the flaw with a selector named PoemStanzaCenter? Hey, it happens.

p.PoemStanzaCenter, li.PoemStanzaCenter, div.PoemStanzaCenter {
 padding-left: 1em;
 text-align: center;
}

There we go. I’ll save all of those changes into a .css file called “YBReview_Cranberry.css” and I’ll link to it once I’ve made more changes to the HTML file.

Okay, now we’ve got our table of contents. Next, we’ll (really for real) split the .html file into sections.

Need files to play along at home? All files for the Yellow Buick Review tutorials are free to download.

Leave a comment

Filed under Organization and Data

A Poetry E-book’s Quest for Validation

Before we split our E-book’s .html file into chapters, let’s run it past the W3C’s Validator.

Okay, okay, terrible joke. But the idea is sound, and important. This is an HTML5 document, styled using a now external CSS2 style sheet. (Someday, maybe, I’ll code the style sheet in CSS3, but don’t hold your breath.) It will become an E-book during Step 5, but for now, it’s a Web page. In fact, you can even go see it live on the Web:
Yellow Buick Review with External CSS
Yellow Buick Review “Apricot” .css file

Before we split this book into chapters, we should check to be sure that our code is correct. You find spelling errors in your documents with a a spell checker, and you find code errors in your E-books with a validator. To do that, you use the World Wide Web Consortium’s (W3C’s) Validation Service. There is a validator built into Adobe Dreamweaver, but all it does is ask the W3C’s Validation Service for an opinion. I’ll get exactly the same information using the Website.

I’ll do three things:

  1. Test my HTML code against the markup validator.
  2. Test my CSS code against the CSS validator.
  3. Fix any real errors that the validators point out. (Just as with spellcheckers, not all errors will be “real.”)

Continue reading

Leave a comment

Filed under Testing and Uploading

After Step 3 Comes…Step 3?

Why does Step 3 get four blog posts? Because the “Look and Feel” of your E-book matters.

workflow illustration
The Bicycle Comics workflow has six steps, but maybe “phases” would be a better word. It’s tough for me to know the right level of detail: too little information and this blog won’t help people format their poetry E-books, too much information and I’ll scare away beginners. Once you get the hang of it, you’ll have no trouble simplifying your HTML and your CSS, streamlining your CSS, and making your internal CSS external. Those three tasks rightfully belong in Step 3, but I understand how advanced HTML/CSS coders might want to pick up the pace.

The primary points of this blog are to document the Bicycle Comics workflow for our future projects, and to provide a gathering point on the Web for best practices and conversations around electronic production (eprdctn) of poetry E-books. I’d love any and all feedback on pacing.

Tomorrow, we’ll move for real into Step 4, and I’ll talk about splitting the HTML file into sections. Meanwhile, though, I’ve made an expanded illustration of Step 3, with appropriate attention given to the tasks we’ve walked through so far.

step 3 broken down into three smaller stepsWhat do you think? How has the pacing been on each step? Let me know in the comments or on Twitter at @ybreview.

Leave a comment

Filed under Look and Feel

Moving Out: Making Your Cascading Style Sheet External

Everything we’ve done so far has used an internal cascading style sheet (CSS). Now we’ll move it outside our .html files.

Remember: an .html file is a document full of code such as HTML, CSS, and JavaScript. A .css file is a page full of CSS code. An .html file can have HTML and CSS code inside it, but a .css file should have only CSS code. Bicycle Comics doesn’t use JavaScript in most of our E-books, so for these tutorials, we’ve been working with one big .html file that has both HTML and CSS inside it. With this tutorial, we’re moving 99% of our CSS into an external .css file .

External CSSThere are dozens, maybe hundreds, of tutorials that do a fine job explaining how you can move an internal cascading style sheet to an external .css file. I’ll give you just the basics, and then I’ll spend a little more time on the why, as pertains to E-book production.

In the previous post, we streamlined the CSS so that it is smaller and more elegant. Let’s pick up right there with the file “YBR_7_SimplerCSS.html .” (You can download all source code files for YBR for free.)

In short, we’re going to do three things:

  1. Remove the complete CSS info from our .html file with the “cut” command.
  2. “Paste” that CSS info into a separate, new document, which we’ll save as a .css file.
  3. Tell our .html file where the .css file is, so that our HTML can find our CSS whenever it needs it.

Continue reading

3 Comments

Filed under Code Samples, Look and Feel

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.

1 Comment

Filed under Testing and Uploading