EPUB Region-Based Navigation

Draft Specification 14 November 2014

This version:

http://www.idpf.org/epub/renditions/region-nav/epub-region-nav-20141114.html

Latest version:

http://www.idpf.org/epub/renditions/region-nav

Previous version:

http://www.idpf.org/epub/renditions/region-nav/epub-region-nav-20140827.html

All rights reserved. This work is protected under Title 17 of the United States Code. Reproduction and dissemination of this work with changes is prohibited except with the written permission of the International Digital Publishing Forum (IDPF).

EPUB is a registered trademark of the International Digital Publishing Forum.

Editors

Matthieu Kopp (Aquafadas), Brady Kroupa (Barnes & Noble), Jim Lester (Barnes & Noble), Matt Garrish (Invited Expert)

Authors

Takeshi Kanai (Sony), Jim Lester (Barnes & Noble), Brady Kroupa (Barnes & Noble), Garth Conboy (Google), Brady Duga (Google), MURATA Makoto (JEPA), Theresa O’Connor (Apple), Hadrien Gardeur (Feedbooks)

Status of this Document

This specification is a work in progress and subject to change.

All comments on this specification should be submitted via the EPUB 3 Working Group Issue Tracker, hosted on Google Code. NOTE: you must login via a Google Account in order to submit an issue. Please submit spec comments with the labels "Type-ReviewComment" and "Spec-AHL". Members of the EPUB Working Group may submit questions via the mailing list.

Table of Contents

1. Overview

1.1 Purpose and Scope

1.2 Terminology

1.3 Conformance Statements

2. The Data Navigation Document

2.1 Introduction

2.2 Content Conformance

2.3 Reading System Conformance

2.4 Data Navigation Document Definition

2.5 Identification

3. Region-based Navigation

3.1 Introduction

3.2 Content Conformance

3.3 Reading System Conformance

3.3 The region-based nav Element

3.3.1 Introduction

3.3.2 Content Model

3.3.3 Reading System Behaviors

3.3.4 Subregion Navigation

3.3.5 Examples

3.4 Defining Regions of Interest

3.5 Region of Interest Metadata

3.5.1 Introduction

3.5.2 Metadata Properties

Appendix A. Region-Based Navigation Examples

A.1 Controlling the narrative steps through subregions

A.2 Synthetic regions on synthetic spreads

Appendix B. Magazine Examples

Appendix C. Acknowledgements

Appendix D. Contributors

References

Normative References

1. Overview

1.1 Purpose and Scope

This section is informative

This specification, EPUB Region-Based Navigation, introduces conventions for region-based navigation through a visual rendition of a Publication based on Regions of Interest. It introduces the EPUB® Data Navigation Document for defining purely machine-processable navigation components, and defines a new intra-document navigation type to allow reading progression at the sub-page level.

This document does not specify how such region-based navigation is required to behave, but rather allows different Reading Systems to provide different behaviors.

1.2 Terminology

Refer to the EPUB Specifications for definitions of EPUB-specific terminology used in this document.

Region of Interest (also Region)

An area of a EPUB Content Document, whether the entire document or a geometric region within it, that can be presented in isolation without losing its meaning, or its meaning within the context of the document.

1.3 Conformance Statements

The keywords must, must not, required, shall, shall not, should, should not, recommended, may, and optional in this document are to be interpreted as described in [RFC2119].

All sections of this specification are normative except where identified by the informative status label "This section is informative". The application of informative status to sections and appendices applies to all child content and subsections they may contain.

All examples in this specification are informative.

2. The Data Navigation Document

2.1 Introduction

The EPUB Navigation Document is a User-facing document that allows access to the links in any navigation component regardless of whether a custom component defined by an Author or a standard IDPF-defined component.

The required structure enforced on nav elements to ensure the links can always be easily accessed does not lend itself to navigation components that are not intended for direct User consumption, however. The region-based nav element defined in this specification is one example of a navigation component intended to influence Reading System navigation without the links being directly accessible to Users, and that does not lend itself to the existing content restrictions.

