epubjs
Version:
Render ePub documents in the browser, across many devices
81 lines (79 loc) • 4.8 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/section" /><link rel="prev" href="./ch02s02_0.html" /><link rel="next" href="./ch02s02_2.html" /></head><body>
<p data-origPath="/html/body/section/p[7]">Each list item either contains a single link to a location in the content (as shown
in the example above), a link followed by an ordered list of subheadings, or a <code class="literal">span</code> element (a heading) followed by an ordered list of
subheadings. That’s really all there is to building navigation lists.</p>
<p data-origPath="/html/body/section/p[8]">Let’s take a look at a piece of a more complex table of contents now that we know
what we’re looking at:</p>
<pre class="screen" data-origPath="/html/body/section/pre[2]"><nav epub:type="toc">
<h1>The Contents</h1>
<ol>
<li>
<span>SECTION IV FAIRY STORIESMODERN FANTASTIC TALES</span>
<ol>
<li>
<span>Abram S. Isaacs</span>
<ol>
<li>
<a href="section004.xhtml#s190">
190. A Four-Leaved Clover
</a>
<ol>
<li>
<a href="section004.xhtml#s190-1">
I. The Rabbi and the Diadem
</a>
</li>
<li>
<a href="section004.xhtml#s190-2">
II. Friendship
</a>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</nav></pre>
<p data-origPath="/html/body/section/p[9]">Here we start with two heading levels, one for the section and another for the author
(as indicated by the <code class="literal">span</code> tags that surround the text).
We then have the title of the tale (“A Four-Leaved Clover”), which has additionally
been broken down into parts, for a grand total of four levels of navigable
content.</p>
<p data-origPath="/html/body/section/p[10]">But it’s hard enough to format all these lists for the example, let alone display
them in a reading device without line wrapping getting in the way. This is the point
where aesthetics would win out in the old NCX and the last level would typically be
dropped, since it carries the least structurally-important information. But you’d
have also just sacrificed completeness for visual clarity, an accessibility no-no.
It might not seem like a big issue here, but consider the many levels of depth
typical textbooks contain (numbered and unnumbered) and how difficult it makes
navigating when the structure outline is gone.</p>
<p data-origPath="/html/body/section/p[11]">The HTML5 <code class="literal">hidden</code> attribute arrives at this point to save
the day. This attribute is the promised solution to indicating where visual display
should end without the requirement to remove entries. Since we’ve decided we only
want to visually render down to the level of the tales the author wrote, we can
attach the attribute to the ordered list containing the part links. Removing a
couple of levels for clarity, our previous example would now be tagged as
follows:</p>
<pre class="screen" data-origPath="/html/body/section/pre[3]"><li>
<a href="section004.xhtml#s190">190. A Four-Leaved Clover</a>
<ol hidden="hidden">
<li>
<a href="section004.xhtml#s190-1">I. The Rabbi and the Diadem</a>
</li>
<li>
<a href="section004.xhtml#s190-2">II. Friendship</a>
</li>
</ol>
</li></pre>
<p data-origPath="/html/body/section/p[12]">Now all a sighted reader will be presented is the linkable name of the tale (the
child ordered lists will be invisible to them), but someone using an assistive
technology will still be able to descend to the part level to move around.</p>
</body>
</html>