Ebooks from InDesign: Twenty Things to Consider

Making better ebooks from InDesign is a consistent theme here at EPUB Secrets. This is a guest post from Felipe Santos, a noted Adobe educator from Brazil, with many excellent tips and tricks for you to bring to your workflow.

Here are the 20 InDesign features you can not ignore when producing ebooks.

1. EPUB version
2. Cover
3. Contents/Navigation
4. Reading order
5. Document breaks
6. Publish Online
7. Soft paragraph break
8. Footnotes
9. Lists
10. Appearance of images
11. Inline and Anchored
12. Responsive Images
13. Boxes
14. Optimization
15. Style Sheets — CSS
16. Additional formatting
17. Interactivity
18. Metadata
19. Testing, testing and testing
20. GREP (Regular Expression)

I will explain all of these below. And I’ve saved the best for last, so don’t miss #20!

The “General” tab of the EPUB export options menu for reflowable EPUBs

1 / EPUB Version

If you use any version of InDesign from Creative Cloud, you have no technical reasons to continue exporting as EPUB 2.

In fact, here’s a little motivation to switch over: the EPUB3 format is much better structured. In simpler projects we have already been able to validate the EPUB directly from the InDesign export.

And do not worry because EPUB 3 is compatible with older readers and ereaders which only support EPUB 2.

2 / Cover

Add an external image or convert the first page to become the ebook cover. A cover.xhtml file will be created, as well as any statement required for ereaders to identify both the marketing image and the .xhtml file as the cover.

Markup from the OPF describing the cover of an EPUB.

Part of the content.opf with the tag in Spine and the Guide tab (EPUB 2 semantics)

Markup from the navigation document with epub:type semantics pointing to the cover.

The cover.xhtml file is also tagged with EPUB 3 semantics: epub:type=”cover”

3 / Contents

If there is a unanimous appeal in any kind of publication, digital or printed, I venture to say that it a richly navigable table of contents. And in digital books we can set up to two variations of this feature.

The ereader navigation (external) and the publication’s inline TOC (internal) is a critical piece of the EPUB puzzle, especially for distribution by Amazon, which requires the presence of both types.

Either version of the contents can be produced simultaneously using TOC styles. Access the layout menu> summary and choose the paragraph styles that will be part of the summary.

From the TOC styles menu, showing a set of options to create an inline TOC and the EPUB’s navigation.

Of course, do not forget to save a TOC style and apply the same in the export panel, in the General > Navigation Summary tab.

4 / Reading Order

An InDesign file that has all the objects and images applied as anchors or inline (see below for more on inline or anchored images) will preserve that reading order in the EPUB export, meaning that the developer will never have to worry about content being out of order.

Although InDesign allows XML-based exporting via the Articles panel, my production experience has always been based on page layout. And it’s working fine …

5 / Document Breaks

Even though the entire book may be in a single text box in InDesign, reading does not have to follow in the same way. That is, applying breaks to content, usually in chapter-sized chunks, is essential to ensuring a good reading experience.

From the Paragraph Style Options menu, displaying where to opt to insert document breaks.

And InDesign has evolved well in this task. We can now apply breakpoints based on any paragraph style with a simple click.

6 / Publish Online

A recent feature added in InDesign CC, Publish Online allows a very interesting combination with the Fixed Layout EPUB (FXL).

Publish Online supports all InDesign interactive features, as is the case for FXL ebooks.

Supported interactive features include:

• Hyperlinks
• Buttons
• Image gallery
• Multimedia (video and audio)
• Animation

Imagine being able to distribute an online and offline publication from the same InDesign file. Now you can stop imagining and start producing, because the combination EPUB FXL (offline) and Publish Online (online) allows this kind of dual publication.

From the “Text” options on the reflowable EPUB export options menu, showing how to manage soft paragraph returns, footnotes, and lists.

7 / Soft Paragraph Break

Soft line returns – shift + enter – are used frequently, and it can be preserved or removed directly from the export panel.

I particularly prefer to remove them, but do be cautious of maintaining space between words.

8 / Footnotes

This classic book design feature is present in EPUB export since the CS4 version of InDesign.

In the digital format, footnotes function as endnotes, all of which are applied at the end of each chapter (or HTML file).

The footnote configuration panel can and should be explored as it provides excellent support of exporting features to EPUB. By default, footnotes are automatically provided with roundtrip navigation links.

9 / Lists

In the Creative Cloud version of InDesign, this feature has been completely redesigned to meet W3C standards.

Exporting lists as ordered (numbers) and unordered (bullets) will get you a clean structure compatible with all readers.

Some HTML displaying the markup for ordered and unordered lists.

This is how these lists look in Adobe Digital Editions

Rendering of an ordered and unordered list in Adobe Digital Editions.

Showing the “Object” tab of the reflowable EPUB export options menu, pointing to the places where developers can control the appearance of images.

10 / Appearance of Images

The Object tab of the Export panel presents two options for exporting images:

• Preserve appearance
• Use existing image

The first ensures that the appearance of the image box, i.e., border, rounded corners, shadow, etc, will be preserved in the export. This feature is unique to image boxes and will not work with text boxes that are part of a thread.

The second is useful when you want to export the original image without the interference of box formatting in InDesign.

An image with a red outline, rounded corners, and a drop shadow.

11 / Inline and Anchored Images

Before we move on to the next item in the object tab, it is worth explaining the differences between inline and anchored.

There are two ways to insert images and text boxes into your ebooks.

• Inline – objects inserted in this way will always be rasterized, that is, transformed into an image.
• Above the line and anchored – in this mode the texts are preserved in the export to EPUB.

Now that you know how each anchored item works, I think it’s easier to choose. Let’s move on!

IMAGES

My recommendation is to apply all images inline. Copy the images with the black arrow tool and with the text tool create a new paragraph to paste the image.

