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

Posted on November 28, 2011 by ePub and eBook Help

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:

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

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:

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:

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

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:

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

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.

ePub Formatting – How To Create an Entry in an ePub’s Built-In Table of Contents That Does Not Appear Anywhere Else In The ePub Document

Posted on November 27, 2011 by ePub and eBook Help

You’ll view an ePub’s built-In Table Of Contents whenever you open the ePub file up in an eReader. For example, if you open an ePub in the well-known eReader Adobe Digital Editions, you’ll see the built-in Table Of Contents in the the left pane in the eReader.

An ePub’s built-in Table Of Contents are always hierarchical. Typically chapter titles appear on the first level, subchapter titles appear on the second level, and so on.

The H1, H2, H3 header tags determine what level each TOC entry will assume. If you open up an ePub file in an ePub editor such as Sigil, you can view the XHTML code which creates the content of the ePub. Always keep in mind that an ePub document is really a mini web site, complete with pages of XHTML code, a folder containing images or links to images, and a folder containing a CSS style sheet.

Once you’ve opened your ePub file in an ePub editor such as Sigil, you will notice that chapter titles are usually enclosed within H1 header tags. Any text within an ePub file enclosed within H1 header tags will be assigned to a first-level position in the built-in ePub table of contents. Any text within an ePub file enclosed within H2 header tags will be assigned to a second-level position in the built-in ePub table of contents. The H3, H4, etc. headers follow the same pattern.

Once you have enclosed text inside of one of the header tags, you may apply a CSS style to that tag to achieve the styling and appearance that you want for that text.

In most eBooks, it is desirable to have entries in the ePub’s built-in TOC that do not appear within the text content of the ePub. For example, you may want a first-level TOC entry linked to the Title Page and called “Title Page” within the ePub’s table of contents. You probably do not want that same text – “Title Page” – to appear anywhere on the actual title page in the ePub document.

There is an easy and quick way to achieve this. You can make an object invisible on a page by simply setting the object’s CSS visibility characteristic to “hidden.” You can implement this by applying the following CSS class to any object.

.Hidden_Visibility {
visibility: hidden;
}

If you apply this CSS class to any H1-tagged text, you have created a first-level ePub TOC entry that will not show up on the page which holds that text.