Advanced e-book Design: 3 CSS Tips & Tricks for Reflowable e-books

e-book Design Tips and Tricks

Level: Advanced

Prerequisite: knowledge of CSS and HTML eBook formatting

If you’re an avid e-book reader (or e-book designer), you might have noticed that some e-books look much better than others. Even though we do not always have control over the appearance of text in the various e-book readers on the market, there are a few CSS tricks that can make eBooks look nicer and easier to read.

Here are 3 tips to make e-books beautiful:

1. Disable hyphens on headers and titles

Hyphens are difficult to avoid, especially since every e-reader interprets text differently. While it’s wise to keep hyphenation on body text, the hyphenation of titles and headers can look pretty awkward.

What can you do to force-disable hyphenation on titles and headers?

a. Assign a class or ID to the headers/titles in your HTML editor of choice. (We use Sigil.)

b. Create a style for this class or ID in the CSS stylesheet.

c. Add this CSS:

element {
    adobe-hyphenate: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -epub-hyphens: none;
    hyphens: none;
}

This works for ePub2, EPUB3, and Kindle. After adding this, check your e-book on iBooks and the Kindle App. Are the headers and titles previewing correctly without hyphenation? (Also, always make sure to validate your epub after adding any new code.)

Code credit: https://friendsofepub.github.io/eBookTricks/

2. Remove spaces from the ellipses

Many editors prefer formatting the ellipsis with spaces. As in: ( . . . ). Space dot space dot space dot space. This looks nice on the printed page, but in the e-book it can wreak havoc. The last thing you want to have is the ellipsis split over two lines. Since the e-book reader does not recognize this as a symbol, it will split the dots apart as if it were individual characters (which, with spaces, they are.)

What are the solutions?

a. Remove the spaces! This is the easiest way to fix the issue. If you use Sigil, you can auto-search all ( . . . ) and replace them with (…). It might be best to go through these one by one, as an auto replace-all can do some damage if you’re not careful.

b. Use the HTML tag for an ellipsis: …  (You can likewise use auto-replace with this one.)

c. If you are using MS Word to create your e-book, the ellipsis characters will (usually) transfer automatically as Word changes all ( . . . ) into an ellipsis character.

d. Note: wrapping the dots in a no-break HTML tag (<nobr></nobr>) will NOT work. An epub with these tags will not pass validation.

3. Keep headers with “next”

Reflowable e-books are great at…flowing! Depending on your e-reader screen size, font size, etc., the text can flow in a lot of different ways. Oftentimes, the body text will flow away from the heading or subheading above it. This is ok, but avoiding orphan headings is better.

How do you keep headings and subheadings with their corresponding text?

After setting up the correspond HTML classes, add this CSS to define your heading elements:

element {
page-break-after: avoid;
}

The e-reader will avoid creating a page break after the corresponding heading, keeping it with a few lines of the next text.

Happy e-book-ing!

Image Credit: The image used in this blog post depicts the e-book version of A Children’s House by Alanna F. Bree. To see more of our design work on this book, visit the Portfolio page. Book text is copyright by Alanna F. Bree. To read the full book, find it on Amazon here. Spoiler alert: it’s a wonderful, heartfelt story.