ePubs are being created with increasingly sophisticated designs and ebook devices are becoming increasingly powerful. This creates a real tension: ePub creators want to be able to develop nuanced ebook designs using CSS, the makers of ePub reading systems face an expanding range of screen sizes (from postage stamp to poster size), and some readers have become accustomed to being able to control every aspect of the setup of their reading environment. One of the great aspects of the design of the ePub specification is that it uses many of the same standards as the web. This means that publishers can turn to a web designer for CSS help rather than having to find someone more specialized and rare.
As folks who need to listen to the desires of ebook readers, help publishers understand how to get the best from ePub, and implement increasingly sophisticated ePub readers, we’ve gotten used to riding a fine line between enabling thoughtful design and ensuring a pleasant reading experience on a wide range of devices. Here are some pragmatic perspectives from our experience building reading systems that can help those coming from a web CSS background understand some of the tradeoffs in the ebook design world.
I’ll start with a simple example of the impact of CSS margin and width on an iPhone-sized screen:
This may look like a minor change, but the line lengths were reduced from 34 characters down to 27. Either one of those line lengths is already less than the typical “sweet-spot” from printed book design, so losing nearly 20% is actually quite significant. The real surprise from the margin example above is that it comes from Feedbook‘s tremendously reasonable CSS.
The problem (from the perspective of a reading system) is this: readers need top-level margins to make the text digestible, but we can never unambiguously tell if the ebook designer has already included top-level margins in the design. Basic, top-level margins should be established by every reading system based on the device being used and designers should include margins in their CSS only when they are focused on a specific type of content like a blockquote or poem. Unfortunately, some early ePub reading systems failed to establish even basic margins for readability, so many ePubs are designed to compensate for that flaw. [If you’d like a future post explaining the history of how we got to this position, please let us know in the comments.]
Now we’re in a chicken-and-egg fight: if ebook designers would include more complex design elements (and eliminate unnecessary margins), the makers of ebook reading system would be more motivated to fix their margin bugs and add more CSS support. Today, the maker’s of ebook reading systems might honestly believe that these features aren’t requested because the designers are being understandably pragmatic about current capabilities in the wild. We’d like to encourage more deliberate ebook design, but also inform designers about some of the basic design elements that might be dropped on the floor by the reading system.
What do we do in Ibis Reader? Because of limitations in screen size, Ibis Reader tries to override the following CSS properties when used on an iPhone, iPod Touch, Droid, or Nexus One (as an installed app) at the chapter level:
- Left and right
paddingandmargin - We need to be able to limit the length of lines.
width- We need to be able to ensure that the user interface isn’t ever wider than the screen, so that scrolling isn’t required (except for code or other verbatim blocks).
font-size- Readers have a wide range of ability and sightedness, so we give them control of the base font size (but relative sizing still works as expected).
font-family- This one is a bummer. The current set of mobile devices don’t all support some of the newest techniques for including other fonts, so we’re limited to a tiny number of font families at this time.
Happily, the web version of Ibis Reader does not have these restrictions, especially when used on a big screen, so the design from the ePub is usually more faithfully preserved. However, we do still discourage ebook designers from using the following CSS properties:
- Left/right
paddingandmargins (only when applied too broadly) width,mid-width, andmax-width(percentage-based more permissible)background-image(and friends), which happen to be excluded from the OPS CSS subset- Inline with the OPS spec, the use
of the CSS position property values to achieve absolute positioning (i.e. absolute and fixed) is strongly discouraged.
That said, none of the above are hard and fast rules, and there may be occasions where any one of the above is entirely justified by the confident.
PS: A secret for ebook designers: While there are a lot of techniques the creator of a reading system can use to alter the CSS from an ePub, the most standards-compliant way you can make your voice heard is to use the !important declaration. Like any tool with great power, !important should be used sparingly and only in situations where you are confident that the clarity of the text will be compromised if a property is not honored.