1. Technology

Styling Paragraphs in Kindle Ebooks

How to Work with Paragraphs in Mobi

By

When you're building your HTML for your ebook, you need to use the P element to create your paragraphs. This is not surprising, but there are some details about publishing for Kindle that you may not be aware of. For instance, on a web page, when you add a paragraph with the P element, the only formatting that most browsers add is a margin at the top and bottom to separate it from other paragraphs. The Kindle publishing tool applies a few formatting styles to your paragraphs that are not applied in web browsers:

  • justification
    The text in your paragraphs will be automatically right and left justified to fit the Kindle screen.
  • indenting
    The first line of every paragraph will be automatically indented about 1/4 inch (0.6cm).
  • line height or leading
    The distance between the lines of text will be about 120% of the font size.

You can override both of the first two styles using CSS, but if you write your paragraphs with just the P element, they will be added when you publish on Amazon.

How to Adjust the Formatting

The first thing you should consider when converting your HTML for use with Kindle is that Amazon frowns on almost any changes to the default styles on the body text. To quote the Publishing Guidelines from Amazon:

“The body text in a reflowable Kindle book must be all defaults. Amazon encourages content creators to use creative styles for headings, special paragraphs, footnotes, tables of contents, etc., but not for body text. The reason for this is that any styling on body text in the HTML will override the user’s preferred default reading settings. Users report such behavior as a poor reading experience.”

Specific styles you should avoid include:

  • Do not change the font size of the body text. Kindle users (and people using Kindle apps) have the opportunity to change the font size to one that suits their reading. If you change the font size, you can make it difficult for people to read your book.
  • Do not write your entire book in bold, italics, underline, or all capital letters. You can make small sections of your book use these styles, but pages and pages of them can be unreadable.
  • Do not change the font color for the entire book, especially to white. Remember that not all Kindle devices are in color, and so multi-colored fonts can be hard to read at best and illegible at worst. White is especially bad as it won't show up at all on white backgrounds and is extremely difficult to read on gray backgrounds.
  • Do not use a black background color for body text. This can make your book unreadable.

But even though there are some things you should avoid, you can do text formatting to make your book look the way you like. The best way to adjust the formatting for Kindle books is to use CSS.

You write your CSS for your Kindle books just like you would for a standard HTML page. I like to keep my styles in a STYLE element in the HEAD of the entire book document, but you can also link a separate style sheet.

To maintain the widest compatibility across Kindle platforms (e-Ink, Kindle applications, and Kindle Fire), you should only change the font on your paragraphs and headings, and then only the font-size, font-style, and font-family. You can use other CSS styles, but be sure to test them on as many Kindle devices as possible.

Avoid Fixed Values for Sizes

As I mentioned above, setting specific font sizes can make your book unreadable for some people, and you will find that many of the negative book reviews posted to Amazon about ebooks refer to the formatting more than the content. One way you can help your books look better is to use relative sizes rather than absolute.

A relative size is one that is based on something within the device reading it or the Kindle itself. For example, ems are determined based on the base font size. So if the font size your book is displayed at is 14 pixels high, then 1 em would be 14 pixels. If the reader then increased the size to 18 pixels, the em would adjust as well to be 18 pixels. Another relative size is percent (%).

A good rule of thumb is to define all text related sizes (font-size for headings) in ems and all box related sizes (width, height, margin, padding, text-indent, and line-height) in percentages. This will ensure that the boxes don't get so big that they are unreadable in larger font sizes when the readers adjust the font size.

Remember that line-height is special. Kindle readers will not reduce the line-height to smaller than 1.2 or 120% of the text font-size in order to ensure pagination.

Some Common Kindle Styles

Here are a few recipes for common styles for your Kindle devices:

  • Remove the automatic indenting

    p {
      text-indent: 0px;
    }

  • Larger than standard first-line indents

    p {
      text-indent: 10%;
    }

  • Create double-spaced text

    p {
      line-height: 200%;
    }

  • Create ragged right (not justified) text

    Amazon doesn't recommend this, but you can change the default presentation:

    p {
      text-align: left;
    }

  • Simple drop cap at the beginning of a paragraph

    span.dropcap {
      font-size: 3em;
      font-weight: bold;
    }
    <p>
    <span class="dropcap">T</span>he …

©2014 About.com. All rights reserved.