ePub Formatting – How To Create an ePub Table of Contents Page With Bookmarks

An epub document should have two separate tables of contents. The first table of contents is built-in to the epub file. Creating this table of contents is described in the blog article right before this one. The second table of contents that should be included in an epub document is simply a page of bookmarks that link to each TOC entry. This is just a page of content within the epub document that lists all table of content entries as clickable links (bookmarks).

This table of contents is something that you will have to create. This TOC can be created automatically (almost automatically, anyway) with InDesign. This blog article will show how to create the bookmarks by writing the underlying XHTML code. You always have to keep in mind that an epub document is actually a mini web site, complete with pages of XHTML code, a CSS stylesheet, and a folder containing all images or links to the images.

There are a couple of good reasons to create this TOC page of bookmarks in your epub document. Probably the main reason is that Amazon Kindle requests this TOC to be included in the epub or mobi that you upload. Maybe just as important is that many readers will enjoy having this TOC option available so they can create more room on their viewing screen by closing the navigation pane containing the built-in table of contents.

Let’s get right to it. Your table of contents page will simply be a collection of bookmarks. Each bookmark is a hyperlink which is linked to the correct place within the epub document.

To edit XHTML code in an epub file directly, you will need to open the epub document up in an epub editor. Probably the most popular epub editor is Sigil, which is available as a free download. Just Google “sigil” to get the download link.

When you have opened up your epub file in an epub editor, you can write the code for this TOC, which is just a collection of bookmarks. To create a working bookmark in an epub document, there are two pieces of XHTML code that you will need to write. They are:

1)      The Hyperlink appearing on the table of contents page.

2)      The Bookmark at the location in the epub document that the Hyperlink references and links to.

Suppose that you wish to create an entry in your TOC that will to link to the beginning of Chapter 1. You will have to open up the page within the epub document that will hold the table of contents. Open this page within the XHTML editing window so you can directly type in the XHTML code for this bookmark hyperlink.

Generically, the XHTML code for the hyperlink is as follows:

<p><a href=”../Text/page_name.xhtml#bookmark_name“>Chapter 1</a></p>

page_name.xhtml is the name of the page that your bookmark links to.

bookmark_name is the name that you have assigned to that bookmark.

Chapter 1 is the clickable anchor text on the tabel of contents page that will be seen by the reader.

All pages of content in an epub file will be in the Text folder. The Text folder exists in the root directory of the epub document.

Generically, the XHTML code for the for the bookmark is as follows:

<a id=”bookmark_name“></a>

bookmark_name is the name that you have assigned to that book mark.

Place this bookmark at the top of the page on which the bookmark appears. It is best to place this bookmark direct after the <body> tag. No matter where you place the bookmark on the page, the reader will be taken to the top of the bookmarked page after clicking the hyperlink in the table of contents. You might as well place all bookmarks right after the <body> tag on their respective pages. They will be easier to find if you need to go back in and edit them.

One other tip is to give the bookmark the same name as the page, so that page_name and  bookmark_name are the same. That little step will simplify everything just a little bit.

You can indent first, second, and third level TOC entries differently by placing hyperlink inside a paragraph tag and applying a CSS class to that paragraph that indents the bookmark by specifying a large left margin. An example of the hyperlink enclosed within paragraph tags is as follows:

<p><a href=”../Text/ page_name.xhtml # bookmark_name “>Chapter 1</a></p>

Now apply a CSS class to paragraph that adds additional left margin and therefore indents the paragraph.

You can style the hyperlink’s anchor text that the reader sees any way you want by placing them within span tags and applying a CSS styling class to the span tags that enclose the anchor text.

An example of the anchor text enclosed within a span container is as follows:

<p><a href=”../Text/ page_name.xhtml # bookmark_name “><span>Chapter 1</span></a></p>

Now apply a CSS class to that span which styles the enclosed anchor text.

Once you have created all of your hyperlink-bookmark pairs created, open your epub file in an e-reader, Adobe Digital Editions for example, and click on each TOC link to ensure that they all work.

One curious note is that these TOC bookmark hyperlinks will not appear to work when viewed in the Amazon Kindle preview window that is presented right after you have successfully uploaded your new .mobi file. If they work in your e-reader, then they are functional.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s