Tag Archives: html

Thoughts on Books in Browsers V

What lessons can YBR take from the Books in Browsers talks?

Books in Browsers is a two-day, annual conference exploring trends in digital publishing, E-books, and the role of “books” in a world where content is increasingly digitized and re-mixed (1). I went to Books in Browsers 2014 with three questions:

  1. How are people formatting E-books these days?
  2. Do the formatting requirements of publishers and platforms affect the way writers write?
  3. Does innovation matter when Amazon controls 70% of the E-book market?

(TL;DR)

Everyone comes to conferences with his or her own agenda, and mine, of course, was poetry. Not everyone shared my central organizing thought:

(crickets chirping)

Oh, well.

Here are my notes on the talks, more for my own future reference than for anything else. Just about all of the lectures are available on YouTube, thanks to Publishing Perspectives, and those are presented, naturally, without the tint of my own personal curiosities and viewpoints. Continue reading

2 Comments

Filed under Publishing Industry

Let’s Split Up but Stay Friends

Just a book should (must?) have multiple pages, an E-book should have multiple .html files.

Having one big .html file for the interior of our E-book has its advantages. After all, what’s the expression we use when we talk about keeping a project organized? “Let’s make sure we’re all on the same page.” But we’re (almost) done with the HTML and CSS portions of our book, and there are good reasons to split our .html file into smaller .html files:

splitting .html file into smaller files

  • Compatibility with older E-readers. Some of the early E-books couldn’t load a file larger than 128K or 256K. Splitting our book into segments helps us keep early-adopters in the game.
  • Easier navigation on some devices. Some devices, again, often older ones, allow the reader to “blip” ahead by section. If your anthology is all one big section, then the only “blips” allowed will be the very beginning and end of the book.
  • Guaranteed page breaks. Sometimes, you just need to be certain that a certain line will appear at the top of a new page. Start with a fresh .html file and know that it will have a fresh page all to itself.
  • Alternate cascading style sheets. YBR uses one CSS, but it might be that part of your book (a prose section, perhaps) will refer to a different .css file. Put that part on its own .html file and you’re good to go!
  • Reuse of “evergreen” sections. Okay, look, the back 10 pages of every Bicycle Comics poetry E-book thus far has been 8 pages of advertising for our other E-books. We don’t want to re-write or re-code that section; we just want to pop it in.

To be clear, we are making one E-book poetry anthology; an E-book can contain multiple .html and .css files. For the Tandem anthologies, we made each month its own chapter, so each month got its own .html file, as did the frontmatter and backmatter. But we combined those .html files into one EPUB file for each of our E-books. Here are the steps: Continue reading

Leave a comment

Filed under Code Samples, Organization and Data

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.

Continue reading

2 Comments

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

2 Comments

Filed under Testing and Uploading

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

4 Comments

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

5 Comments

Filed under Code Samples, Look and Feel