Lesson C: ePub (and HTML)

When you read an ePub (also known as an e-book, or electronic book), you’re actually viewing a collection of files. These are mostly HTML files, with CSS files (Cascading Style Sheets) to control the look and feel, and other, more esoteric formats as well. These are all hidden from view inside a container we experience as an ePub “file.”

Because ePubs are predominantly HTML, many of the concerns we have when exporting them are the same as when we export HTML without an ePub container.

Exported HTML can be viewed in any web browser program. But ePubs from InDesign require special applications to look at them afterward. Adobe makes its own called Adobe Digital Editions, but I prefer other applications. If you use a Mac, I’d suggest using Apple iBooks. The desktop version is a fabulous way to view ePubs after making them. There are others for both Mac and Windows (and sometimes Linux):

Calibre: https://calibre-ebook.com

The Nook app: https://www.barnesandnoble.com/h/nook/apps

Kobo: https://www.kobo.com/us/en/p/apps

Freda: http://www.turnipsoft.co.uk/freda

Of course, one cannot forget to include Amazon’s Kindle. The Kindle Previewer app is not only a good way to simulate a physical Kindle on your computer, but it can also convert an ePub to Amazon’s Kindle format (mobi). Get it from: https://amzn.to/2fXMAX0.

• Procure any one (or more) of these so you can test the ePubs you make.

There are two kinds of ePub that can be generated from InDesign: fixed layout, which attempts to preserve the layout as closely as possible, and reflowable, the more typical form in which the reader can change the text’s font and size and for which we need to indicate the order in which content flows. Fixed layout ePubs are dependably viewable with only some devices and e-reader apps, whereas reflowable ePubs are viewable on any type of device.

Including Content

There are three ways to control the order in which content is experienced when you export as reflowable ePub (or HTML): page layout (which needs some explanation), XML structure (a specialty beyond the scope of this book), or the Articles panel (by far the best choice).

Choosing page layout will order content by what is leftmost first, then, if multiple objects are the same distance from the left edge of a page, from the top downward. This is usually horrific, except in the very simplest of layouts. XML (eXtensible Markup Language) is a means of describing content structure and is often used when the content is supplied by databases. Large retailers, for example, use this to generate catalogs in a partially automated workflow. But for the vast majority of InDesign users, the Articles panel is both intuitive and easy to use.

It helps to bear in mind that the word “articles” is used to mean “items,” not “written pieces.” Let’s ensure that all of a novel’s articles are included.

• From the downloaded folder called 8 Output open the file called Study in Scarlet.indd. Go to page 1, the title page.
• Use the Selection tool to select the text frame on page 1.
• Get the Articles panel: Window > Articles.

Note that there are two entries in the Articles panel. We need one more for this title page so that it will be included when we export as ePub or HTML.

• Drag the text frame to empty space in the Articles panel. A small dialog box opens.

• Supply the name titlePage, then click OK.

The new article appears at the end of the list, which means it would be the last thing in the ePub.

• Drag the titlePage article to the top of the panel.

Now it’ll be first. The checkboxes, by the way, control whether something is exported or not. So if there’s content you’re unsure of, you can add it to the panel and decide later whether it should be part of the export.

But what will this look like in a reflowable ePub? Different e-readers might display different fonts, for example. To preserve the impression of a title page, and to display the text as we intend, we can export this frame as a graphic of relatively high quality on its own “page.”

I put the word page in quotes because, for the most part, if a reader changes the size of the text, the amount of text that appears on a device’s screen will change. Thus, the concept of a page in the world of ePubs is rather flexible.

Object Export Options

• With the title page text frame selected, choose Object > Object Export Options.

Something that resembles a dialog box appears. It isn’t one, however. It’s more like a panel in that it can remain on screen while you perform other tasks. Let’s call it the Object Export Options window.

• Go to that window’s EPUB and HTML tab.

As you can see, I’ve already designated that to Preserve Appearance From Layout, I’d like to Rasterize Container—that is, to convert the text frame into a pixel-based image. For content other than photographs, we should choose PNG for the Format. I also chose a rather high Resolution (300 ppi) since this title page should be as crisp and lovely as possible, even on devices with screens of high resolution.

