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

  • Sumo

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 class="chapter" id="c01" playOrder="6">
<navLabel><text>1. Outdoor Lighting</text></navLabel>
<content src="978XXXXXXXXXX_c01.htm"/>
</navPoint>

<navPoint class="chapter" id="c02" playOrder="7">
<navLabel><text>2. Indoor Lighting</text></navLabel>
<content src="978XXXXXXXXXX_c02.htm"/>
</navPoint>

</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 id="c01s001" playOrder="7">
<navLabel><text>Outdoor Outlets</text></navLabel>
<content src="978XXXXXXXXXX_c01.htm#c01s001"/>
</navPoint>

<navPoint id="c01s002" playOrder="8">
<navLabel><text>Testing Your Strings of Lights</text></navLabel>
<content src="978XXXXXXXXXX_c01.htm#c01s002"/>
</navPoint>

<navPoint id="c01s003" playOrder="9">
<navLabel><text>Securing Your Ladder</text></navLabel>
<content src="978XXXXXXXXXX_c01.htm#c01s003"/>
</navPoint>

</navPoint>

<navPoint id="c02" playOrder="10">
<navLabel><text>2. Indoor Lighting</text></navLabel>
<content src="978XXXXXXXXXX_c02.htm"/>
</navPoint>

</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: &nbsp;

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?

12 Responses to “Nesting Your TOC in the NCX File and the NOOK/Kindle Workaround”

  1. The Kobo app on the iPad does nest.

    The Kobo e-ink devices flatten the NCX. If I recall comments on #eprdctn correctly, this is what the Nook does. On the other hand, if you put a nested NCX on the Kindle, it will only display chapter points for the top-level navPoints.

    I have added a feature row for this on the eprdctn wiki: http://wiki.mobileread.com/wiki/Device_Compatibility#NCX_Compatibility

  2. Matthew says:

    David, you are correct, the app/software handles it differently than the Kobo device itself. This further complicates the question of what to do with nested NCX files, though, since files purchased from Kobo will render differently depending on whether a reader is using the device or the software/app. As much as a like using the nesting feature of the NCX, the lack of support makes me think the workaround is not a bad fallback position.

  3. I agree! Sorry, I didn’t mean to sound like I was contradicting you. I was just adding some footnotes to your useful post. 🙂

  4. Due to the no-nesting restrictions for NOOK and Kindle, I only make a single-level NCX on all my eBooks. All hail the lowest common denominator! Cool trick on the non-breaking space for TOC though and thank you for sharing.

  5. Here’s one gotcha that happens with iBooks…

    If you create a main chapter heading with nested elements and you link that chapter heading to an anchor in the table of contents html page, then your chapter heading won’t appear and your nested items will all appear as top-level items (unnested). This is because iBooks hides toc.html pages and also any anchors to one.

  6. And no sooner do I post that I discover that all I had to do was remove the guide elements in the content.opf file (where I had specificed the TOC file) and although the contents page doesn’t appear, my chapter heading does along with its nested elements.

  7. Rafael says:

    Actually, nesting in the Kindle is supported. It just works differently in the ncx file.

    All you have to do to create a directory with its subdirectory is to remove the NavPoint:

    Un Cœur Simple/A Simple Soul

    Here, I created a directory that has its own set of chapters. Every navpoint I create after this will appear as a subdirectory.

    Chapitre 1/Chapter 1

    Notice the navpoint is back. To create a new directory, I remove the Navpoint again:

    La Légende de St. Julien/The Legend of St. Julian

    The Kindle sample doc has several examples of this kind of nesting and it works to at least 1 sublevel. I imagine you can try to hack a 2nd level but I haven’t figured that out yet.

    Also, FYI, when I converted to ePub using Calibre, the nesting was maintained.

  8. Rafael says:

    Hmm, sorry about that post, it seems my code was converted to normal text. Not sure how to correct that.

  9. Rafael says:

    Here os the code, I replaced the < with [ so it doesn't disappear:

    [navPoint class="story1" id="story1" playOrder="3"]
    [navLabel]
    [text]Un Cœur Simple/A Simple Soul[/text]
    [/navLabel]
    [content src="Simple/sschap1.html"/]
    [!--/navPoint removed to create subdirectory--]

    [navPoint class="chap1" id="chap1" playOrder="4"]
    [navLabel]
    [text]Chapitre 1/Chapter 1[/text]

    [content src="Simple/sschap1.html#ch1"/]
    [/navPoint]

    The above is the first directory create with one of its subdirectories. I added 4 more chapters before creating the next subdirectory:

    [navPoint class="story2" id="story2" playOrder="9"]
    [navLabel]
    [text]La Légende de St. Julien/The Legend of St. Julian[/text]

    [content src="Julien/ljchap1.html"/]
    [!--/navPoint removed to create subdirectory--]

  10. Rafael says:

    Ugh, it’s tricky trying to fool the code compiler. I didn’t intentionally omit the [/navLabel]. They should have been in there, I just missed them when changing the < to [.

  11. SeanW says:

    Kindle for PC strips out the TOC levels when I do this:

    1. InDesign CC -> File -> Export -> (choose my nested TOC)
    2. KindleGen in.epub -o out.azw

    Kindle for PC only shows the first level of headings, but my other Kindle for PC books DO show nested TOCs. Yet Kindle Previewer -> View -> NCX View shows the nesting properly.

    Help!

  12. mp3juice says:

    Hi there I am so excited I found your webpage, I really found you by mistake, while I
    was looking on Google for something else, Anyways I am here
    now and would just like to say cheers for a tremendous post and a all round thrilling blog (I
    also love the theme/design), I don’t have time to look over
    it all at the moment but I have bookmarked it and also added your RSS feeds, so
    when I have time I will be back to read a lot more,
    Please do keep up the excellent b.