To address the need for purely machine-processable navigation components, this specification introduces a new type of navigation document: the Data Navigation Document. This document removes the restrictions of the EPUB Navigation Document, as it is not intended for direct presentation to Users.

2.2 Content Conformance

A conformant Data Navigation Document must meet all of the following criteria:

› It must conform to all content conformance constraints for XHTML Content Documents as defined in XHTML Content Documents — Content Conformance [ContentDocs301].

› It must conform to all content conformance constraints specific to Data Navigation Documents expressed in 2.4 Data Navigation Document Definition.

› It must be identified in the EPUB Package Document as defined in 2.5 Identification.

2.3 Reading System Conformance

A conformant EPUB Reading System must meet all of the following criteria for processing Data Navigation Documents:

› It must ignore navigation components whose epub:type attribute specifies an unrecognized type.

› It should not provide direct access to any navigation component unless the component's definition allows such.

2.4 Data Navigation Document Definition

Each navigation component in the Data Navigation Document must be defined in a separate [HTML5] nav element. Each nav element must have an epub:type attribute [ContentDocs301] that identifies the nature of the navigation component it contains.

This specification enforces no requirements on the contents of the nav elements; each specification that defines a navigation component for inclusion in the Data Navigation Document can define its own content model.

As the Data Navigation Document is not intended for direct User consumption, it should not be included in the spine.

2.5 Identification

The Data Navigation Document is identified in the EPUB Package Document manifest [Publications301] by the property "data-nav".

Only one XHTML Content Document may be identified as a Data Navigation Document.

3. Region-based Navigation

3.1 Introduction

This section is informative

The ability to create a guided reading experience through the content of a Publication is an important requirement in comics, manga, magazines, and other forms of image-based content, both because screen sizes often limit how much of the content can be displayed to a User at any given time and because intra-page navigation may not follow a simple linear progression.

In its simplest form, region-based navigation can be represented as an ordered sequence of Regions of Interest that a Reading System will render in turn as the User navigates through the work. There can be one or more of these sequences to a document (e.g., panels in a comic, articles in a magazine), and each sequence can include nested subregions of interest, such as speech balloons, to be navigated as part of the guided flow.

For example, consider this typical page of a comic, which consists of six distinct panels of content:

The natural reading flow is left-to-right and top-to-bottom, with the two panels in the lower left having to be read top-to-bottom before moving to the next panel to the right. The logical progression through these panels—the sequence in which to view each Region—can thus be delineated as follows:

If this complete image were scaled to a small device screen, such as a cellphone, each of the individual panels would be very difficult to read, bordering on illegible. By breaking the image down into its constituent Regions as above, however, a Reading System on such a device could instead navigate to each in turn as the User progresses through the work, thereby maximizing the visibility of each panel.

The Reading System might constrain and center each panel within the viewport automatically, with content on screen that isn’t a part of the Region potentially being obscured with a transparent letterboxing or not shown at all.

The following image shows how the Regions could be focused on a cellphone screen, using a semi-transparent letterboxing effect to obscure the surrounding areas:

To enable this form of region-based navigation in EPUB 3, this specification defines the Data Navigation Document and adds to it a the region-based nav type. It also adds optional semantics to identify Regions. This section covers these new features and how they can be used to enable the kind of region-based navigation experience explained above.

3.2 Content Conformance

A conformant Region-Based Navigation component must meet all of the following requirements:

› It must be included in the Data Navigation Document.

› It must adhere to all content requirement in in 3.3.2 Content Model.

3.3 Reading System Conformance

A conformant Reading System must meet all of the following criteria:

› It must support all behaviors in 3.3.3 Reading System Behaviors.

› If the Reading System supports navigation through subregions, it must adhere to all requirements defined in 3.3.4 Subregion Navigation.

3.3 The region-based nav Element

3.3.1 Introduction

This specification defines a "region-based" nav element for inclusion in the Data Navigation Document. The sequence of list items in the region-based nav defines a possible path through the content at a more granular level than the spine [Publications301] allows, where each descendant a element defines a unique Region of Interest in the path.

