This blog post is the fourth in my Inside the ePub Format series. In this post, I cover the navigation file.
As you may recall from the previous post, I discuss the importance of the OPF file. The OPF file defines all the contents for your eBook. Within the OPF file is a <spine> element that allows you to list the reading order of each file.
Technically, you only need one file that covers the entire length of your book, so what is the eBook reader to do if someone wants to skip to a certain chapter?
As you can see in the following diagram, there is a single book file with multiple chapters (or sections). Each one of these chapters is a hyperlink (URL) to another location in that one document. The way to create these linkages is to create a navigation document. For the ePub 3.0+ format, you must use a navigation document and that is what I will cover in detail for the remainder of this article.
Inside the navigation document
Now that you have a basic understanding of what the navigation document provides, it is time to take a look at how you create one.
As you can see in the following image, I share a sample of my book’s navigation document. The navigation document is just an xhtml document that follows a specific set of rules.
There are a few things that make a navigation document slightly different than a typical xhtml document. The first thing you will notice is the <html> element, which looks like this:
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops” xml:lang=”en”
As you can see, the epub namespace is in use, informing the reader that the ePub open publication structure (OPS) is in use. Next, you will see the <nav> element in use within the <body> tag and it looks like this:
<nav epub:type=”toc” id=”toc”>
While there are multiple epub types, there is only one required for an ePub document and that is the toc type. The id happens to have the name toc but that is a matter of preference.
If you want the table of contents to look a certain way (and you probably do), you will need to create a stylesheet. This stylesheet allows you to define the look-and-feel of the table of contents. For example, maybe you want the heading to use a specific font or do not want the table of contents to include bullets. You address all these things with the stylesheet. You can see navigation links to the stylesheet in the <head> section like this:
<link rel=”stylesheet” type=”text/css” href=”css_toc.css” />
The table of contents always needs a <title> tag that you also place in the <head> section. This title is a xhtml requirement and will not necessarily display in an eBook reader, and it looks like this:
<link rel=”stylesheet” type=”text/css” href=”css_toc.css” />
Since the special <title> tag may or may not be seen by the person reading your book, you should always add the title of your book and the words Contents or Table of Contents (or similar). You can see I do that in my book with the following two lines:
<h1>Microsoft Project 2013 2016 Fundamentals</h1>
<h2>Table of Contents</h2>
Notice how I use the <h1> and <h2> (or Heading 1 and Heading 2) tags. It is always a good idea to use these standard xhtml tags for your book, but you do not have to. Technically, you do not even have to put these titles in, but you really should as a best practice and to make sure the bookstore you are selling through accepts it as having a proper structure.
The toc navigation links (ordered lists)
The whole purpose of the table of contents is to link chapter and section headings together so the person reading your eBook can easily access them. You do not do this with page numbers because most eBooks do not have page numbers. Most eBooks reflow with the size of the eBook reader’s screen and the type/size of the font in use.
Since you are linking to chapter/section headings, rather than page numbers, you need to create links to these headings in your content files. I cover how you do this in another post.
To create the navigation links, they must be in an html ordered list. Specifically, the ordered list must use the <ol> and <li> tag combinations, not the <ul> and <li> tag combinations. You can read more about ordered lists here.
Most works of fiction just use a flat chapter layout like this: Chapter 1, Chapter 2, Chapter 3, and so on. Creating an ordered list for these types of books is very straightforward, and you can easily create an ordered list for each chapter.
Many non-fiction or technical books will use a nested layout like this:
- Chapter 1
- Chapter 2
- and so on
Creating nested layouts takes a bit more work, and you can see that from the previous image where I show a sample of my own book’s navigation document.
When you create the ordered list, make sure you use the <ol> and <li> tags properly, especially for technical books because if you do not do it right, the eBook reader will not display the information properly. Use the previous image in this article to see how I structure my book as it uses a nested structure.
To create the physical links, you use standard xhtml <a href> tags, like this:
<a href=”FUND01_Intro.xhtml#_toc_cb03aecf19074fc89baad326633a9847″>An Introduction to Project Management</a>
Since the “FUND01_Intro.xhtml” file contains multiple chapters, I link to a unique identifier for that particular heading, rather than just the file itself. I discuss this in another article that focuses on the content files. The text within the <a> and </a> tags is the title of the chapter heading.
Important: eBook reader applications may opt to use the navigation document to create a custom user interface for the person reading your book. It is critical you get those tags right, so there are no problems with the eBook reader software.
Optional navigation elements
As you can see in the previous image where I share a sample of my navigation document, there is a landmarks navigation element at the bottom of the page. This is a special type that allows you to support older ePub formats.
By default, all your navigation elements will display within the eBook reader. However, you can decide whether you want them to display or not using the hidden option. You can see how I hide the older landmarks option in the previous image where I share my sample navigation document.
Navigation documents do not just limit you to creating a table of contents. Technically, you can create nearly any kind of navigation document. For example, you can create a list of figures, a list of tables, a list of footnotes, and much more. To read up on the navigation document standards, follow this link.
If you create an eBook in the ePub 3.0+ format, you need a navigation document. Minimally, the document must include a table of contents. If you want to support the older ePub formats, you should still have a navigation document but also include a hidden landmarks type.
All the links to various chapters must be contained within a single ordered list, using the <ol> tag. Within the <ol> tag, you can have multiple <ol> and <li> tags to create the structure for your book.
For eBook reader applications to know what to use for the navigation document, you must list it in the <manifest> and <spine> elements of your OPF file.