EPUB 3 Fixed Layout: Who Supports What

Export a document you have created in Adobe InDesign CC 2014 using the new Fixed Layout format and you may be pleasantly surprised. In viewing the resulting ePub document the result may rank from zero to perfect depending on the reading device and the complexity of your document. The problem can be a combination of factors. This blog will look at a few.

EPUB 3.0 Fixed Layout

When EPUB 3.0 was first conceived its direction was to be highly aligned with HTML 5, CSS 3, SVG, and related web standards. In that regard, it can generally be said that if code is legal HTML 5 it is also legal EPUB 3.0. What EPUB 3.0 adds to the mix is specifications for how the content is packaged for display. But even there discrepancies can be found.

The problem is that fixed layout format kind of flies in the face of EPUB 3.0’s original design philosophy. The original specification says “content presentation should adapt to the user rather than the user having to adapt to a particular representation of content.” But for anything other than text-intensive books, allowing content to flow to conform to the whim of the reader just will not work. To give designers greater control over presentation, fixed layout was added to the EPUB specification. This continues to be a moving target, as demonstrated with the release of EPUB 3.0.1 as of June 26 of this year.

With Adobe InDesign CC 2014’s support for fixed layout export, there is good reason to believe that designers will be anxious to use this format for everything from children’s eBooks to high design catalogs and advertising pieces. With the promise of beautifully designed eBooks created “without code”, also comes a warning. We are strongly advised that it is preferable to create content using EPUB style sheets without absolute sizing or positioning. (Absolute positioning is what makes the fixed layout possible.) Additionally, authors are cautioned to be aware that Reading Systems on which their publications may be displayed may have widely varying capabilities with regards to rendering support for media type. One system, for example, may have a viewport that conforms exactly with the EPUB 3.0 specification, while another might not have a visual viewport at all. A Reading System is not necessarily a single dedicated program or device, but may exist as a distributed system.

On the other hand, it is hoped that with user demand for fixed layout, device readers will support most of the EPUB 3.0 features eventually. But conformance to EPUB 3.0 does not mean that all features will be supported, as many features in the EPUB 3.0 specification are optional. So again, you will need to know whether the reader(s) you are targeting will support the features you intend to use. A great resource in this regard can be found at www.epubtest.org/compare. Here you will find a huge table of EPUB 3.0 features. Place a checkmark next to the features you might want supported for your planned eBook. Scroll down to the bottom of the page and click the Compare button. The result is an extensive listing covering just about every device imaginable.

Once you know what will be supported in your targeted devices, you will need to see how your document can be structured to give the intended result when exported. That brings us to our pagination application of choice, Adobe InDesign CC 2014.

Adobe InDesign CC 2014

For the most part, what you create in InDesign CC 2014 will export as designed when using the Fixed Layout format. To date, I have found a few exceptions that need mentioning:

  1. Multiple Column Rules. EPUB 3.0 lists the multiple column feature of CSS3 as being required. For fixed layout export, Adobe InDesign CC 2014 supports all of the properties for multiple columns with the exception of column rules. If you want column rules, you have two options: you can physically draw the lines in, or, add support for the column-rule properties with your own custom CSS style sheet (see below).
  2. Drop Shadow Again, EPUB 3.0 supports drop shadow for text and boxes but the fixed layout export for Adobe InDesign CC 2014 does not.
  3. Horizontal and Vertical Scale for Text Forget using either of these for text designed for Fixed Layout export. Not only will text scaling be ignored, word spacing can get hosed.
  4. Text Anchor in Source Paragraph for Table of Contents Paragraph Styles The table of contents feature works but even with this option checked in the table of content style, the link does not work. (I wonder if this is a bug.)

Custom CSS Style Sheets

One way we have been able to add styling for EPUB 3.0 flowable layout is to add custom style sheets to the InDesign document export. For fixed layout this also works for some styling options. For example, unless you want to crack open the .epub package created and do some serious editing, you can forget drop shadows for text. For rectangles, special styling such as drop shadows and column ruling can easily be supported by adding a custom style sheet (.css) to the export.

To test, a sample document was created with a variety of styling options. Among these were text and box drop shadow effects.

Figure 1: Screen shot of original document

To support the text drop shadow, the text was assigned a paragraph style ShadowedText. For the rectangle an object style named Shadowed was assigned. An object style, RuledColumn, was also assigned to the bottom text frame. In the custom css file the following was added for the three styles:

p.ShadowedText {
text-shadow: 4px 4px 4px rgba(0,0,0,0.5);
color:#000000;
font-family:"Times New Roman", serif;
font-size:2em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1;
text-align:center;
text-decoration:none;
text-indent:0;
text-transform:none;
margin-bottom: 1em;
}
div.Shadowed {
box-shadow: 7px 7px 9px #000000;
border: 1px solid black;
}
div.RuledColumn {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 18px;
-moz-column-gap: 18px;
column-gap: 18px;
-webkit-column-rule: 1px solid #000000;
-moz-column-rule: 1px solid #000000;
column-rule: 1px solid #000000;
}

Even with the custom css style sheet added to the export, the result for Fixed Layout as viewed on the iPad includes the drop shadow for the rectangle but not for the text. The column rule for the bottom text frame is also ignored.

sample document exported using fixed layout

Figure 2: Document exported as fixed layout as viewed on the iPad

To discover the discrepancy, the .epub was cracked open to view the contents. The code was not nearly what would have been expected. Now, it is obvious why one does not need to use paragraph and character styles for a Fixed Layout export. The names for text styles are ignored. InDesign just gives the associated CSS styles an indexed style name of its own, similar to ParaOverride-1 followed by a span with a class similar to CharOverride-1. Consequently, the idea of applying styling to text using a custom CSS is pretty much out of the question for a fixed layout. Object styles, however, are preserved.

What About Reflowable EPUB Layout?

Just for sake of experimentation, the sample document was exported using EPUB 3.0 (reflowable) format. With the custom CSS file added, the resulting text has the drop shadow and the bottom text frame has multiple columns with a column rule. And, yes, the one entry on the table of content page does link to the page. We can take from this that the fault is the fixed layout export, not the iPad.

 

sample document exported as reflowable with custom css style sheet added

Figure 3: Document exported as EPUB (reflowable). Spread on left viewed in iBooks and page on right viewed on iPad.

In Conclusion

As you can see, fixed format is not all as effortless as you may want. Understanding what is supported where becomes an overriding criteria in determining the export option to use for documents intended for display on electronic devices.