Fixing Adobe InDesign CS3’s ePub files (part 3)

In this final instalment, we look at editing the table of contents file, toc.ncx, part of the ePub file package, as well as taking a quick look at CSS. Our examples are based on the files created for our recent free e-book, Make Do & Cook: Savvy Shopping.

Editing toc.ncx

The toc.ncx file is the publication’s table of contents. Like the content.opf file we dealt with in the previous post, it too is an XML file which you can edit with any plain-text editor (such as Notepad).

And also like the content.opf file, we’ve got two jobs to do here – fix InDesign CS3’s errors and improve slightly on its output. The file produced by InDesign fails to meet the requirements laid out here.

Here’s what the toc.ncx file for Savvy Shopping, produced by InDesign CS3, looks like (as before, the bits in square brackets are my comments, not part of the file):

<ns:ncx xmlns:ns="http://www.daisy.org/z3986/2005/ncx/">
<ns:navMap>
<ns:navPoint>
<ns:navLabel>
<ns:text xmlns:ns="http://www.daisy.org/z3986/2005/ncx/">Cover</ns:text>
</ns:navLabel>
<ns:content src="Cover.html"/>
</ns:navPoint>
<ns:navPoint>
<ns:navLabel>
<ns:text xmlns:ns="http://www.daisy.org/z3986/2005/ncx/">Title_Page</ns:text>
</ns:navLabel>
<ns:content src="Title_Page.html"/>
</ns:navPoint>
[... repeated navPoint tags for subsequent chapters ...]
</ns:navMap>
</ns:ncx>

All entries use the ns: namespace. There is an all-encompassing <ncx> tag. Inside that is a <navMap> tag. And inside that are repeated <navPoint> tags – one per chapter.

Inside each <navPoint> tag there’s a label tag which provides text for contents table or ‘spine’ features in e-readers. For example, this text provides the links in the left-hand column in this example, using Adobe Digital Editions:

Savvy Shopping as seen in Adobe Digital Editions
Savvy Shopping as seen in Adobe Digital Editions

InDesign produces this table of contents if you use its ‘book’ feature, where each section is created as a separate file. You then output the ePub document from the book window.

Actually, if you look closely, you’ll see that the contents of the <navLabel> tags don’t quite match the chapter names in the screenshot above (which is of the amended e-book). InDesign replaces spaces with underscores. So the one bit of tidying up we do with the toc.ncx file is to put the spaces back. However, don’t do this with the names in the <content> tags, such as:

<ns:content src="Title_Page.html"/>

(These are self-terminating tags, in that there is no separate closing tag, but there is a forward slash at the end). The contents of these tags are filenames and have to remain unaltered.

Compliance issues

The remaining tasks are to make the toc.ncx file standards compliant.

First, we edit the opening <ncx> tag. This needs the attribute version=”2005-1″, and you can also take the opportunity to add the appropriate language setting (see the previous post for more info). So our version looks like this:

<ns:ncx xmlns:ns="http://www.daisy.org/z3986/2005/ncx/" xml:lang="en-GB" version="2005-1">

Next, we add two new sections, immediately after the <ncx> tag and before the opening <navMap>.

<ns:head>
<ns:meta name="dtb:uid" content="{unique-ID}"/>
<ns:meta name="dtb:depth" content="1"/>
<ns:meta name="dtb:totalPageCount" content="0"/>
<ns:meta name="dtb:maxPageNumber" content="0"/>
</ns:head>
<ns:docTitle>
<ns:text>{book-title}</ns:text>
</ns:docTitle>

Within the <head> section, the first two items are mandatory. The content of the unique ID part should match the string you used in the content.opf file – eg, an ISBN.

The depth setting reflects how many branches there are on the tree structure of the table of contents. If you have a simple list of chapters, then you use 1. If you have sub-sections nested inside chapters, you’d use 2. If there are sub-sections of sub-sections, then it’s 3, and so on.

The totalPageCount and maxPageNumber apply only to documents in which rigid pagination is enforced. This doesn’t apply to the vast majority of e-books, where text is designed to be fluid. So you could leave out these entries or set them to 0, as we have here.

Obviously, you’ll need to put your own book’s title in place of {book-title}.

The remaining step is more tedious and time-consuming. Every opening <navPoint> tag should have two attributes, id and playOrder.

The id attribute is a unique identifier for the specific <navPoint> tag. It should be simple, with no spaces or punctuation. A version of the chapter title would do fine. So, if this is the <navPoint> tag for Chapter 1 of your book, an id of chapter1 would work fine.

The playOrder attribute simply specifies the order of the chapters. So, in our example above, we would have:

<ns:navPoint id="cover" playOrder="1">
<ns:navLabel>
<ns:text xmlns:ns="http://www.daisy.org/z3986/2005/ncx/">Cover</ns:text>
</ns:navLabel>
<ns:content src="Cover.html"/>
</ns:navPoint>
<ns:navPoint id="titlePage" playOrder="2">
<ns:navLabel>
<ns:text xmlns:ns="http://www.daisy.org/z3986/2005/ncx/">Title Page</ns:text>
</ns:navLabel>
<ns:content src="Title_Page.html"/>
</ns:navPoint>

With these changes, your ePub e-book should sail through epubcheck with flying colours.

The CSS file

There’s also a CSS file in the ePub package, called template.css. This provides the styling for the book, including setting fonts. This is a whole subject in itself, but there are just a couple of observations to be made here.

InDesign CS3 doesn’t generally embed the fonts in the ePub package. It creates a CSS file that assumes the fonts specified in the InDesign paragraph and character styles will be found on the user’s machine. That ain’t necessarily so.

Unfortunately, it doesn’t specify ‘fallback’ fonts should the user not have the fonts you wanted. It’s worth fixing that.

One way is to edit the template.css file for each book. Open it in a text editor. Ignore the opening sections which start, @font-face. But in the main section, where the styles are defined for each paragraph style, add a fallback font wherever you see ‘font-family’ used.

For example, InDesign produced the following for Savvy Shopping:

p.headings-titlepagebooktitle {
    font-family: "Adobe Garamond Pro";
    [... other stuff ...]
}

There’s no fallback should users not have Adobe Garamond Pro on their machines. So we change this to:

    font-family: "Adobe Garamond Pro", serif;

In that case, the user’s machine will use its default serif font, whatever that may be. Don’t be tempted into entering long lists of your favourite fonts. Just use serif, sans-serif, cursive or monospace as appropriate. (You could use ‘fantasy’ too, but that could produce some nasty effects.)

We’ve eased this burden by creating an all-purpose CSS file for all our books. We created an InDesign document that uses all the paragraph and character styles we’ve defined for our print books. Then we modified these styles, selecting very common fonts (Times New Roman for serif, Arial for sans-serif), output an ePub package and then edited the template.css file, making slight adjustments and adding the generic fallback fonts.

Now, whenever we output an e-book from InDesign, we simply replace the template.css file with our standard one. That means we can have any fonts and font sizes in the InDesign layout we want, giving us great flexibility in the design for the print version. These are all replaced with settings more appropriate to e-books simply by replacing the template.css file.

Resources:

« Part 1 – Introduction
« Part 2 – Fixing the content.opf file

 

Leave a Reply

Your email address will not be published. Required fields are marked *