This navigation type is defined to enable a Reading System to change the way that forward and backward progression through the content occurs (i.e., it overrides spine navigation). Consequently, the links in the region-based nav are designed not to be directly accessible.

The following example shows a region-based nav with only one level of navigation. Each a element is empty as the Reading System automatically maps forward navigation to each in turn.

<ol>

…

</ol>

</nav>

3.3.2 Content Model

At the root of the region-based nav must be exactly one [HTML5] ol element.

Each list item child of the root ol element represents a Region of Interest, the location and dimensions of which are expressed in the href attribute of a child a element. If a Region consists of two adjacent regions, a span element must wrap both a elements.

The IRI [RFC3987] defined in the href attribute may include a media fragment [MediaFrag] that defines, or identifies, the Region. Additional information on the expression of media fragments is included in 3.4 Defining Regions of Interest.

As the links in the region-based nav are not designed to be directly selectable by Users, descendant a elements should not contain text labels.

The a elements may contain comic-specific properties in child meta elements using [RDFa11] attributes, as detailed in 3.5 Region of Interest Metadata.

The following example shows a metadata property identifying the character in a Region.

</a>

Note that although RDFa attributes are used to express the metadata, RDFa processing of the region-based nav is optional.

The a or span element may be followed by a single sibling ol element, which represents navigation within that region. Refer to 3.3.4 Subregion Navigation for more information.

Authors may include more than one region-based nav element in the Data Navigation Document, but Reading Systems must treat the first region-based nav in the document as the default for navigation.

Each subsequent region-based nav element must include a descriptive title in a title attribute. Reading Systems should present these titles to Users when providing the option to select an alternative guided view.

The following example shows a region-based nav element with a descriptive title and another that indicates a reading-specific preference.

<ol>

…

</ol>

</nav>

<ol>

…

</ol>

</nav>

3.3.3 Reading System Behaviors

When Region-based navigation is activated, a Reading System must map User navigation actions to progression through the topmost ordered list.

The nestable structure of ordered lists in the region-based nav represents ever more granular Regions of Interest (i.e., Regions within Regions). Reading Systems that support this nav type must support navigation via the list items of the topmost ordered list in the nav, in the sequence in which they have been ordered, and must present the Regions identified in these list items such that they take up the maximum available space in the viewport.

Support for navigation via subregions (nested ordered lists) is optional.

The following example shows the identification of subregions within a Region.

<ol>

<li><a href="page47.jpg#xywh=percent:7,7,60,17"></a> // Panel P1

<ol>

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R1

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R2

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R3

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R4

</ol>

</li>

<li><a href="page47.jpg#xywh=percent:70,7,22,17"></a> // Panel P2

<ol>

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R5

</ol>

</li>

</ol>

</nav>

A Reading System that supports subregion navigation should skip the parent nodes and therefore display the subregions directly. If the intent of the authoring of navigation for that document is to guarantee that the full panel is displayed before showing the individual regions, then an additional child node should be added to the list, as discussed in Appendix A. The Reading System should ignore the parent nodes when traversing the hierarchy.

Reading Systems that support subregion navigation may merge subregions. Merging is a way for Reading Systems to minimize the pan and zoom required to show all regions of the navigation sequence.

Merging should only happen between siblings to allow the specification of a regional scope for merging subregions. In the example above, ensuring that R2 and R3 are not merged by the Reading System is simply achieved by adding another hierarchy level.

The following example shows the control of merging between subregions.

<ol>

<li><a href="page47.jpg#xywh=percent:7,7,60,17"></a> // Panel P1

<ol>

<li><a href="page47.jpg#xywh=percent:..."></a> // R1+R2

<ol>

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R1

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R2

</ol>

</li>

<li><a href="page47.jpg#xywh=percent:..."></a> // R3+R4

<ol>

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R3

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R4

</ol>

</li>

</ol>

</li>

<li><a href="page47.jpg#xywh=percent:70,7,22,17"></a> // Panel P2

<ol>

<li><a href="page47.jpg#xywh=percent:..."></a></li> // R5

</ol>

</li>

</ol>

