EPUB Region-Based Navigation Markup Guide

Informational Document 2 December 2014

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.

Table of Contents

2.1 msv:article-region

2.6 prism:contributors

2.7 msv:media

2.8 prism:caption

2.9 prism:credit

2.10 msv:article-text

2.11 prism:box

2.12 prism:advertisement

2.13 prism:pullQuote

Appendix A. Acknowledgements

Appendix B. Contributors

This document relies on the concept of a Region of Interest (ROI) as defined in EPUB Region-Based Navigation . ROIs are used in guided navigation through the concept of navigation sequences. The latter are ordered sequences 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 article components, to be navigated as part of the guided flow.

1. Comics

The terms described in this section are defined in the EPUB 3 Structural Semantics Vocabulary and can be use without a prefix in the epub:type attribute.

1.1 panel

The panel term is used to identify a single frame or drawing. The following image shows a single panel highlighted in green:

By identifying each panel, a Reading System can provide sequential navigation through the publication.

For example the following example shows how an image can be broken down into a set of six individual panels:

These panels would be marked up as follows:

<ol>

<li epub:type="panel"> // roi1

</li>

<li epub:type="panel"><a href="page23.xhtml#…"/></li> // roi2

<li epub:type="panel"><a href="page23.xhtml#…"/></li> // roi3

<li epub:type="panel"><a href="page23.xhtml#…"/></li> // roi4

<li epub:type="panel"><a href="page23.xhtml#…"/></li> // roi5

<li epub:type="panel"><a href="page23.xhtml#…"/></li> // roi6

</ol>

A reading system that supports region-based navigation c ould then provide a guided experience similar to the following on a phone-sized screen:

1.2 panel-group

The panel-group term i dentifies a group of panels (e.g., a strip), which allows the reading system to isolate those panels to focus the reader’s attention.

For example, a page could consist of three panel groups, each consisting of three panels, as shown in the following illustration:

Each of these panel groups will define its child panels in nested ordered lists, as shown in the following markup:

<ol>

<ol>

</ol>

</li>

…

</ol>

The reading system can then present the full panel group followed by each individual panel before moving on to the next group, as shown in the following image:

1.3 balloon

The balloon term identifies a region that contains the words, spoken or thought, of a character.

For example, a dialogue balloon is highlighted in green in the following image:

The balloon would be identified as follows:

<ol>

<ol>

…

</ol>

</li>

…

</ol>

Identifying these regions allows the reading system to traverse them with each panel. For example, if all the balloons were identified as follows:

the reading system could zoom into the subregion identified by the balloon:

1.4 text-area

The text-area term identifies a ny region with text regardless whether it is contained or associated with a balloon .

In the following example, the text area is defined on the cover:

This text region would be identified as follows:

<ol>

<ol>

…

</ol>

</li>

…

</ol>

Text areas can be used in navigation sequences in the same way as balloons. The reading system can zoom on the subregions defined by text areas in the same way as it can zoom balloons.

Alternatively, the text area inside a balloon could be identified using such a region as in the example below. The green text area can be used to refine the location of the text inside the (red) balloon.

1.5 sound-area

The sound-area term identifies an area on the page that represents a sound.

For example, the sound of a door closing is highlighted in green in the following image:

This sound would be identified as follows:

<ol>

<ol>

…

</ol>

</li>

…

</ol>

2 . Magazines

The terms described in this section with a " prism: " prefix are defined in the PRISM Controlled Vocabularies specification .

The terms with an " msv: " prefix are defined in the EPUB Magazine Navigation Vocabulary .

Both of these are reserved prefixes and do not need to be declared for use in the epub:type attribute.

2.1 msv:article-region

The msv:article-region term identifies the boundaries of an article on a page.

I n the following image, the article spans two pages, which results in two such regions of interest (highlighted in blue):

The markup for these regions would be as follows:

</li>

…

</li>

In the same way that a reading system uses the " panel- group " term in comics to isolate a strip/story on the page, the use of msv:article-region in a guided reading context can be used to isolate the article from the rest of the page. The reading system could opt to blur, hide or mask the page content that is outside the article when inside the navigation sequence.

2.2 prism:title

The prism:title term identifies a region that contains the title of the article, as highlighted in the blue box in the following image:

The title can be identified as top-level region of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

</li>

…

</ol>

</li>

In the case of sequential navigation, the title is expected to be displayed in full on the device.

To improve the readability of the title, do not include related items like the deck and subtitle in the region.

2.3 prism: subtitle

The prism:subtitle term identifies a region that contains the subtitle. The subtitle differs from a deck in that appears in close proximity to the title and typically only one subtitle is present , whereas the deck can be located anywhere and there could be multiple instances.

An article subtitle is highlighted in blue in the following image:

The subtitle can be identified as top-level region of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

</li>

</li>

…

</ol>

</li>

In the context of navigation, the subtitle will typically be treated similar to the title .

2.4 prism:deck

The prism:deck term identifies a region that contains a summary of the article or a block of text that augments the title or provides a "teaser" to attract a reader. A deck may span multiple lines, and an article may have multiple decks.

An article deck is highlighted in blue in the following image:

The deck can be identified as top-level region of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

</li>

</li>

…

</ol>

</li>

In the context of navigation, the deck will typically be treated similar to the title .

2.5 prism: byline

