From Print to ePUB: Exporting Sidebars

Print Friendly

Colleeen CunninghamBy Colleen Cunningham, Senior Book Designer, Adams Media

CASE STUDY

Exporting Sidebars from InDesign to ePUB

ePUB TOOLKIT

LAYOUT CHALLENGE

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:

Welcome to Horneytown, North Carolina, Population: 15 by Quentin Parker

Welcome to Horneytown, North Carolina, Population: 15 by Quentin Parker

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:

Aliens in America by William J. Birnes

And here’s the “before” – the ePUB result when the text in the sidebars were separate from the text flow:

Aliens in America by William J. Birnes

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.

SOLUTION

Here’s the after – the ePUB result when the sidebar boxes are anchored into the flow of the text:

Aliens in America by William J. Birnes

Aliens in America by William J. Birnes

It worked!

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.

QUESTIONS

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:

border-color: black;

border-style: solid;

border-top-width: 0px;

border-bottom-width: 0px;

border-left-width: 3px;

border-right-width: 0px;

padding: 0.75em;

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:

Aliens in America by William J. Birnes

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.

RESULTS

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.

SAMPLE CREDITS

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.

Colleen Cunningham

About Colleen Cunningham

Colleen Cunningham is an eBook Developer for F+W Media.

Related Posts:

4 thoughts on “From Print to ePUB: Exporting Sidebars

  1. Since the sidebars in the second example have titles, one solution might be to put the titles under the relevant subhead and link to the text that is exported to the end of the epub file (with a link back)–like more-elaborate footnotes. Then the main text is readable and readers whose curiosity is piqued can quickly check out the side bar. Hardly automatic, though!

    • I like your thinking! As you said, Amy, building all those cross references is not an automated process, but what an elegant idea. It gives the reader the choice of learning more or continuing with the running text. Giving readers choices in how they digest the content is a big part of the ePub experience.

  2. I suspect that getting an ePub document to appear correctly in Digital Editions may be only half the battle. In many situations, publishers will need to also get it to appear correctly in iBooks on an iPad, as well as B&N’s Nook. If Liz Castro is right, that may prove a real headache. She’s been working on a soon to be released book, EPUB Straight to the Point, about creating ePub books from various applications, including Word and InDesign. Demonstrating that she’ll ‘eat her own cat food,’ she’s been creating an ePub version of the book and blogging the resulting headaches with both iBooks and InDesign:

    You can find some of her postings here:

    “iBooks is Buggy” at: http://www.pigsgourdsandwikis.com/2010/06/ibooks-is-buggy.html

    “Beating iBooks Bugs” at: http://www.pigsgourdsandwikis.com/2010/06/beating-ibooks-bugs.html

    and most recently, a problem with ampersands inside InDesign hyperlinks:

    http://www.pigsgourdsandwikis.com/2010/07/hyperlink-causes-indesign-export-to.html

    My own suspicion is that ePub is at the dismal HTML 1.0 stage of usefulness and that an equivalent of the incompatible browser wars of the 1990s is developing between various ebook readers. We’re in for what the Chinese refer to as “interesting times.”

    • Exactly, Mike. ADE is only the first step in the QC process for us. That’s why I said “The next step in the QC process would be to view this file on multiple eReaders.” We have several in-house that we test some of our more complex ePubs in.

      Liz Castro is great! I highly recommend her book too. She has ninja-level troubleshooting skills!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>