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

1 Comment

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 is licensed under a Creative Commons Attribution 4.0 International License.

1 Comment

Filed under Testing and Uploading

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!

Updated July 31, 2014: The Yellow Buick Review Volume I is available now! I’d still love a few screenshots of how it’s working on your device!

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


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


Filed under Code Samples, Look and Feel