E0 Packaging 1. The Index Page

Information on E0 index.html packaging options as per the E0 specification under discussion and development. Updated: 2013-07-19

index.html
HTML5 Declarations
Metadata
Cover
Navigation
Default TOC/Spine
The toc Role Property
The Spine Role Property
No Page in TOC or Spine
Page Revision History

Important Note

The E0 specification is in development. This information is subject to change at any time and is provided for those interested in exploring and evaluating the power, cost effectiveness, reading system compatibility and simplicity of the proposed E0 (ebook zero) format.

Disclaimer: Infogrid Pacific Pte. Ltd is not a part of the specification discussion group. Our role is strictly to create and maintain a testing and evaluation framework including a reading system, test books and demonstration books.

The E0 package is a zip file with an index.html page in the E0 format structure. All other content is standard HTML5 and packaged into directories with links as required.

There are no limitations defined with the type of content that can be packaged into the file.

index.html

An E0 package is defined by the index.html file which provides navigation information to the reading system. The index.html has four defined component areas, all of which conform to correct HTML5 syntax:

HTML5 Declarations
Metadata
Cover
Navigation

<!DOCTYPE html>
<html lang="en" xml:lang="en" prefix="dc: http://purl.org/dc/terms/" >
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>E0-TC0* Book Title</title>
    <meta property="dc:title" content="E0-TC02 TOC No Spine"/>
    <meta property="dc:creator" content="Infogrid Pacific"/>
    <meta property="dc:identifier" content="e0-tc02-toc-no-spine"/>
    <meta name="dc.date" content="2013"/>
    <meta name="dc.description" content="E0 Test Book for TOC no Spine"/>
    <meta name="dc.subject" content="EBook Zero Test Book"/>    
    <link rel="stylesheet" href="css/e0-tc02-toc-no-spine.css" type="text/css" />
    <style>
    .cover{
        position:fixed !important;
        top:0;
        right:0;
        bottom:0;
        left:0;
        text-align: center;
        }
    .cover img {
        height:100%;        
        }
    </style>
</head>
 
<body>
   <section class="cover" role="cover">
      <img src="e0-tc0*-toc-no-spine_cover_epub.jpg" alt="cover image"/>
   </section>
   <nav hidden="hidden" dir="ltr">
      <h1>Contents</h1>
      <ol>
         <li><a href="s001-BookTitlePage-01.html">E0 Test Case 2</a></li>
         <li role="toc"><a href="s002-Copyright-01.html">Copyright</a></li>
         <li><a href="s003-Introduction-01.html">Introduction</a></li>
         <li><a href="s004-Chapter-001.html">Chapter 1</a></li>
         <li><a href="s005-Chapter-002.html">Chapter 2</a></li>
         <li><a href="s006-Chapter-003.html">Chapter 3</a></li>
         <li><a href="s007-Chapter-004.html">Chapter 4</a></li>
         <li><a href="s008-Chapter-005.html">Chapter 5</a></li>
         <li><a href="s009-Chapter-006.html">Chapter 6</a></li>
         <li><a href="s010-Chapter-007.html">Chapter 7</a></li>
         <li role="spine"><a href="s011-Epilogue-01.html">Epilogue</a></li>
      </ol>
   </nav>
</body>
</html>

Looking at these one by one.

HTML5 Declarations

The E0 package uses a standard HTML5 declaration.

The book language is set with both lang and xml:lang attributes to cover both HTML5 and XHTML5 reading system interpretations.

In this example there is a namespace declaration for DC: (Dublin Core metadata). This has not been decided in the final package at this time.

<!DOCTYPE html>
<html lang="en" xml:lang="en" prefix="dc: http://purl.org/dc/terms/" >
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>E0-TC02 TOC No Spine</title>
    ....
</head>
    .... 
</html>

Metadata

The metadata specification for E0 has not yet been finalized.

....    
<head>
    ...
    <meta property="dc:title" content="E0-Book Title"/>
    <meta property="dc:creator" content="Infogrid Pacific"/>
    <meta property="dc:identifier" content="e0-tc02-toc-no-spine"/>
    <meta name="dc.date" content="2013"/>
    <meta name="dc.description" content="E0 Test Book for TOC no Spine"/>
    <meta name="dc.subject" content="EBook Zero Test Book"/>    
    <link rel="stylesheet" href="css/e0-tc02-toc-no-spine.css" type="text/css" />
</head>
....
</html>

Cover

The exact cover treatment is still in discussion. This default view allows the presentation of the cover in a reading system, or with the role="cover" attribute a reading system can extract the cover for it's internal use.

The current implementation of the testing framework does this to generate the library thumbnail.

....
<head>
    ....
    <style>
    .cover{
        position:fixed !important;
        top:0;
        right:0;
        bottom:0;
        left:0;
        text-align: center;
        }
    .cover img {
        height:100%;        
        }
    </style>
</head>
 