Also note that Custom Layout has been enabled to control where on the “page” the image appears. I chose to center it (horizontally) and I set its width to be 100% of the screen on which it’s viewed.

Although we could use this window’s controls on each object in a document, we will usually apply these settings with an object style. This novel has four illustrations, each with a caption. Each image-caption pair has been grouped and pasted into a frame with an object style applied. Except for the first pair, that style sets the Object Export Options similar to the one above, but with a width of 80%, and Insert Page Break is set to Before and After Image to keep it on a page of its own. The first image-caption pair has a page break only before it.

• Scroll down in the document. You will pass a table of contents, which will not be included in the ePub. However, a TOC Style was created and will be called upon when we export.
• Scroll until you reach the first image. It has an object style applied called introImage_and_caption. Note its effects on the Object Export Options.
• Right-click on the object style’s name and choose Edit “introImage_and_caption”…. At the very bottom of the left side of the dialog that appears, click EPUB and HTML to highlight it. That’s where the Object Export Options are set. Click OK.
• Also note that the frame holding the image and caption has been added to the Articles panel (when the frame is selected, a blue square appears to the right of its entry in that panel).

The third and final object in the Articles panel is the InDesign threaded story containing the entire text of the novel. Where are the other three images, then? They are part of the story, anchored to certain positions in the text near the references to them.

• Go to page 24. Select the frame that holds the image and caption there.

You should see a dashed line between it and the first paragraph on page 25. It has its own Object Export Options set with an object style, but it will show up in the ePub before the text to which it is anchored. If the images weren’t anchored to that story, they would all have to appear either before or after the story, each with its own entry in the Articles panel. Anchoring (see page 231) allows us to sprinkle content throughout the ePub with only one article entry.

Export Tagging

To better control the appearance of section and chapter headers, we can choose which HTML tag is applied to their content. I’ve chosen the H1 tag for section headers, and the H2 tag for the chapter headers. To confirm this:

• Right-click on the name of paragraph style Chapter_header and choose Edit “Chapter_header”…. At the very bottom of the left side of the dialog, highlight Export Tagging.

In the EPUB and HTML section, the chosen Tag is h2. Click OK. The board is set, let’s get the pieces moving!

Generating the Reflowable ePub

During this process, you will be asked to supply an image for a cover (it’s provided in the same folder as the document you’re currently editing, 08 Output), indicate what controls the layout (the Articles panel), and choose the TOC style that creates the ePub’s internal table of contents (it’s called novel TOC).

• Save the document (⌘-S/Ctrl-S).
• Choose File > Export…. At the bottom of the dialog that appears, choose EPUB (Reflowable) as the Format (Mac) or File Type (Windows). Set a location (the Desktop should be OK).Click Save.
• In the General section of the dialog box that appears, set the Version to EPUB 3.0. This version is now well-established and preserves typography more elegantly than the older version 2.
• Set Cover to Choose Image, then click the folder icon to the right of the File Location field. Navigate to the folder 8 Output and choose the file called StudyInScarletCover.png. I hope you like it.
• For Navigation TOC, choose Multi Level (TOC Style), which requires that a TOC style be made. The specific TOC Style to choose is novel TOC. You may have one to generate the printed TOC, another for the ePub.

• In the Text section of the dialog, there is little to do usually, and nothing now. If you use footnotes, you can choose where they go. I like pop-ups that the ePub 3.0 standard allows.

The Object and Conversion Settings sections are stopgaps for any objects you have not managed with Object Export Options. All our objects are managed, so these sections can be ignored.

• In the HTML & CSS section, be sure to check Generate CSS so text is formatted as closely to the original as possible. We can skip the Javascript section since we haven’t coded any.
• Add a title in the Metadata section. That and the other fields help e-readers learn something about the book. However, when we upload an ePub to Amazon or Apple, for example, we fill out forms whose content becomes the actual metadata for the book.
• Finally, in the View Apps section, add and choose which apps should automatically open so we can see how good our preparations were.

• Click OK and wait a bit.

• When done, save the file and quit InDesign. Have a celebratory gambol! The course is complete.