From Print to ePUB: Exporting Sidebars
By Colleen Cunningham, Senior Book Designer, Adams Media
Exporting Sidebars from InDesign to ePUB
- InDesign CS4 to export
- Springy Archiver to open the ePUB file
- Dreamweaver to edit the CSS
- Adobe Digital Editions to preview
One of the requirements of producing an ePUB file from InDesign is that all content must be anchored and threaded. Put another way, any design elements, art, or sidebars you want to export from InDesign to ePUB must be anchored in the text, and all of the text must be threaded in the correct order. A simple anchor requires nothing more than hitting return, pasting an element to the return, and adding space above or below the return. A simple text thread will also work.
Here’s an example of sidebars that are to the side of the main text flow, but because all of the text boxes are threaded together, the export to ePUB will still work fine:
However, not all layout grids are so straightforward.
Recently, a grid in InDesign presented a challenge for me when I thought about the export to ePUB. In this particular layout, the sidebars (1) floated outside the text margins, and therefore (2) required the “text wrap” palette. Could this layout be optimized for ePUB export?
Here’s the layout:
And here’s the “before” – the ePUB result when the text in the sidebars were separate from the text flow:
Of course, since the text was not threaded, nor were the sidebars anchored, the sidebar text was pushed to the beginning and end of the ePUB file.
Here’s the after – the ePUB result when the sidebar boxes are anchored into the flow of the text:
The issues are that (1) the text wrap will not take effect before an anchor; therefore, the anchoring position must be carefully considered and (2) the text wrap must be applied to the anchoring box, not the sidebar element itself. Using “object styles” can apply the text wrap quickly to the anchoring box.
Another aspect of this issue is that multiple sidebars in an ePUB file are not ideal. In a print layout, sidebars are called out in order to give design interest to the layout and highlight interesting information. Most of the time, the design of sidebars makes them look separate from the text and the text flow makes it possible for the reader to skip them.
In the ePUB file, the sidebars break up the text flow. The design tools available in print are stripped away (reversed text, sidebar tints, text wrap) and we are left with sidebars that look like part of the running text, resulting in running text / sidebar / running text / sidebar. It makes for a jumpy reading experience.
In this particular case, the content cannot be rewritten due to deadline restrictions; therefore, this is the way the content will be presented. But it brings up interesting questions regarding digital production: Should content intended for print be re-written for ePUB reading? Are there better ways to set off sidebar content in an ePUB file besides text size, indents, and white space?
One option suggested by Lindsey Martin, via the #ePrdctn group on Twitter, was a vertical rule to set off the sidebars.
Here’s the code:
I accessed the ePUB file in Springy, opened the “template.css” file in Dreamweaver, and pasted this code into “div.sb-box” and “div.bt-box” — these styles were built upon the export from Indesign to ePUB.
And here’s the ePUB result:
It worked! The sidebars are now easier to distinguish from the running text around it.
The next step in the QC process would be to view this file on multiple eReaders.
This case study demonstrates a layout that works for both print and ePUB export. The results are not ideal.
I, personally, would choose to ask editorial to rework the content so the sidebars would not interrupt the text flow so much. But since this is not an option in this case, the resulting ePUB is regarded as satisfactory. Sales numbers will determine if the ePUB version of this book “works” for the consumer as opposed to the PDF ebook version.
Welcome to Horneytown, North Carolina, Population: 15 by Quentin Parker, published by Adams Media, a division of F+W Media, Inc.
Aliens in America by William J. Birnes, published by Adams Media, a division of F+W Media, Inc.
FROM PRINT TO ePUB
The goal of this column is to explore the various challenges we at Adams Media have faced in everyday situations in transforming our InDesign print workflow to include an ePUB export process, and share the results and any best practices I uncover. The workflow for digital production is being created as we go along, and no one has the perfect, one-size-fits-all solution or all of the answers. Groups like #ePrdctn, hosted by Lindsey Martin (@crych) on Twitter, are working out digital production issues as we go along, and that group is the inspiration behind this column. Digital Book World also hosts the #ePrdctn group on LinkedIn.
Colleen Cunningham is the Senior Book Designer for Adams Media, a division of F+W Media.