07 Jun ePub: How to Create an Inline TOC
Recently we were faced with an issue that shouldn’t have been an issue at all: how to create—by hand—an inline Table of Contents (or TOC) for the Kindle portion of an ebook project.
Normally this isn’t a big deal; Adobe InDesign is very good at doing this on the fly during export, assuming you have your TOC styles built correctly. But we were on a Machiavellian deadline and InDesign kept crashing every time we exported to ePUB. Once we pinned down the problem—the TOC—we omitted it with the knowledge we’d be able to recreate it later by hand if we had to.
Frankly, we don’t recommend this avenue unless, like us, you’re desperate to get something out the door quickly and are willing to make this trade-off. Otherwise, we recommend troubleshooting your InDesign document to find the source of the problem.
But if you don’t have that luxury, then here’s what you do. Ultimately, you’ll be creating the TOC file itself and modifying the content.opf file contained within your epub. If that’s starting to make you nervous, figure out that InDesign file now!
Creating the TOC
First, you’ll need to create your inline-toc.html document. Here’s the skeleton. Note that between the <title> tags you should place the name of your book. That will appear in the reader’s header area, like the folio of a printed book.
The link to the external stylesheet is probably unnecessary, but be aware that InDesign always names the external style sheet template.css, and that name will be carried throughout all the files in your exported epub. But for the purposes of the TOC we’ll keep our CSS styles limited to this document, since they’re not used anywhere else. It’s therefore safe to delete the template.css reference unless you’re planning on carrying over any styles from that, such as a CSS reset, etc.
So, somewhere between the <head> tags, begin your style area and plop in your CSS.
This TOC is quite simple. It basically requires two styles, the <h1> for the title (literally “Table of Contents”) and the class for each entry. And while it might be easier to specify a container element, such as a div, and assign it that class, we’ve found Kindle devices prior to the Kindle Fire are finicky where CSS is concerned. While that technique may very well work (and should), we know this does. The page-break class will be applied to an empty div element after the TOC is complete.
So once you begin coding your page beneath the <body> tag, you’ll start with an open div with an id of “xfilename.html”. Placing an “x” in front of the filename is important later when referring to this ID as an anchor reference in the content.opf file.
Assuming your file is named something like, 01-inline-toc.html, that open tag might look like this:
At this point you can begin. Remember Amazon requires that all TOC entries be linked and that there are no page numbers. Here’s the code:
Notice the anchor reference in the link tag. For every TOC entry item you’re going to have to make sure you put an anchor ID in the corresponding file so you can link to that file and anchor from the TOC.
Once you’ve finished with all your entries, close the </div> tag. We took a hint from the way Calibre creates its inline TOCs and created a separate empty div with the class “page-break”. Alternatively, you could assign the main div with the two classes, but that actually seems too advanced for anything but the Kindle Fire.
Editing the content.opf File
In order to make this work, there are three areas of the content.opf file you have to edit: the manifest area, the spine and finally you have to create a guide area if it doesn’t already exist.
The manifest is a list of all the files that make up the publication. It consists of three parts: the ID, the link to the actual file and its media type. The code for our example is as follows:
The spine is the arrangement of the documents in the order they need to be displayed. The code for that is referred by ID only:
Be sure to put it after the cover, but before any other content.
Finally, the guide is a set of references to fundamental structural features of the publication, such as table of contents, foreword, bibliography, etc. Code for an inline TOC should contain a type value, title value, and URL for the doc file. For example:
For more information on specifications for the OPF file, refer to the Open Packaging Format (OPF) 2.0.1 v1.0.1 Recommended Specification.