</nav>

In the above example, R1 and R2 can be merged together if the Reading Systems decides that the screen size does allow for the 2 regions to be shown at once. The same applies to R3 and R4.

3.3.4 Subregion Navigation

This specification does not define behaviors for subregion navigation, but, to assist navigation, the epub:type attribute may be attached to any list item (li) to indicate the specific nature of structure being navigated. Reading Systems may use these semantics to optimize the handling of different subregion types.

The following example shows the identification of two speech balloons within a Region.

<ol>

<ol>

</li>

</li>

</ol>

</li>

</ol>

</nav>

NOTE

The comics section of the EPUB 3 Structural Semantics Vocabulary [StructureVocab] and the EPUB 3 Magazine Vocabulary [MagazineVocab] define semantics for use with subregions.

3.3.5 Examples

The following example shows a navigation sequence that includes child Regions within the panels.

Consider again the SVG image from the 3.1 Introduction, but this time focusing on the regions inside each panel:

There are four text balloons inside Region 1, two inside each of Region 2 and 3, and one in each of the remaining three Regions. The following markup shows how these subregions can be marked up using nested ordered lists:

<ol>

<ol>

</ol>

</li>

<ol>

</ol>

</li>

…

</ol>

</nav>

From this hierarchical navigation sequence, the basic Reading System behavior would be to first show each parent Region in full and then navigate to the child Regions in sequence. Since there is no extra information about these child Regions (i.e., no epub:type attribute specified), the Reading System will simply go in sequence from one to the other.

For Region 1, the display sequence would be:

An example of the use of epub:type attributes in the context of a magazine content referencing the EPUB 3 Magazine Vocabulary [MagazineVocab] is given in the Appendix B.

3.4 Defining Regions of Interest

Regions of Interest may be identified using media fragments [MediaFrag]. When referencing into a image, rectangular Regions can be specified using the following syntax:

#xywh=percent:#,#,#,#

The x and y coordinates of the top-left corner the Region, and width (w) and height (h) of the rectangle, are represented in terms of a percentage of the image source, rather than specific pixel values, so that the regions remain the same regardless of changes in the image size.

The following example shows a series of rectangular regions, two separate ones on the first page and one on the second.

</ol>

</nav>

A circular Region is denoted by the name xyr. The value is an optional format pixel or percent (defaulting to pixel) and 3 comma-separated integers. The integers denote x, y, and radius, respectively, with x=0, y=0 being the top left corner of the image. The radius value is interpreted as a percentage of width of the image.

xyrprefix=%x78.79.72 ; "xyr"
xyrparam = [ xyrunit ":" ] 1*DIGIT "," 1*DIGIT "," 1*DIGIT
xyrunit = %x70.69.78.65.6C ; "pixel"
/ %x70.65.72.63.65.6E.74 ; "percent"

A polygonal Region is denoted by the name xyn. The value is an optional format pixel or percent (defaulting to pixel) and an even number of integers. The (2i-1)-th and 2i-th integers denote x and y of the i-th point, respectively, with x=0, y=0 being the top left corner of the image.

If percent is used, (2i-1)-th is interpreted as a percentage of the width of the original media, and 2i-th integer is interpreted as a percentage of the original height.

xynprefix=%x78.79.6e ; "xyn"
xynparam = [ xynunit ":" ] 1*DIGIT "," 1*DIGIT *("," 1*DIGIT "," 1*DIGIT)
xynunit = %x70.69.78.65.6C ; "pixel"
/ %x70.65.72.63.65.6E.74 ; "percent"

Regions of Interest can also be represented using SVG regions. In the absence of an extended media fragment, it is recommended to reference the Region in the external SVG which defines the image and shapes.

For example, the following link includes a reference to an element within the SVG:

The referenced file defines the Region of Interest to highlight in the circle with the ID regionOfInterest1:

…

</svg>

While the definition of Regions of Interest described above does not support the definition of regions across pages in a synthetic spread, it is nonetheless possible to create a synthetic region using the span tag:

<li>

<span>

