Export to ePub

Although ePub export from InDesign CC provides much more in the way of support for content display on electronic devices, it still does not support everything. For this reason, I believe it is important for designers to have some idea of HTML and CSS. This way, you can have what InDesign provides and customize it too.

In previous blogs I talked about how you can write your own CSS files to extend the functionality of what InDesign provides. This way you can:

  • Provide styling options for page items not currently supported in InDesign
  • Provide more efficient CSS code

Now that you are somewhat comfortable with CSS files for HTML export, you can expand that knowledge to working with ePub export.

First there are a few things you need to know about ePub export using the CC version of InDesign:

When you export for ePub, although it does not show up in the CSS generated, support for shadow on image boxes is supported. Of course, that is if the image container is styled with an object style that has the Drop Shadow checked in the Effects panel for Object Style Options. In fact, all of the Effects for Object Styles are supported. This is actually done by the export mechanism modifying your image files at point of export.

In fact, Effects (selected in Object Style Options) can be applied to any page item as long as it is assigned an object style. For page items (rectangles, circles, and polygons), the ePub export mechanism creates a .png file for each of these items. I haven’t tried every effect, but what I have tried has been pretty amazing.

This even works for applying special effects to text. For text effects, the text must be isolated in its own container with the container having the object style assigned. If you want the shadowed text to be part of a text flow, then you will need to handle the styling for the paragraph in your own CSS.

Even though the support for object styles has taken a giant leap forward with the CC version of InDesign, there still are some big gaps left to fill. Additionally, at best, things can go wrong. For that reason you need to know how to examine the ePub file created by InDesign’s export.

The problem with EPUB is that the export ends up bundled in a single zip file called a package. This package is technically a zip archive. Even if you change the extension of the package to .zip, few applications that unzip archives recognize the format. On Windows, WinZip 7 opens and closes the ePub package for you (but change the extension to .zip first). On Macintosh there are scripts that do the work for you. For the scripts, do a search on the web for ePub UnZip 1.0 and ePub Zip 1.0.3. Better, you can go to code.google.com/p/epub-applescripts/downloads/list and get the latest along with ePubCheck, a script that will do a pretty good job of checking your ePub for validation. Once these apps are installed on your computer (they are just AppleScript applications), you drag your .epub file onto the file image for ePub UnZip to unzip the file.

When you unzip your ePub package, you will end up with a folder having the same name as your project. Inside this folder is a folder named OEBPS. This folder has all of the contents for your project: a css folder, an image folder with your formatted images, a toc.ncx file needed for navigation, and an xhtml file for each of your pages. Yes, Adobe is still creating xhtml files, apparently because HTML5 is not “blessed” yet.

Before you rip open your ePub, I suggest that you test your ePub on a variety of devices just to see what is supported where. You may discover that things are not as bad as you first thought. But then they could be.

View on iPad

For Mac users, if you don’t have an iPad, borrow one. It’s easy to get your ePub up on an iPad for testing. For the more recent versions of iTunes:

  1. Launch iTunes
  2. Connect the iPad to your computer using the USB connector.
  3. Turn on the iPad and open the iBooks application on the iPad.
  4. In iTunes, switch to the Books option for the Library (drop down on left side of Options Bar).
  5. Under the File menu for iTunes, select Add to Library… and navigate to your .epub file.
  6. When the cover image for your .epub appears in the library click on the image and drag to the right of iTunes’ window. As you approach the right side, a panel will open with the label of your connected iPad showing at the top.
  7. Continue to drag the book’s thumbnail onto the label. Within seconds your book should appear in the iBooks’ library on your iPad.
  8. Open the book and view in both vertical and horizontal orientations.

Surprised? iPad even honors the cap small-cap settings for text.

View on Kindle

For the versions of Kindle Fire, you will need to acquire the most recent version of Kindle Previewer from Amazon. (www.Amazon.com/KindleFormat). Once you have this application installed:

  1. Launch Kindle Previewer
  2. From Previewer’s File menu, select Open and navigate to your ePub file.
  3. If there are no problems, the file will be converted to Amazon’s mobi format.
  4. You can view the .mobi file using Previewer, or you can use Amazon’s Kindle app to view the ePub.
  5. Better yet, plug a Kindle device into your computer and move the file onto its hard drive. It will appear in your book library list

The moral of the story here is, test your ePub on as many devices as you can get your hands on. Don’t expect everything to be perfect. Some browsers (readers) can interpret more than others. As long as your ePub looks “good” on all the devices you think your readers will be using, you are good to go.

Fixing Problems

If, on the other hand, something in your ePub did not work out right, the problem most likely can be corrected in the .css file, or in a custom CSS file you provide the export. Open the appropriate file in the css folder and be glad you know enough about CSS that you understand what’s going on. It may be fairly easy to find the culprit that caused your images to not center, or your headline to look a little strange. If you added your own custom .css file to InDesign’s export, make sure you do not redefine something that InDesign has taken control of in its generated .css file. Definiing the same attribute in more than one .css file can create a conflict. Even if both files (your .css and InDesign’s) define the attribute correctly, having the same attribute defined in more than one file can cause the browser to fail. If the solution to the problem is not obvious, you may need to also look at the XHTML files to see how the item(s) in question are tagged.

If you need a quick check to see if your changes will fix the problem, grab the XHTML file for the appropriate page and drag it to your favorite up-to-date browser. If you added a custom style sheet to fix the problem, a reference to the file needs to be part of the XHTML file. It may be easier to just export the ePub file again, and add the custom .css file at the point of export and try again. If you do like your changes and don’t want to re-export, you can zip the project back up using ePub zip on Macintosh or WinZip on the PC.

The only attributes for your image files that make it into the CSS as part of the InDesign’s generated class, are height and width. The margin and spacing settings set in the Export Options section of the Object Style Object Style Options dialog are defined in the .css file under the same class identifier as the style name. You can add other attributes to the style sheet, but remember that InDesign is going to make an image of everything that has Effects added in the Object Style declaration.

On Your Own

Take advantage of the expanded capabilities for ePub support provided by object styles. Experiment. You will be surprised at some of the things you can do. And don’t take Adobe Digital Edition’s word as being final; view your ePub in as many devices as you can.