The prism:byline term identifies a region that contains information about the author(s). In many cases this region may simply contain the author name, but in some situations it will also contain additional context, such as position, role or context of the article.

Bylines typically appear next to the title of the content. The prism:byline term can also be used for the dateline.

An article byline is highlighted in blue in the following image:

The byline can be identified as top-level region of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

</li>

</li>

…

</ol>

</li>

In the context of navigation, the byline will typically be treated similar to the title .

2.6 prism:contributor s

The prism:contributors term identifies a region that contains information about the contributor(s). In many cases this region may simply contain the contributor name, but in some situations it will also contain additional context, such as position, role or context of the article.

I n the following image, the contributor is mentioned at the end of the article as being the one person who conducted the interview (as opposed to the author who wrote the article):

The contributors can be identified as top-level region of interest, or can be nested inside of an msv:article- region . In both cases, the markup for the region is the same:

<ol>

…

</li>

</li>

</ol>

</li>

In the context of navigation, contributors are typically treated similar to the article text .

2.7 msv:media

The msv:media term identifies a region that contains an image, illustration, video, slideshow, animation or other piece of media allowed by the format.

A picture is highlighted in blue in the following image:

Media items can be identified as top-level regions of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

…

</li>

…

</ol>

</li>

It is expected that reading systems will display media regions in full, scaling to fit the available viewport.

For an example of media that spans two pages, see Synthetic Regions in the EPUB Region-Based Navigation specification. An example is provided in Appendix A.2 of that specification .

2.8 prism:caption

The prism:caption term identifies a region that contains text that identifies and explains an image or illustration or other piece of media .

The caption for the picture is highlighted in blue in the following image:

Captions can be identified as top-level regions of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

…

</li>

</li>

…

</ol>

</li>

The caption typically follows its related media in the navigation sequence.

2.9 prism:credit

The prism:credit term identifies a region that contains the credits for an image, illustration, or other piece of media .

A picture credit is highlighted in blue in the following image:

Credits can be identified as top-level regions of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

…

</li>

</li>

…

</ol>

</li>

2.10 msv:article-text

The msv:article-text term identifies a region of article text. An article may have more than one article text region (e.g., one for each column).

The following image shows five columns of article text highlighted in blue:

The article text can be identified as top-level regions of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

…

</li>

</li>

…

</ol>

</li>

The article text is the most important type of region for magazine navigation because it is the portion of the document that contains the narrative content. The article text is often laid out in columns in magazines and newspaper to increase readability, however, which can make it difficult to access on small screens.

A reading system is expected to handle navigation “along” the box for these adjoining regions, which is achieved by having the reading system break a box into smaller parts that have the aspect ratio of the screen:

If the reading system simply moves from one region to the next, only ensuring its visibility on screen, it will lead to a poor user experience:

the text will not always be readable
the zoom factor on the page could change from one box to the next resulting in text that has a different apparent size between regions

The following graphic highlights these problems:

Reading systems are expected to adjust the zoom so that the article text box fits in width (only for horizontal writing modes) and then move along the box in order to see all text.

2.11 prism:box

The prism:box term identifies a region that contains text that is outside the linear flow of the article (but is still associated with the article, unlike an advertisement or a separate article) , whether rendered in a box or another shape.

The following images show examples of these kinds of asides:

The box content can be identified as top-level regions of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

…

</li>

</li>

…

</ol>

</li>

B ox content is typically navigated to after the article text of the page.

2.12 prism:advertisement

The prism:advertisement term identifies a region that contains a piece of material promoting a product, service, or event whose presence is paid for.

The following image shows an advertisement highlighted in red:

An advertisement can be identified as a top-level region of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

…

</li>

…

</ol>

</li>

Publishers will typically want to keep the advertisement as part of a reading sequence. In the case of an article spanning several pages with some advertisements interspersed, the reading system should not skip the ads during guided navigation, but could rearrange their position (e.g., after all article text) .

2.13 prism:pullQuote

The prism:pullQuote term identifies a region that contains a snippet of the content that stands out from its surroundings to grab attention

The following image shows a pull quote highlighted in blue:

Pull quotes can be identified as top-level regions of interest, or can be nested inside of an msv:article-region . In both cases, the markup for the region is the same:

<ol>

…

</li>

…

</ol>

</li>

Pull quotes are useful to identify inside a navigation sequence as the reading system might choose to create a specific effect or apply a specific logic in the fly-over sequence.

By choosing to ignore the pull quote, there is no loss of material or loss of continuity. Since a pull quote can be located in a portion of the page that is far away from the original position of the snippet, the reading system can decide whether it is worthwhile to navigate to this region or not.

Appendix A. Acknowledgements

All content used to illustrate comics comes from the following titles and has been used with authorization from the publishers:

Author : Mara

Published : 06/2008

Drawing: Zhang Xiayu

Story: Izu & Nikolavitch

Published: 01/2010

All content used to illustrate magazines comes from the following titles and has been used with authorization from the publishers:

Le Journal du Dimanche - Lagardère Active

Published : 2012

Appendix B. Contributors

The following people contributed to this document :

Ichikawa, Dai (Invited Expert)
Kasdorf, Bill (Apex Covantage)
Kopp, Matthieu (Aquafadas)
Kroupa, Brady (Barnes & Noble)