<body>
   <section class="cover" role="cover">
      <img src="e0-tc02-toc-no-spine_cover_epub.jpg" alt="cover image"/>
   </section>
   ....
</body>
</html>

The cover related CSS included in the <head> is entirely our invention at present and allows the cover image be contained inside the reading view when resized.

In the first release of AZARDI E0 Test Framework the cover is used for thumbnail generation but presentation in the spine is not yet explicitly handled.

Navigation

The e-book heart of E0 is the <nav> structure which defines both the Table of Contents for the reading system and spine reading order.

The <nav hidden> element is hidden by default. The <nav> element can also contain reading direction when required.

When the index.html page is opened only the cover is seen. The reading system uses the <nav> element to constuct its reading controls.

The <nav> <li> elements can haverole="toc | spine" properties with the following rule:

<li> The section appears in TOC and linear reading order

<li role="toc spine"> The section appears in TOC and linear reading order

<li role="toc"> The section appear in the TOC but not in linear reading navigation.

<li role="spine"> The section does not appear in the TOC but is in the linear reading order.

If a section<li> reference is not in the <nav> element the page is an orphan and can only be accessed by internal linking.

Default TOC/Spine

Most standard books require all sections to appear in the Table of Contents and the Spine. Here is an example with no role statement which means all pages are both in the TOC and linear reading order.

 <body>
   ....
   <nav hidden="hidden" dir="ltr">
      <h1>Contents</h1>
      <ol>
         <li><a href="s001-BookTitlePage-01.html">E0 Test Case 2</a></li>
         <li><a href="s002-Copyright-01.html">Copyright</a></li>
         <li><a href="s003-Introduction-01.html">Introduction</a></li>
         <li><a href="s004-Chapter-001.html">Chapter 1</a></li>
         <li"><a href="s005-Chapter-002.html">Chapter 2</a></li>
         <li"><a href="s006-Chapter-003.html">Chapter 3</a></li>
         <li"><a href="s007-Chapter-004.html">Chapter 4</a></li>
         <li"><a href="s008-Chapter-005.html">Chapter 5</a></li>
         <li><a href="s009-Chapter-006.html">Chapter 6</a></li>
         <li><a href="s010-Chapter-007.html">Chapter 7</a></li>
         <li><a href="s011-Epilogue-01.html">Epilogue</a></li>
      </ol>
   </nav>
</body>

See Test Case 1

The toc Role Property

When a <nav> <li> contains role="toc", the section will appear in the table of contents but not in the spine.

 <body>
   ....
   <nav hidden="hidden" dir="ltr">
      <h1>Contents</h1>
      <ol>
         <li role="toc"><a href="s001-BookTitlePage-01.html">E0 Test Case 2</a></li>
         <li role="toc"><a href="s002-Copyright-01.html">Copyright</a></li>
         <li role="toc"><a href="s003-Introduction-01.html">Introduction</a></li>
         <li role="toc"><a href="s004-Chapter-001.html">Chapter 1</a></li>
         ....
      </ol>
   </nav>
</body>

See Test Case 2

The Spine Role Property

When a<nav> <li> contains role="spine", the section will not appear in the table of contents but is accessible with linear navigation.

 <body>
   ....
   <nav hidden="hidden" dir="ltr">
      <h1>Contents</h1>
      <ol>
         <li role="spine"><a href="s001-BookTitlePage-01.html">E0 Test Case 2</a></li>
         <li role="spine"><a href="s002-Copyright-01.html">Copyright</a></li>
         <li role="spine"><a href="s003-Introduction-01.html">Introduction</a></li>
         <li role="spine"><a href="s004-Chapter-001.html">Chapter 1</a></li>
         ....
      </ol>
   </nav>
</body>

See Test Case 3

No Page in TOC or Spine

If you require a page that is not in the TOC or the Spine you do not include it in the <nav> statement. It is still in the zip file list (equivalent to the ePub3 manifest).

This can be a requirement for certain types of internal navigation such as text books, where the TOC page ony has Part Links and then Part pages have their own content to Lessons or Chapters.

 <body>
   ....
   <nav hidden="hidden" dir="ltr">
      <h1>Contents</h1>
      <ol>
         <li><a href="s001-BookTitlePage-01.html">E0 Test Case 2</a></li>
         <li><a href="s002-Copyright-01.html">Copyright</a></li
         <li><a href="s003-Contents-01.html">Linked Contents</a></li>
         ....
         <li><a href="s011-Epilogue-01.html">Epilogue</a>
      </ol>
   </nav>
</body>

In this example only the Book Titlepage, copyright page, Content Linking page and epigraph will appear in the Table of Contents. The Copyright page can be accessed with linear navigation from the titlepage. No other pages will be in the TOC or spine navigation so links to and between those must be made from an internal page. In this example it is the Linked Content section.

See Test Case 5.

Page Revision History

2013-07-19 No page in TOC or Spine updated to reflect exclusion of section in toc and spine by not including it in the <nav> list.