epubjs
Version:
Render ePub documents in the browser, across many devices
60 lines (57 loc) • 4.11 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Getting Around: Navigating an EPUB</title>
<link rel="stylesheet" type="text/css" href="css/epub.css" />
<meta name="dat-origPath" value="/html/body" /><link rel="prev" href="./ch02_14.html" /><link rel="next" href="./ch02s02_1.html" /></head><body>
<h2 class="title" id="_getting_around_navigating_an_epub" data-origPath="/html/body/section/h2">Getting Around: Navigating an
EPUB</h2>
<p data-origPath="/html/body/section/p[1]">We’ve gone over a number of ways to assist in accessible navigation by improving the
structure and semantics of your content, but navigating at the content level is only
a complement to a good table of contents. EPUB 3 includes a new declarative means of
creating tables of contents called the navigation document, which is a fancy way of
saying that you can now create a special kind of XHTML document for reading systems
to provide their own built-in navigation mechanism(s).</p>
<aside class="note" title="Note" data-origPath="/html/body/section/aside">
<h3 class="title">Note</h3>
<p>Note that the navigation document is not necessarily the same as the table of
contents at the start of the book or at the beginning of a section. The
navigation document is primarily intended for reading system use, but can also
be included as content if it can serve both roles.</p>
</aside>
<p data-origPath="/html/body/section/p[2]">Declarative tables of contents are not new to EPUB 3, however. EPUB 2 had a file
format called the NCX for this purpose, which was taken from the DAISY talking book
standard (and that format can still be included in EPUB 3 publications for forwards
compatibility with older reading systems). But the NCX was a complex solution to a
much simpler problem, and actually hindered accessibility in this new context, as
its lack of intrinsic display controls led to navigation levels being chopped off to
improve visual rendering.</p>
<p data-origPath="/html/body/section/p[3]">So, to strike back up on a common theme, not all markup is created equal, and the
quality of your table of contents for navigation is a reflection whether you put the
full structure of your publication in it or not. The new navigation document
fortunately gives you the best of both worlds in that it doesn’t require the
decision to pick either visual clarity or full accessibility to be made.</p>
<p data-origPath="/html/body/section/p[4]">Let’s take a quick tour through the actual creation process to see how this is done
for both reading groups.</p>
<p data-origPath="/html/body/section/p[5]">The navigation document uses the new HTML5 <code class="literal">nav</code> element
to define various kinds of navigation lists, as more than just a table of contents
can be included in it. But as a primary table of contents is required in every EPUB,
we’ll begin by looking at a very minimal example:</p>
<pre class="screen" data-origPath="/html/body/section/pre[1]"><nav epub:type="toc">
<h1>Contents</h1>
<ol>
<li>
<a href="chapter_001.xhtml">Chapter 1. Loomings.</a>
</li>
<li>
<a href="chapter_002.xhtml">Chapter 2. The Carpet-Bag.</a>
</li>
</ol>
</nav></pre>
<p data-origPath="/html/body/section/p[6]">The <code class="literal">epub:type</code> attribute identifies that this <code class="literal">nav</code> element represents the table of contents (via the
“toc” value). But if the rest of the navigation list looks like nothing more than an
ordered list of links, that’s because that’s exactly what navigation lists are. The
<code class="literal">nav</code> element should include a heading, but after
that it only ever includes a single <code class="literal">ol</code> element.</p>
</body>
</html>