Monday, March 8, 2010

Quotes or inches?

Most word processing and layout programs included a feature some years ago called “smart quotes.” This feature automatically turns straight inch-marks (" ") on your computer keyboard to typographer's quotation marks (“ ”). It's so common now, most of us never think about it. But when you are setting up your eBook or Web page, you may not be using your standard word processor. Most text editors and code editors still use the inch-mark because it is a vital part of XML coding. So, you need to know the correct code to insert in your XML or XHTML document to get the right punctuation.

The first thing to know is what character-set encoding to use. When I started in eBooks about 10 years ago it was often a pain to get special characters, but about that time an encoding called “UTF-8” became common. This extended character set will enable you to retain the special characters from your word processing file and to add special characters with a simple code. The following is a code sample for the head of the XHTML in your eBook.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

Notice that in the code sample we use the inch-mark instead of typographer’s quote.

Next, you need the right characters in your eBook. If you use the utf-8 charaset, the quotation marks, em-dashes, apostrophes, and other special characters you used in your text file should render correctly. If you find that they are not, you need to use the actual entity from the XHTML entity list. For most characters, there is a pseudo-English name for the entity. For all characters, there is a numeric code that you can use to get the right character. Below is a chart of the most common entities in novel publishing.

&ldquo;&#8220;left double quotation mark
&lsquo;&#8216;left single quotation mark
&rdquo;&#8221;right double quotation mark
&rsquo;&#8217;right single quotation mark
&emsp;&#8195;em space
&ensp;&#8194;en space
&nbsp; &#160; no-break space = non-breaking space
&mdash;&#8212;em dash
&ndash;&#8211;en dash
&copy;©&#169;©copyright sign
&hellip;&#8230;horizontal ellipsis = three dot leader

If you'd like a more complete explanation of entities and how to use them, Elizabeth Castro’s Character Entity References in HTML 4 and XHTML 1.0 site is the best available.

Monday, March 1, 2010

Glaring errors

I’ve looked at a lot of eBooks over the past ten years and find that there are a very few glaring errors that are common (not in every book, or from every publisher) but that could be avoided on most displays with a couple of small adjustments. If you are currently designing or creating an eBook, here are the top glaring errors and how to avoid them.
  1. No margins. Nothing makes readers less comfortable reading a book than having the type slammed straight up against the edge of the screen. In some few instances, this is necessary because of the type of content or the size of the screen, but readers will find your book much easier to read if there is a margin on the sides and the top and bottom. How do you get it? In your CSS, set margins on “@page.” Most of the readers are using this to get consistent margins on every page. Use this code in your CSS: @page {margin: 5%;}. This will allot 5% of the width and height of your reader to white space between each edge of the screen and the type.

  2. Double-spaced paragraphs. Most Web browsers (on which eReaders have been based) skip space between paragraphs and have no indents on the first line of text in a paragraph. While that works well for largely unformatted scrolling text on large screens, it is not common in actual books. If you want a natural book-reading experience, you want paragraphs to follow on the next line and be indented slightly on the first line. I’ve seen a lot of instances where designers add the paragraph indent, but don’t remove the space between paragraphs. To correct this, use the following CSS in your ePub package: p {margin:0; text-indent:1.5em;}. That makes a pretty nice indent. Of course you can adjust the width of the indent as you see fit.

  3. Font-size and line-height. Standard defaults on most readers use 12-point type and 1.2-1.3 ems (%) for line-height (leading if you are a traditional designer). The result is that on some readers the type looks huge and crowded. Some readers will override whatever you set with their own defaults, but more commonly, this is considered the realm of the book designer. Make the type a little smaller and the line-height a little bigger. This will relax your reader’s eyes a bit and give them more enjoyment of your great novel. Use the “*” pseudo-element in CSS to accomplish this. * {font-size:0.83em; line-height:1.5em;}. Again, you can experiment with these settings to find your own favorites.

You’ll notice that I’ve used the measurement unit “em” a lot. This is the most flexible unit in CSS. It bases measurements on the default font-size. It can be a little tricky, though. When we set the default font-size at “*,” the 0.83em (the same as saying 83% in this instance) is based on the device default font-size. You could also specify a font-size in familiar units like “10pt.” Line-height and indents in ems are always based on the font-size of the element. So in the examples above, a normal paragraph would have 10-point type, 15 points of leading (1.5em) and a first line indent of 15 points (1.5em).

By following these three simple adjustments in your ePub CSS, you’ll change your books from looking amateurish to professional. More advanced tips will come in the near future!