<a href="page22.jpg#xywh=percent:75,0,25,25"></a> // roi-left

<a href="page23.jpg#xywh=percent:0,0,25,25"></a> // roi-right

</span>

</li>

The above example would represent half a panel on page 22 to the left, and the other half on page 23 on the right. The behavior in portrait orientation would be for the Reading Systems to show each panel individually. In landscape orientation (and even portrait), Reading Systems could optimize this as a merged region spanning two pages.

3.5 Region of Interest Metadata

3.5.1 Introduction

This section is informative

The region-based nav allows each Region of Interest to be annotated with content metadata. This metadata identifies significant features of the Region so that Reading Systems can more intelligently render the content (e.g., matching the background color to complement the Region).

As this metadata is not structural, it is expressed using [RDFa11] attributes on child meta elements of the a element that identifies the Region.

3.5.2 Metadata Properties

The "ahl:" prefix used in this section is bound to the IRI "http://www.idpf.org/epub/vocab/ahl".

To use the properties defined in this section in the Data Navigation Document, the ahl: prefix must be declared using the [RDFa11] prefix attribute. This declaration is typically included on the region-based nav root:

but can be included on any ancestor element (e.g., the body or root html elements).

The Cardinality fields in the following tables indicate the number of times the property can be included as the child of an a element.

ahl:primary-color
Description:	Identifies the main color of the Region. For example, in a zoomed-in Region of a comic panel, the primary color may be light or white, so this value could be “#ffffff”. The Reading System could then use this information to set the background color to white to make it complement the Region.
Allowed value(s):	A CSS color value [CSS21].
Cardinality:	Zero or one.
Example:	<li> <a href="page22.jpg#xywh=percent:5,5,95,95"> <meta property="ahl:primary-color" content="#ffffff"/> </a> </li>

ahl:character-name
Description:	A string that identifies the name of a character in the work.
Allowed value(s):	Text.
Cardinality:	Zero or one.
Example:	<li> <a href="page22.jpg#xywh=percent:5,5,95,95"> <meta property="ahl:character-name" content="Batman"/> </a> </li>

Appendix A. Region-Based Navigation Examples

This section is informative

A.1 Controlling the Narrative Steps through Subregions

Consider the following comic panel with four subregions

The following markup could be used to define the progression through the three primary subregions:

<ol>

<li><a href="page14.jpg#xywh=percent:0,0,100,100"></a> // Panel P1

<ol>

<li><a href="page14.jpg#xywh=percent:..."></a></li> // R1

<li><a href="page14.jpg#xywh=percent:..."></a></li> // R2

<li><a href="page14.jpg#xywh=percent:..."></a></li> // R3

</ol>

</li>

</ol>

</nav>

The first list item defines the panel (P1) and each list item in the nested ordered list defines one of the three subregions R1, R2 and R3 within that panel.

When this panel is viewed in a Reading System that supports region-based navigation, the following narration progression would occur through the three primary regions:

Since the Reading System is expected to skip the full panel when moving through subregions, the transition from the previous page would immediately show subregion R1 (i.e., panel P1 is skipped).

In order view the full panel before or after seeing all the details, a subregion matching the geometry of the panel has to be inserted. Subregion R4 in the initial graphic is an example, and could be included with the other regions in the nested list as follows:

<ol>

<li><a href="page14.jpg#xywh=percent:0,0,100,100"></a> // Panel P1

<ol>

<li><a href="page14.jpg#xywh=percent:..."></a></li> // R1

<li><a href="page14.jpg#xywh=percent:..."></a></li> // R2

<li><a href="page14.jpg#xywh=percent:..."></a></li> // R3

<li><a href="page47.jpg#xywh=percent:0,0,100,100"></a></li> // R4

</ol>

</li>

</ol>

</nav>

The Reading Systems would now include the scaled panel after the third subregion as illustrated in the following graphic:

A.2 Synthetic Regions on Synthetic Spreads

The following image shows subregions that alternate from left to right as the User moves from top to bottom. Complicating navigation is that the each adjacent region is on a separate page in a synthetic spread:

