Nesting Your TOC in the NCX File and the NOOK/Kindle Workaround

• Tweet
• Email
• Sumo

• Tweet
• Email

One of the great things about ePUB is that you can create navigational tables of content (TOCs) that have nested content. Essentially your can create drop-down menus in the navigational TOC that will show the subdivisions of your ePUB. Chapters can be nested inside of parts; A-level/h2 heads can be nested inside of chapters; B-level/h3 heads can be nested inside of A-level/h2 heads. This is especially effective if you have non-fiction or fiction content with parts, chapters, and/or multiple levels of heads.

The NCX file creates the navigational TOC that you see to the left of the ePUB in ADE or through the menu TOC in most readers. The NCX navigation begins with the <navMap> markup tag, and it ends with its close tag </navMap>. These are the tags around the whole navigational TOC.

Each individual item that will appear in the navigational TOC with be defined by a navPoint, playOrder, navLabel, and content. The <navPoint> allows you to assign a class to the linked content, give it an id, and assign its playOrder. The <navLabel> is the text that will appear in the navigational TOC, and should be wrapped in a <text> tag. The <content src> is the location or link to the content within the ePUB.

A typical beginning to the NCX navMap would look something like this:

<navMap>
<navPoint class="cover" id="cvi" playOrder="1">
<navLabel><text>Cover</text></navLabel>
<content src="978XXXXXXXXXX_cvi.htm"/>
</navPoint>

Nesting the NCX is accomplished by moving the closing </navPoint> of the first item from immediately after the <content src=""> tag of that individual location to immediately after the last item to be nested under the first item. So for a book organized with parts and chapters within parts, you could nest the first two chapters within Part 1 like this:

<navPoint class="part" id="p01" playOrder="5">
<navLabel><text>Part 1: Preparing for Christmas</text></navLabel>
<content src="978XXXXXXXXXX_p01.htm"/>

</navPoint>

It isn’t complex to nest items in the NCX file in this way, but you must keep track of which navPoints have been closed and which haven’t. To do deeper nesting, you simple include multiple levels of content within <navPoints>. So using the example above, if I wanted to include A heads or <h2> heads, I would just nest these heads within the chapters.  You’ll note also that so far the content src has been file level. To link to locations within chapters, you will need to add anchors by adding id="" tags inline within the chapter files. If you have something like an h2.section style in your CSS, you can add a tag within the <h2> tag in the chapter like this <h2="section" id="c01s001"> or you can add an id as it’s own <a> tag before or after the <h2> tag like this <a id="c01s001"/>. You specify the location in the NCX file by including the id as a hashtag after the chapter file name. So in this case, your would use <content src="978XXXXXXXXX_c01.htm#c01s001">. You could then nest your h2 heads within the navigational TOC like this:

<navPoint id="p01" playOrder="5">
<navLabel><text>Part 1: Preparing for Christmas</text></navLabel>
<content src="978XXXXXXXXXX_p01.htm"/>

<navPoint id="c01" playOrder="6">
<navLabel><text>1. Outdoor Lighting</text></navLabel>
<content src="978XXXXXXXXXX_c01.htm"/>

</navPoint>

Note that the playOrder was changed to reflect the added items in the NCX (for tips on using scripts to renumber the NCX, see our earlier post “Reording NCX playOrder”). Theoretically, you can nest to as deep a level as you want. Practically, you may want to limit it to no more than three or four levels for readability’s sake, and because the NCX display can be limited by an eReader device’s screen size or the column size used in an eReader software.

The Nook/Kindle Workaround

While nested NCX is a great tool, it is not supported on all ePUB reading platforms. Here’s a quick list of where it works and where it doesn’t.

• NOOK no nesting
• Kobo no nesting
• ADE unlimited nesting
• Sony Reader/Sony Reader app unlimited nesting
• iBooks more than 2 (according to sources who have tested on iPad)
• (Kindle no nesting)

Be warned: if you upload and ePUB with a nested NCX to a retailer that does not support nesting, your navigational TOC will only display the top-level items; if you have chapters within parts, only the parts will display. So what do you do for these retailers? There is a workaround that many eBook production people use that, while not providing a true nested navigational TOC, it will give you a visually nested TOC. All you need is the simple non-breaking space:  

To accomplish this you are going to have to de-nest your NCX file first, moving the </navPoint> for each item to immediately following the <content src> tag. You then simply add five non-breaking spaces before the text inside the <navLabel><text> for each level of nesting you want to show. So our example above would look like this if you wanted to visually show nesting on the NOOK:

<navPoint id="p01" playOrder="5">
<navLabel><text>Part 1: Preparing for Christmas</text></navLabel>
<content src="978XXXXXXXXXX_p01.htm"/>
</navPoint>
<navPoint id="c01" playOrder="6">
<navLabel><text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. Outdoor Lighting</text></navLabel>
<content src="978XXXXXXXXXX_c01.htm"/>
</navPoint>
<navPoint id="c01s001" playOrder="7">
<navLabel><text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Outdoor Outlets</text></navLabel>
<content src="978XXXXXXXXXX_c01.htm#c01s001"/>
</navPoint>

<navPoint id=”c01s002″ playOrder=”8″>
<navLabel><text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Testing Your Strings of Lights</text></navLabel>
<content src=”978XXXXXXXXXX_c01.htm#c01s002″/>
</navPoint>

<navPoint id=”c01s003″ playOrder=”9″>
<navLabel><text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Securing Your Ladder</text></navLabel>
<content src=”978XXXXXXXXXX_c01.htm#c01s003″/>
</navPoint>

<navPoint id=”c02″ playOrder=”10″>
<navLabel><text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. Indoor Lighting</text></navLabel>
<content src=”978XXXXXXXXXX_c02.htm”/>
</navPoint>

This will allow you to keep the look of nesting on unsupported readers while still displaying all levels of your NCX.

As new devices for reading ePUBs come on the market, it is important to test things like nested NCX files on them to determine whether it will work. Be sure to QA your ePUBs on your retailers devices, apps, and software so you know where nesting works and where it doesn’t and can adjust your NCX accordingly.

Are you currently using nested NCX files? Do you use the workaround? Which other retailers and devices support nesting?