ePub and Tagged File Formats

Export Tagging

HTML is at the heart of a great many electronic document formats, especially on the web. Those letters stand for HyperText Markup Language. Essentially, we “mark up” content to tell each chunk what it is—header, subheader, list, regular paragraph, etc. Software, like web browsers, display each chunk based on what it is. A top-level header, marked up with the H1 tag, defaults to bold and quite large, whereas an item in a list would be displayed with a bullet and would be indented. Screen reader software for the visually impaired benefits from the hierarchies and the meaning given by markup tags.

Each style we make (paragraph, character, or object) can have a tag associated with it via Export Tagging. I chose the H1 tag for the chapter header paragraph style in this book. The topic header style gets tagged as H2. For spans of text to which a character style is applied, a tag called “span” can be applied (example: plain text to fancy, then not). To differentiate spans or H2s that should look different than others, each can have its own “class” attribute.

By default, the class will be the same as the style’s name. For the HTML-curious, the tags for these two examples will look like this:

<h2 class=”topicTitle”>ePub & Tagged File Formats</h2>

plain text to <span class=”boldItalic”>fancy</span>, then not.

In the Export Tagging pane of each style options dialog box, you can choose a tag and give a name for the class. The Export Details window shows both, as well as the CSS (Cascading Style Sheet) that will be written by InDesign to style each as close to the print version as possible. Those two languages, HTML and CSS, work together; the first is the “what,” and the second is how to decorate it. In each paragraph style for which I choose an ePub and HTML Tag, I also add a PDF Tag, so if I export a PDF, it will be on the way to being more disabled-accessible.

Those who are familiar with CSS find themselves frustrated that they cannot customize the CSS they see in the Export Details window. However, during export as HTML or ePub, we can add a CSS file that we have authored that can fine-tune the one authored by InDesign.

Since I’m comfortable writing CSS, I’ll create a preliminary CSS file to finesse some of my styles. If I’m using a character style to format page number references, for example, I can write CSS for its class to hide those references in a reflowable ePub. So a phrase like “see page 873” will simply not show up in the ePub because I will have applied a style to it called hideFromEpub, and CSS that says .hideFromEpub { display: none; }.

Images and other frame content can be tagged as well (usually via an object style), but can also have more elaborate export options applied with an object style or à la carte with the Object Export Options dialog box.

Note: To order content composed of both text and images, images must be anchored to a text position. Review “Anchored Objects” (page 231). For example, each figure and image in this book is anchored to an otherwise empty paragraph so it “knows” where it is in the flow.

In the example above, a title page will have the dark surround and white-on-black skeleton image when printed. But when exported as an ePub, a black-on-white version will be centered below the byline. To include the title page’s text frame in an exported ePub (including the image anchored to it), it is added to the Articles panel. Since the other image has not been added, it will not export.

Choosing What Gets Exported and How

The most reliable and intuitive way to choose what gets exported as ePub or HTML, and in what order, is by adding those items (articles) to the Articles panel. The name of this panel has confused many. I suggest interpreting the word “article” as you would when discussing items like articles of clothing, not as written pieces. Simply drag a frame into the Articles panel to add it. You’ll be prompted for a name. Subsequent items can be added as sub-articles to an existing one or added as new ones. For the novel in the figure, the entire story thread was added by dragging in its first frame! The list of illustrations (LOI), an independent story, was added after it, and the title page before it. Any object or group that is anchored to a paragraph in a story is included with it. For reliable formatting, a complex figure (image frames and text frames grouped together and possibly pasted inside another frame) can be converted into an image. The file format and resolution of that image is specified in the Object Export Options dialog box. The figure here shows the resulting ePub viewed in the Apple iBooks reader (in landscape mode to display a “spread”).

The figures in this book are configured with Object Export Options much like the skeleton image. I chose to Rasterize Container (the anchored frame), which converts the frame to an image made of pixels, with a Format of PNG (to preserve quality better than JPEG), and a resolution that can withstand enlargement by the reader. The skeleton image in the example will be 150 ppi. Many images in the ePub of this book will be 300 ppi so they can be enlarged and studied by you, my dear reader. To enhance accessibility, Alt Text can be added by typing (Custom) or automatically by pulling from an image’s metadata (XMP).

Fortunately, those settings can be included in the definition of an object style so you can apply them consistently and easily.

