How to Build Rich Navigation in EPUB3

Expert publishing blog opinions are solely those of the blogger and not necessarily endorsed by DBW.

EPUB3 InDesign EPUB ebooks digital production InDesignEPUB3 is no longer all that new, but there still seems to be some reluctance among digital publishers to make the final move to a full-fledged EPUB3 workflow.

In just the last two months I’ve been asked several times about the ‘how’ and ‘why’ of making the switch. And I’ve offered my opinion, unasked, about doing so an equal number of times. Yet there is still the odd retailer or library aggregator that insists on EPUB2. There are even rumors of European retailers with country-specific market shares that won’t accept EPUB3.

I would like to see publishers build backwards-compatible EPUB3 and move forward once and for all. Like it or not, “because that’s just how our workflow is built” is a legitimate reason publishers give to hold off, but it’s becoming a bit of a lame duck.

If for no other reason, I am excited about using EPUB3 for the rich navigation it affords. Particularly in nonfiction titles, giving the reader a number of ways to access content is a fairly simple but robust way to offer a deeper e-reading experience.

Here’s how to do it.

In addition to the usual print instruments like a table of contents and index, the Landmarks and Page List features shown in this screenshot from Adobe Digital Editions 4.0 can help create a deep set of navigation tools. This is what they look like:

EPUB3 EPUB ebooks digital production

Landmarks is a set of navigational bookmarks that point to the structure and fine grain of a document, which replaces the deprecated OPF <guide> in EPUB2. They delineate the prelims, the start of content and the back matter but can also go deeper into things like acknowledgments, list of illustrations or glossary. Not every ebook has every epub:type landmark available, but making the set available in a specific piece of content makes it both more accessible and easier to use.

How do you build landmarks? It’s relatively simple.

The epub:type attribute needs to be added into the <body> tag in the HTML docs, like this: <body id=”template-2″ epub:type=”toc”>. A corresponding list of landmarks in the nav document will list the landmarks available to the reader. It will look like this:

EPUB3 EPUB ebooks digital production

If InDesign is part of your workflow, you can assign landmarks from the Object → Object Export Options menu.EPUB3 EPUB ebooks digital production

A full set of semantic landmarks is available to subscribers to the CC version of InDesign. The trick is to assign the landmarks to the first frame of a threaded set or to a stand-alone frame. Applying a landmark to a box in the middle of a threaded set will not hold at export to EPUB.

The EPUB3 feature known as Page List has a more specific function. It is meant to provide a print-corollary pagination. This feature is particularly useful for textbooks or reference tools where cross-referencing the print page number to the digital version is important to functionality. This reference can be embedded in a <span>, a <p>, or a <div> depending on whether or not you want the reference to be visible. (Check out some code samples here.) Whether or not the page break is visible, the page number displayed within the e-reading system will match up to the print version, displaying the print page number or a page range like “page 20–21.”

A good, fully-fleshed out page list is a little trickier to build.

The print page breaks need to be marked in the EPUB—a process that can be tedious, to say the least. I have a workaround if InDesign is a tool in your EPUB process: I pare the running heads down to just a folio, make that folio live text with a unique style sheet applied and then anchor that box in the text flow.

EPUB3 EPUB ebooks digital production InDesign

This will produce rough code that looks like this sample in the EPUB:

EPUB3 EPUB ebooks digital production InDesign

Because the code is consistent, I use RegEx to create code that matches the page lists specs requirement. The final step is to generate a page-list in the <nav> document that lists the page references by HTML file. It should resemble this sample:

EPUB3 EPUB ebooks digital production InDesign

Admittedly, this method is a bit of hack, but it gets the job done.

One final note: I strongly encourage you to make the jump to EPUB3, but be cautious to include EPUB2 fallbacks like a traditionally structured NCX file that ensures your ebook is still readable by EPUB2-only reading systems. This isn’t required for a valid EPUB3, of course, but is clearly the polite thing to do.

Once you get the hang of it, building rich navigation tools can become a fairly straightforward part of an ebook developer’s process. In addition to being a compelling argument for making the move to EPUB3, the capability is one more way digital production specialists can use the tools already on the market in order to improve the e-reading experience.

Not all innovation needs to be disruptive in order to be rich.

2 thoughts on “How to Build Rich Navigation in EPUB3

  1. Lucia De Cecco

    Many thanks for the great article. I can wit that french distributors do not accept the EPUB3 Fiwed layout. I just published an iBook with interactive menu, photos, videos, texts… and we’re doing a simple version for Kindle. I was asked to provide this version instead of the enriched one. So, we’re doing it, wondering if we have to create an app to keep the characteristics of our ibook. ( http://www.viewfinderbook.com)

    Reply
  2. David Kudler

    Hi, Laura — thanks for the excellent article. I found it precisely because I was trying to figure out a way to export from InDesign to ePub3 with a page-list. I get everything in your quick description of how to manage this, except this bit:

    I pare the running heads down to just a folio, make that folio live text with a unique style sheet applied and then anchor that box in the text flow.

    Okay — I don’t run my running headers across the full spread in the master pages, so no need to pare them down, if I understand that first bit correctly. But parts two and three lose me, I’m afraid. How do you make the folio \live text\? (I think I can figure out how to apply CSS once that’s happened.) And how do you anchor that to a spot in the text flow???

    Reply

COMMENT

Your email address will not be published. Required fields are marked *


*