In this article, you will learn the process of preparing an InDesign file for conversion to EPUB, which includes many steps: styles, mapping styles to HTML, marking page breaks, applying semantics, anchoring images, applying image descriptions, preparing navigation, and including some basic metadata.
Subject(s):
Ebook Production
Resource Type(s):
Step-by-Step
Audience:
Technical
Before reading this, you might want to review:
Styles are absolutely critical to any well-made InDesign file. This cannot be understated. Use styles rigorously. Use them for character, paragraph, object, table, and cell styles. Employing styles well contributes to accessibility in foundational ways. This fairly straightforward layout task contributes to the structural hierarchy and navigation in an ebook by creating headers and pulling them out into a table of contents.
Consider working with the style override highlighter on. This is a button available from the paragraph or character styles panel. The picture below shows a bit of text with a font size slightly bigger than the next paragraph. That text was made slightly bigger using the font controls, not by editing the style. Because the style override highlighter is on, InDesign gives a visual clue that something is off here. This is extremely useful when inheriting other designer’s files. It’s a quick and simple way to see how well-formatted a document is — that is, how well styles are used.
The robust use of character styles also helps to clarify different uses of italics and bold, even helping to tag language shifts. This paragraph on screen has three completely different and unique uses of italics. In the screenshots below, there are three different character styles for these use cases so that we can control how these bits are coded in the ebook. The first one, J’aime le chocolat is a French language shift. The style sheet is named “French” — can’t get much more straightforward. And as you can see, the language up on the top bar is marked as French. This means that that sentence will come out with a language shift marked in the HTML so that screen readers will recognize the shift and use the correct accent.
The second instance of italics is the word “Oh” in the sentence “Oh, why can’t you remain like this forever!” In this case, the style is emphasis and, as you will see, is mapped to an <em> tag so that it will be read with emphasis by assistive technology.
Finally, SS Minnow, a boat name, uses the simple italics style sheet. This is neither a language shift nor a case of emphasis and so is mapped to a simple <i> or italics tag.
These three uses of character styles are a good illustration of how to stretch and pull styles to cover all of the HTML elements you might need in an ebook.
Assuming the layout is well-formatted — using paragraph, character, object, and table styles effectively — the best way to manage how InDesign exports to EPUB and HTML is through the “Edit All Export Tags” panel. Accessible from any style palette in the top-right corner fly-out menu, this menu will be the source of EPUB superpowers.
This menu lets you map styles to HTML tags. Why is this important? Well, mapping a heading level to the correct heading tag will lend your content structure and semantic meaning. When you think about accessibility, it helps to imagine your content from the point of view of machines. A book needs to be parseable and understandable to rendering engines so that it can be presented to readers who can’t see it.
A major pitfall of digital content creation is making stuff that looks good. As such, a fundamental accessibility principle is the separation of content and style. We are by no means suggesting that your ebook shouldn’t look good. Design the heck out of it: embed fonts, do fancy formatting things, go wild. But make sure that if your ebook gets separated from its style sheets, it will still make sense. Headers will look and function like headers. Block quotes will be set off from the body text in some way. Italics will display as italics and be read with emphasis by assistive technologies.
Left to its druthers, InDesign will fill your EPUB with generic HTML like <span> tags and <div>s around everything. All paragraph styles will default to a <p> tag, all character styles to a <span> tag, and all object styles to a <div> tag.
<h1> tag, a meaningful HTML title, and the language declaration moved up to the root HTML element.Let’s look at a sample of what I mean by generic HTML versus intentional HTML. The first screenshot above is a raw chunk of HTML, unedited after export from InDesign, and then a chunk of fixed-up HTML follows. There are subtle and significant differences:
Why bother messing with this default behaviour? Those <div>s and <span>s mean that the EPUB looks like it’s supposed to, doesn’t it? Putting accessibility at the centre of how we make EPUBs means that we need to rigorously shift the focus from presentation to meaning. From a screen-reader point of view, it doesn’t matter one bit if the EPUB looks fine. What matters is that the HTML driving the EPUB is made with semantics in mind. Using precise HTML gives the markup meaning, rather than just presentation. Let the HTML do some of the accessibility heavy lifting for you.
How does this semantic HTML thing play out in practice? Let’s say your content has some secondary content like a sidebar. InDesign will help you style it correctly, but marking it with the appropriate HTML — in this case an <aside> tag — will mean that a reader consuming your content via a screen reader will be given the option to skip secondary content marked as an <aside> to focus on the main narrative in the text. So rather than interrupting that reading experience, the reader can come back to that piece at their leisure.
Following the school of thought that a well-made EPUB that meets accessibility guidelines is a better reading experience for a broad range of readers, mapping paragraph styles to a structural hierarchy will mean that there is a full navigation built into your EPUB and thus that every manner of reader will thank you for that attention to detail.
“Style is just a layer between your markup and the device that renders it, not an intrinsic quality you can rely on to say anything about your content.” — Matt Garrish
With a little nudging, InDesign will produce cleaner HTML. So let’s dig in and look more closely at “Edit All Export Tags.” This screen will display all the paragraph, character, and object styles at use in the files. From here we can map to the appropriate tags. In this screenshot, we can see the paragraph style “cn” — which stands for chapter number — is mapped to an <h1> tag. And the export is directed to split the EPUB into chapter-sized HTML chunks based on that divider.
The paragraph style called “H2” is mapped to an <h2> tag for which I’ve given it a more meaningful class name of “ahead.” In the document that this menu is from, there are three kinds of italics mapped to three different tags. One of the limitations of InDesign is the lack of robust options from this window. InDesign is a bit flat-footed about this. Paragraph styles will map to <h1> through <h6> or p tags; character styles to <em>, <strong>, or <span> tags; and objects to either a <div> or <span> tag. Don’t limit yourself to only these options — there is a lot more HTML in the world.
If you take only one tip from this post, let it be this: You can type in more semantic HTML tags in this window. You are not limited to InDesign’s drop-down options.
The instructions in the above screenshot show opting out of InDesign’s offerings in some places, and typing in more appropriate HTML tags — like <em>, <cite>, or <i> tags for the variety of italics in this document, to a <sup> tag for superscripted items, and to a <small> tag for small caps. And in the object style sections, a basic text frame that starts each chapter has been translated to a <section> tag, the images to a <figure> tag, and the frame that the caption sits in to a <figcaption> tag. Be careful here not to make up HTML because that just won’t work.
Strong-arming InDesign like this will yield cleaner HTML. It’s still not a perfect system — for example, the markup will need to be edited so that <figcaption> is nested properly in the <figure> tag. At present, InDesign does not do nested HTML well at all, so please bear that in mind.
Let’s go a little deeper on the variety of options available to you in the five windows of the export-to-EPUB options. One of the most useful things you can do for the accessibility of your ebook content is also the simplest: Opt for EPUB 3 instead of EPUB 2. EPUB is a specification defined by the International Digital Publishing Forum — the IDPF — an organization that was folded into and taken over by the W3C in 2017. Maintenance of the EPUB spec is now assumed by working groups within the W3C. The EPUB 3 spec was approved in 2011. EPUB 3 assumes the EPUB 2 spec but takes a slight left turn to a set of definitions that are explicitly accessible. A major goal of EPUB is to facilitate content accessibility through navigation, structural hierarchy, rich media, and semantic HTML.
Under the options at File —> Export —> EPUB (Reflowable), InDesign will default to EPUB 2. The simple action of opting for EPUB 3 amplifies the accessibility of the resulting document. It is not possible to overstate this. Some ebook retailers report that up to 60% of brand-new content is still EPUB 2. The work of having to accommodate that older specification is significant for ebook vendors.
There is nothing wrong with EPUBs made to the EPUB 2 spec, per se. But it is comparable to opting for something flat over something three dimensional. Please consider that basic format choice the next time you make ebooks.
The next, and arguably most, impactful part of the suite of EPUB options when it comes to accessibility is the thing that will give your ebook structure and thus make it easier to use: You can link here to an existing TOC style, or create a bespoke one for EPUB export purposes. The structure you create in an EPUB TOC style will become the navigation document for your ebook. A good navigation that goes several heading levels deep is one of nicest things you can do for readers. It makes it easy to go back and forth in an ebook, and contributes considerably to the usability of any ebook. For print-disabled readers, the fitness of the baked-in navigation document is key to being able to flip through an ebook.
In the Text window, there are couple of notable things: Please be mindful to map lists to the correct HTML for lists. Converting a bulletted or numbered list to text will strip that content of meaning in some contexts. Imagine listening to a list being read as a long run-on sentence without pause and without any indication that it’s a list. It wouldn’t be a good reading experience, we promise you.
Under the Object tab, you can manipulate InDesign into turning out a responsive ebook — almost despite itself. Asking the export to determine the size of images as relative to text flow, rather than fixed, means that the size of images will depend on the size of the end user’s screen. The CSS definitions will be output in percentages, rather than pixels.
Under Conversion Settings, we encourage you to export images to JPEGs rather than GIF or PNG wherever possible. This creates a more compact EPUB. The size of the EPUB contributes to the usability of the content; i.e. larger is harder and clunkier to use, especially on older devices.
The HTML & CSS tab had some hidden gems. It is fair to say that InDesign does not write a very good ebook CSS file. It exports too much information, including things that will definitely interfere with accessibility.
For example, the InDesign-generated CSS will define the text as black, which will mean that most text will not invert when a user switches to night mode. Defining the body font size as 0.917em — which is often what 12-point type turns into — means that a user with low vision may not be able to upsize the font in some reading systems. Some of the CSS is nonsense that no reading system will respect, and some of it is repetitive and unnecessary — like text-transform:none. Twenty lines of CSS definitions can be condensed down to eight lines. With a really good CSS, it could be compressed even further.
InDesign’s CSS is not only overburdened but can actually get in the way of accessibility. Consider developing your own CSS, or crib from others. Blitz.css is a very good starting place. While no longer under active development, Blitz CSS is still a very usable, excellent ebook CSS resource. Please consider starting there and swapping in that set of CSS definitions for the overwrought CSS that InDesign will produce for you. If you were doing that, you would uncheck Generate CSS in this window, and ask ID to embed a CSS that you add here in the Additional CSS window. The ability to change the font size and font are foundational to accessibility so don’t let InDesign’s CSS undo the good work you’ve done to make an accessible EPUB.
The final window that we will show you here is the metadata window — and it is already populated with the details that you may have put into the File —> File Info window. You might add an ISBN identifier here, and a publisher to round out this data.