Most ePubs are reflowable; that is, readers may change much of the formatting to suit their taste, including font, text size, orientation, and more. When they do, the text reflows and the “page” count changes. Because of this, the concept of a page is somewhat abstract in the world of e-readers. When I read on my iPad, I set iBooks to scroll mode so the whole book is continuous. In that way, I’m rarely offended by odd breaks that can occur otherwise. Some books, like novels, do perfectly well as reflowable ePubs. Others, like children’s books, cookbooks, and others with delicate layout do much better as fixed-layout ePubs.

With fixed layout, an attempt is made to maintain the position of everything. Thus, master page items like page numbers make sense here. There is no need for the Articles panel to order content because all is included just as it is in the print version. However, as an electronic document, our cross references can be tappable hyperlinks (just as we’d use in a reflowable ePub) with no need of a listed page number. Many of InDesign’s interactive features are supported as well, subject to limitations of the physical reader and its software.

Both fixed and reflowable ePubs offer multiple means of navigation. Both can show a table of contents that you can naviagate with a tap (right, in iBooks), generated by a TOC Style we create in our InDesign file before exporting. Above, we can discern a blue underlined hyperlink cross reference in the Kindle Previewer (left) and a TOC in iBooks (right).

Exporting an ePub

If I’m making a reflowable ePub, I will anchor images (whose Object Export Options are set) to where I want them relative to my text, and then drag content into the Articles panel. I need to drag only one text frame of a story to add the entire story. For a book, this usually means I add title page content, each independent bit of other front matter, the main text flow, and perhaps an index. I name all the articles and order them.

If I have designed a cover, I will note where it is located on my computer so I can designate it during export. One may also choose to rasterize the first page, which is useful if you have a particularly nice title page. I will also double-check that I have set Export Tagging correctly in my various styles.

As careful as I am, I will still miss something! But I’ll find out after I use File > Export… > ePub (Reflowable) (in this example). The first part of the Export Options dialog, General, has some significant options.

General

Choosing a Version 3 ePub allows for better typography in some readers, as well as interesting interactive features. You choose a Cover graphic from here, too. For Navigation TOC, it’s best if you’ve created (and choose here) a TOC Style. The Content Order will be Same as Articles Panel, as Based on Page Layout is very much not what it sounds like. That choice orders content leftmost first, then top down. Horrible. So, we use the Articles panel!

Finally, Split Document is a reliable way to ensure that content using certain styles, like chapter headers, is at the top of a page, even in this relatively pageless medium. If there is only one style that should behave this way, you can choose it here. If there are several, you designate that behavior in the Export Tagging section of those paragraph styles. InDesign Keep Options that specify that a style should start On Next Page will generate CSS that attempts to do that in the eReader, too. Depending on the eReader, that CSS may work. The Split Document checkbox (in Export Tagging) will work.

Text

This section has far fewer options that need concern us. One that might is Remove Forced Line Breaks. If you’ve used those solely to make better breaks for the print version, you will likely want to enable this option. However, this will remove all forced line breaks, and you may want some of them to remain.

In this medium with no real pages, where should footnotes be? Your choices are as follows: at the end of the paragraph containing the footnote reference; at the end of the section (essentially converting footnotes into endnotes); or, for ePub version 3, in a popup window.

Object and Conversion Settings

These settings apply to objects if they haven’t already been applied with the Object Export Options dialog box (or an object style). I try very hard to use the latter for all images, but if I’ve missed any, I choose settings here that protect the integrity of my imagery.

HTML & CSS

If you want to strip your text formatting and rely on the eReader’s settings only, choose Don’t include classes in HTML and disable Generate CSS. If you wish to preserve as much of your print book’s formatting as possible, you would leave the defaults, including classes and generating CSS for them. I also Include Embeddable Fonts so those eReaders that support them will use the fonts I’ve chosen. Be warned, some devices will not. Learn to let go!

It is here you can Add Style Sheet…; that is, your own custom CSS file(s).

JavaScript

If you’ve programmed some behavior for elements using this scripting language, you can add JavaScript files, too.

Metadata

This data gets added in the deep recesses of the ePub and can be seen by eReaders and eBookstores. However, when publishers submit books to Apple’s iBookstore or to Amazon as a Kindle book, they will supply this information (and much more) that will overwrite the data in this form.

Viewing Apps

Here, you add the software applications with which you want to check your work. The default is Adobe Digital Editions. It is, ironically, not a great eReader. I use Apple’s iBooks (on both my Mac and in iOS) and the Kindle Previewer app (available for Mac and Windows). There are others, too.

Last ePub Note

As mentioned throughout, some HTML and CSS knowledge is useful when working with ePub. With the right software, you can “crack open” an ePub and access the code inside to perfect the results. Unfortunately, that geeky fun goes beyond the scope of this book.