In order to allow the reader to both move from subregion to subregion, but also provide flexibility for the Reading System to combine the adjacent subregions into a single synthetic region for viewing (if there is space), synthetic regions can be identified by wrapping each pair of adjacent subregion definitions span elements, as shown in the following code:

<ol>

<span>

<a href="page14.jpg#xywh=percent:6,6,94,22"></a> // roi1l

<a href="page15.jpg#xywh=percent:0,6,94,22"></a> // roi1r

</span>

</li>

<span>

<a href="page14.jpg#xywh=percent:6,29,94,28"></a> // roi2l

<a href="page15.jpg#xywh=percent:0,29,94,28"></a> // roi2r

</span>

</li>

<span>

<a href="page14.jpg#xywh=percent:6,58,94,34"></a> // roi3l

<a href="page15.jpg#xywh=percent:0,58,94,34"></a> // roi3r

</span>

</li>

</ol>

</nav>

Appendix B. Magazine Examples

This section is informative

The following image shows a magazine page that contains 2 articles (blue and orange frames) and one advertisement (green frame):

Assuming that this image has the filename "page22.jpg", the subregions for this page could marked up as follows:

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml"

epub:perfix="msv:http://www.idpf.org/epub/vocab/magazine/# prism: http://www.prismstandard.org/specifications/3.0/PRISM_CV_Spec_3.0.htm#"

xmlns:epub="http://www.idpf.org/2007/ops">

…

<ol>

...

<ol>

<li epub:type="msv:article-text"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // first column

<li epub:type="msv:article-text"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // second column

<li epub:type="msv:article-text"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // third column

<li epub:type="msv:article-text"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // forth column

<li epub:type="msv:media"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // photograph

<li epub:type="prism:caption"><a href="page22.jpg#xyn=percent:..,..,..,.."></a></li> // caption without credit

<li epub:type="prism:credit"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // caption without credit

</ol>

</li>

<ol>

<li epub:type="msv:article-text"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // single column

<li epub:type="msv:media"><a href="page22.jpg#xywh=percent:..,..,..,.."></a></li> // photograph

</ol>

</li>

</li>

</ol>

</nav>

…

</html>

In the case of right-to-left reading, the Reading System could adopt the reverse progression through the text region using this same information. It might have to add some additional metadata to those regions, however, particularly for "article-text" regions which contain the bulk of the text.

In the case of a multi-page article, subregions would be used to define the boundaries of the article on each page, as in the example below:

The markup for each of these article regions and their subregions would look like this:

<nav epub:type="region-based">
<ol>
<li> // the region sequence for the region-sequence #1 on pages 2,3 and 4 (red)

<ol>
<li epub:type="msv:article-region"><a href="page2.jpg#xyn=percent:.."></a>
<ol>
                ... // the regions of the article on page 2
</ol>
</li>
<li epub:type="msv:article-region"><a href="page3.jpg#xyn=percent:.."></a>
<ol>
                ... // the regions of the article on page 3
</ol>
</li>
<li epub:type="msv:article-region"><a href="page4.jpg#xyn=percent:.."></a>
<ol>
                ... // the regions of the article on page 4
         </ol>
</li>

</ol>
</li>

// the region sequence for the next article on page 4 : region-sequence #2 (green)
<li epub:type="msv:article-region">

<a href="page4.jpg#xywh=percent:.."></a>
<ol>
... // the regions of the article 2 on page 4

</ol>
</li>
</ol>
</nav>

This approach provides the Reading System with extra information about the region boundaries, but it would be possible to create the same multi-page navigation sequence without the article-region definitions. For example:

<nav epub:type="region-based">
<ol>
<li> // the region sequence for the region-sequence #1 on pages 2,3 and 4 (red)
<ol>
... all regions from the article in pages 2,3 and 4
</ol>
</li>
...
</nav>

Appendix C. Acknowledgements

The illustrations used in this specification are taken from the following works and are reproduced with authorization from their respective publishers.

Author : Mara

Published : 06/2008

Drawing: François Boucq

Story: Alexandro Jodorowsky

Published: 06/2001