Visual Styles
Visual styling in EPUB 3 books should be approached differently than styling for a webpage residing on the Internet. Generally, styling for an EPUB 3 publication should:
- Avoid fixed position layouts - displays on reader systems vary greatly, and fixed position content may appear offscreen.
- Make sparing use of colours - reader systems have default colours for content, and adding or overriding these colours should be done cautiously. For example, while black text on a blue background may look fine on a colour LCD equipped reader system, the same content on an e-ink device may render as an indistinguishable, dark mass.
- Make good use of white space including line spacing, margins, and indentation, to helps improve legibility of content.
- Use clear logical layouts with sparing use of asides and sidebars to make it clear what is the primary and secondary content. Using a single column layout also ensures that the content appears consistent across platforms.
Using a gentle approach to visual styling ensures that EPUB 3 content is inclusive to a wide variety of reader platforms and users. Simple styling also makes it easier for users to make their own customizations to suit their own preferences and environments.
Although we strive to be inclusive, some types of content have their challenges. Books that rely heavily on illustrations, graphics, or imagery (like children’s books) cannot be reflowed, reformatted, or customized easily; in the next section we will discuss some solutions to make your content more usable and accessible.
Further reading
- “… and along with new EPUB 3: New CSS” by Nellie McKesson, O’Reilly
- “Fixed-Layout Properties” by IDPF
- “Create rich-layout publications in EPUB 3 with HTML5, CSS3, and MathML” by Liza Daly, IBM Developer Works
- “EPUB Stylesheets” by IDPF