Tech Blog

Clean CSS for a Digital Book

Lately we've been running into a lot of books that cause problems when used with the reading engine of the Sifriapp app, as well as with the Getbooks and Mendele e-reader apps.

The symptom is that users can't manage to change the display settings for a particular book. Usually this involves changing the font size, the font type, the background and text colors, the line spacing, and the margins. Of course, the average user isn't aware of the EPUB3 standard, of HTML structure, or of CSS - so as far as they're concerned, the app failed to do its job properly. But those with knowledge of book production, who are aware of the rules for building an XHTML document with valid CSS, understand that the problem began and ended at the moment the book was created.

Every chapter is built as a separate XHTML page with its own settings and its own internal structure. According to HTML rules, there is a rule of inheritance that begins at the BODY and trickles further and further down into the inner branches of the structure. As the page settings trickle down, they can be overridden at lower levels. For example: the page is defined with a serif font, but a particular paragraph will be set in a different font. Or the page has no background color, but a few paragraphs are given a gray background. The basic rule is that the deeper we go inward, the "stronger" the settings become, overriding the settings that preceded them.

When the rendering engine of a digital book - or, for that matter, an XHTML page representing a chapter in the book - tries to change the settings for the current book/chapter, it simply overrides the top-level settings of that chapter. This will also have the effect of changing sizes, page divisions, and so on. Therefore, an internal setting that the book's creator defined will not be overridden. The engine assumes that the structure is valid and clean - that is, no background color, font, font size, spacing, etc., was defined. Those are supposed to be left to the user's settings. So if a book was defined with every design setting, and those were assigned to every sub-paragraph in the book, changing the design settings for the chapter itself won't change the designer's settings for the sub-paragraphs.

Therefore, it's recommended - after creating a new book - to run a sanity check. Load the book in a standards-compliant reader. Preferably in several. And make these design changes:

  1. Font type
  2. Font size
  3. Line spacing
  4. Margins
  5. Background color and text color (day/night mode, etc.)

The proper behavior of these changes within the chapter (while preserving special internal settings for sub-paragraphs) will attest to a correct structure and to valid CSS that respects design inheritance within the chapter.

Illustration of cleaning up CSS code
Need a hand with your ePub?

We produce professional ePub3 books

From reflowable to Fixed-Layout, KIDS and audiobooks - our Production Studio can help.