Showing Anchored Object Options, pointing to how to format inline images.

But what if you have images with caption in the project?

Showing an image and caption as an inline object from within InDesign.

For photo and caption layout situations, a good approach is undoubtedly to group them so that it is easier to ensure that they stay together in the ebook’s reading stream.

But I do not want to turn my captions into an image, and I believe (and hopefully) that you do not either. Anyway, what is the solution?

The way to avoid this is to change the Anchored Object Options panel from inline to Above Line.

A screengrab of Anchored Image Options showing how to format images to be above line.

Every layout will be preserved. If you prefer to apply an object style to fit the set photo and caption. And remember, productivity with technical and visual quality is our goal.

SIDEBARS

Use the objects (text box) anchored (custom) inside the main text box. It is a good idea to put each object in its own paragraph.

A screenshot from InDesign highlighting the blue square used to anchor items in the text flow.

Drag the blue icon from the text frame to the paragraph in which you want to display the object.

A screengrab from the Object Style Options menu showing how to create a custom layout for anchored items.

Through the object styles we can export fill and outline properties, and in addition to the EPUB and HTML tab you can control the size and position of sidebars.

12/ Responsive Images

A good ebook development best practice is to set every object in an ebook as responsive, so it adjusts to different screen widths.

Imagine having to control each of the publication’s images separately. No, thank you!

Solve this situation by always keeping the CSS Size option Relative to Text Flow. Thus, each image will receive a percentage value depending on the area occupied on the page.

Two different images: taking up 100% vs 50% of the page.

13 / BOXES

Some examples of sidebars produced directly from InDesign, with responsive width and preserving the appearance of the layout (fill and outline). All settings are controlled by the Object style.

Screenshot from Adobe Digital Editions show a centered, responsive text box.

Centered and responsive text box.

Another screenshot from Adobe Digital Editions show a sidebar occupying 50% of the width of the screen, without rounded corners.

Box with text to contour and responsive. Manipulating these settings via Object Styles also works also with Images.

An image from ADE showing a balloon-style sidebar.

And with a bit of CSS we can make a very interesting sidebar, balloon style as shown above.

The “Conversion Settings” tab of the reflowable EPUB export options menu give developers a few ways to manipulate images.

14 / Optimization

The conversion settings allow you to correct one or two images that we forgot to optimize the resolution to 150 dpi. I do not recommend letting the panel perform this reduction on all images.

Distributing well-optimized ebooks relative to the final weight of the file is undoubtedly a good UX practice.

For projects with large amount of images I suggest the use of specialized websites in the optimization of JPG and PNG files.

The “CSS” tab of the reflowable EPUB export options menu.

15 / Style Sheets — CSS

This tab works to apply and correct paragraph, character, table, and object styles. After exporting to EPUB every style of InDesign will be marked as a CSS class.

Options on this tab include:

• Margin application around the contents of the ebook.
• Preserve local overrides. Please don’t check this!
• Include fonts.

 16 / Additional Formatting

Through the Additional CSS field there are great possibilities to complement the EPUB’s appearance.

Using this feature requires, at a minimum, planning to align the style tags you’ve made in InDesign with a previously produced CSS file.

In the “Javascript” tab of the reflowable EPUB export options menu, developers can specify where to add files into the EPUB.

17 / Interactivity

One of the promises of EPUB 3 came up against the constant limitation of the reading systems.

The instability of ebook readers has already been compared to the beginning of the web, time that the pioneers of web design had to produce practically one website for each browser. If you want to include interactivity with JavaScript, be prepared to produce at least two versions of the ebook.

A version with interactivity can be published mainly for Apple devices and a separate version for other bookstores, like Amazon.

The “Metadata” tab from the reflowable EPUB export options menu allows developers to specify several details about the ebook.

18 / Metadata

From InDesign CC we can export ebooks containing the main metadata fields already filled in, helping developers avoid post-export issues and validation errors.

Mandatory metadata includes:

• Title
• Date
• Author
• Language

19 / Testing, testing, testing

The export panel ends with the Viewing Apps tab, but depending on the type of project and your quality requirement, the job may only be halfway done.

Keep in mind that to achieve a technical and visual quality it is mandatory to perform tests on different platforms and devices. After all you never know which device or reading system the user / reader will read your content in.

I usually approach this testing stage objectively and suggest that you do the same. We can divide the reading options of ebooks by two characteristics

• Format — devices with different widths
• Rendering engine — responsible for displaying the ebook on the device screen.

Comments:

(1) ADE – Adobe Digital Editions is available on all platforms (Windows – Mac – Android) and although presenting instabilities and conflicts between their versions remains a good parameter for testing. A general ebook developer truism: if the feature works in ADE, it will likely be supported by most readers.

The Android platform offers a vast choice of readers. In general it makes sense to test where your readers are; that is on the platforms on which you want to distribute ebooks. For example, Kobo, Play Books (Google), and so on.

20 / GREP (Regular Expression)

We can make deep changes in the document through the GREP commands.

In this option, markers are used instead of texts to locate parts of the document that follow a certain pattern.

Regular expressions are present in various Adobe software — InDesign, Dreamweaver, Bridge and even Photoshop allows you to use this feature.

If you have never used GREP, go to Edit > Find / Change and apply two commands already present in InDesign

• Multiple spaces in single space
• Multiple returns in single return

A screenshot showing some of the built-in GREP searches in InDesign.

These commands should preferably be applied at the beginning of the diagram, removing excess spaces and empty paragraphs. With this procedure we improve the text structure for both digital and print media projects.

You can also use GREP/RegEx searches in many text editors, like Sigil and oXygen. Also compatible with GREP markups, this is the ideal feature for removing redundancies applied in the code of ebooks exported by InDesign.