Create rich-layout publications in EPUB 3 with HTML5, CSS3, and MathML

Explore the next-generation open eBook standard for advanced layout and typography

EPUB 3.0, which is the latest revision of the industry-standard XML e-book format, jumps into modern web technology by embracing HTML5 and CSS3. It retains its focus on XML-driven toolkits by requiring XHTML serialization and adding supplementary XML vocabularies, such as MathML and SVG. EPUB 3 offers a variety of options for developing advanced, digital-native publications. In this article, learn to create rich-layout pages using some new features in EPUB 3.

05 Jul 2012 - Per author request, in Listing 4, removed the entire first line:<![CDATA[

Share:

Liza Daly, Vice-President of Engineering, Safari Books Online

Photo of Liza DalyLiza Daly is Vice-President of Engineering at Safari Books Online and an experienced software engineer in web applications and digital publishing. Previously she founded Threepress Consulting, a publishing software company, and in 2010 released Ibis Reader, the first HTML5 mobile eReader. She is on the board of directors of the International Digital Publishing Forum (IDPF), the organization that sponsors and develops the EPUB eBook specification.



05 July 2012 (First published 20 March 2012)

Also available in Chinese Russian Japanese Vietnamese Portuguese Spanish

Introduction

EPUB is the XML format for reflowable digital books and publications standardized by the International Digital Publishing Forum (IDPF). By 2009, EPUB 2 was the de facto eBook format used by most major eBook retailers and reading systems.

EPUB ZIP archives are packaged under a well-defined structure. Each component has its own specification, united under the common EPUB label:

Container specification
Defines the method by which an EPUB document is packaged.
EPUB publication
Includes all of the metadata about the eBook's contents, including: the package's manifest, basic title, author metadata, and—in EPUB 3—definitions of which advanced features the publication expects to support, such as JavaScript or MathML. This is called the Open Container Format file.
EPUB content documents
The actual XHTML and CSS files that make up the publication's content. Content documents also include binary resources such as images, multimedia, and, potentially, externally defined XML documents.

Frequently used abbreviations

  • CSS: Cascading stylesheet
  • DTD: Document Type Definition
  • HTML: Hypertext Markup Language
  • JAR: Java archive
  • OPF: Open Packaging Format
  • SVG: Scalable Vector Graphics
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language
  • XSLT: Extensible Stylesheet Language Transformations

This article explores some of the EPUB 3 features. You'll learn about validating EPUB 3 documents, navigation and hierarchy, and development guidelines. An example walks through the process of adapting a page from a children's book into EPUB 3. Also learn how to include MathML in publications.

Download the examples used in this article.

Prerequisites

The sample code and examples in this article assume a basic familiarity with the EPUB 2 specification and XML-based publications in general. See Resources for details on EPUB 2.


Changes in EPUB 3

EPUB 2 provides all the formatting and layout capabilities of HTML4 and CSS2, which is more than sufficient for text-heavy publications. However, publishers and authors found that EPUB 2 couldn't handle many content types and use cases, such as multimedia books, books with complex layout, mathematical publications, and interactive documents. The IDPF and eBook community released the specification for EPUB 3 in October, 2011.

EPUB 3 reading systems

As of December, 2011, no reading systems officially support EPUB 3. Many reading systems written using HTML5-aware browser engines, however, such as WebKit, support most of the EPUB 3 Content Documents specification. It is recommended that you use a recent browser based on a modern HTML rendering engine to test and develop EPUB 3 documents.

This article includes techniques to create harmless polyfills (shims) to produce EPUB 3-compatible output even without a full EPUB 3 reading system.

Major changes from EPUB 2 to EPUB 3 include:

  • The required schema for EPUB 3 content documents changed from XHTML 1.1 to the XHTML serialization of HTML5. It was a critical requirement to include the multimedia elements from HTML5 (<video>, <audio>, and <canvas>).
  • The allowable range of CSS in EPUB 3 content documents expanded from a subset of CSS2.1 to a set of mature modules from CSS3 relevant to document authoring.
  • MathML was added to XHTML5 and SVG as a first-order content type.
  • Support for embedded fonts is now required of reading systems that have a CSS viewport. Web Open Font Format was added as an acceptable font format.
  • Explicit support for non-Western writing modes and scripts, including vertical layout in Japanese and other Asian scripts.
  • Optional support for JavaScript-mediated interactivity using a custom security model.
  • Allowable metadata in publication documents was expanded, including some support for Resource Description Framework–in–attributes (RDFa).
  • The EPUB 2 Navigational Center eXtended (NCX) table of contents (TOC) document was deprecated in favor of an XHTML5-based TOC. (The NCX is still allowed for backwards compatibility.)

Validating EPUB 3 documents

Because EPUB 3 relies on XML serializations for most content types, it is amenable to automatic validation. The EpubCheck tool is the canonical method for testing the validity and conformance of EPUB documents. EpubCheck is an open source (Berkeley Software Distribution-licensed) Java™ library. A developer preview version is available for use with EPUB 3 documents and is used throughout this article. See Resources for links to the latest version.

It is strongly suggested that you use the .xhtml extension for all EPUB content documents. Browsers will not interpret HTML content as application/xhtml+xml without that extension. XML processing mode is required when working with many of the features demonstrated in this article, such as CSS namespaces.

Typically, you interact with EpubCheck through the command line, as shown below.

$ java -jar epubcheck-3.0b3.jar sample.epub

Epubcheck Version 3.0b3

No errors or warnings detected.

If you get the error java.lang.NoClassDefFoundError: com/thaiopensource/validate/SchemaReader in response, make sure that the lib/ directory that came with the EpubCheck distribution is in the same directory as the EpubCheck JAR file.

EpubCheck 3 can validate a single subcomponent of the EPUB package individually, as in Listing 1. This extremely useful feature, which is used in the examples in this article, can:

  • Help isolate problems.
  • Reduce the need to tediously repackage the EPUB into a new ZIP just to validate it.
  • Be incorporated in a unit testing framework for a toolchain that outputs a single file type.
Listing 1. Running EpubCheck 3 against a single file type
$ java -jar ~/src/epubcheck-3.0b3.jar sample-toc.xhtml -mode nav 
Epubcheck Version 3.0b3

WARNING: sample-toc.xhtml: File is validated as a single file of type nav and version 3! 
         Only a subset of the available tests is run!

No errors or warnings detected.

Navigation and hierarchy in EPUB 3 documents

Though the NCX TOC file in EPUB 2 supported a rich set of markup for hierarchical navigation and page mapping, it was derived from Digital Accessible Information System (DAISY) Digital Talking Book (a specification for producing eBooks accessible to the print-disabled). Reliance on the well-specified DAISY format was meant to ease development of eBook readers that could support rich accessibility. In that sense, the NCX performed capably. However, the NCX DTD is quite large and includes features not relevant to EPUB 2. Confusion over which parts of the NCX were required in EPUB resulted in undesirable fragmentation and proprietary extensions by some eBook retailers and reading system vendors.

EPUB 3 deprecates the NCX and replaces it with the EPUB Navigational Document (END). Listing 2 shows an example. The END uses XHTML5 rather than a custom DTD, thereby reducing the number of XML formats to implement and validate. Custom EPUB attributes are supplied using the EPUB namespace (http://www.idpf.org/2007/ops).

Listing 2. A minimal END
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Example</title>
  </head>
  <body>
    <section epub:type="frontmatter toc">
      <header>
        <h1>Contents</h1>
      </header>
      <nav epub:type="toc" id="toc">
        <ol>
          <li id="chapter_001">
            <a href="chapter_001.html">Chapter 1</a>
          </li>
        </ol>
      </nav>
    </section>
  </body>
</html>

The HTML5 <nav> element is required (as is the epub:type value toc).

Declaring the END

Include the END in a publication by declaring the item in the manifest with the properties value of nav, as in Listing 3.

Listing 3. Including an END in an EPUB Package Document (OPF)
  <manifest>

    <item id="toc" 
    properties="nav"
    href="toc.html" 
    media-type="application/xhtml+xml"/>

    <item id="chapter_001" 
    href="chapter_001.html" 
    media-type="application/xhtml+xml"/>
    ...
  </manifest>

Inclusion of an END file is required in EPUB 3. You can also include an NCX file for backwards compatibility, but EPUB 3 processors must ignore the NCX in favor of the END.

Visual presentation of the END

Unlike the NCX, you can include the END in the flow of the book content. In EPUB 2, if you wanted to show a custom TOC to users (rather than relying on built-in TOC support in the eReader), you had to produce two copies of the same content—one in the NCX and one as an HTML content document. The END eliminates this duplication and allows a great deal of flexibility in presenting some or all of the TOC in the content flow.

To add the END to the content flow, simply include it in the OPF spine, as in Listing 4.

Listing 4. Including the END in the flow of reading
  <spine>
    <itemref idref="toc" />
    <itemref idref="chapter_001" />
    ...
  </spine>

In documents with deep hierarchies, such as technical documentation, you might want to include all section levels in a purely functional TOC while showing only first- or second-level sections to users in the content flow. You do so using the HTML5 hidden attribute, as in Listing 5, on any elements that should be removed from presentation to users.

Listing 5. Removing subsections from the visual presentation of a TOC
...
<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc">
  <ol>
    <li id="chapter_001">
      <a href="chapter_001.html">Chapter 1</a>
      <ol hidden="hidden">
        <li>
          <a href="chapter_001.html#id1">Chapter 1 subsection</a>
          <ol>
            <li>
              <a href="chapter_001.html#id1.1">Chapter 1 subsection 1</a>
            ...

You might wonder why you couldn't do this using the CSS display: none property. Because EPUB is used in a variety of reading systems, including nonvisual screen readers or Braille devices, not all readers are required to support CSS. Most modern web browsers support hidden natively. It's a good idea to include CSS to explicitly set the display property of these elements, as in Listing 6. Because the END file is just another HTML file, you can add CSS in the HTML head, just as with any other stylesheet.

Listing 6. Setting the display property
/* Never display elements with the hidden attribute */
*[hidden] {
  display: none;
}

On incompatible reading systems or browsers, the absence of styling for the hidden attribute results in all subsections being shown, as in Figure 1.

Figure 1. END TOC without hidden attribute or CSS
Screen capture of the layout of the END file with no hidden attribute, showing all subsections

On browsers that support hidden or after you supply the shim CSS, the output is transformed, as in Figure 2.

Figure 2. The END TOC with hidden applied
Screen capture of the layout of the END file with hidden attribute,showing no subsections

By default, the ordered list HTML produces a set of numbered lists. However, the END specification states, " . . . the default display style of list items must be equivalent to CSS list-style: none." To achieve this presentation, add another rule to the EPUB 3 CSS polyfill, as in Listing 7.

Listing 7. Setting the style of list items
/* In a declared TOC list, never show list numbering */
nav#toc ol {
  list-style-type: none;
}

Migrating from NCX to END through XSLT

Although the EPUB 3 END offers more options for layout and control, if you're migrating from an EPUB 2 to EPUB 3 workflow, consider starting by converting from existing NCX documents. Because both input and output documents are XML, this is a perfect application for XSLT.

Listing 8 provides the basic framework for generating an HTML document to populate with the TOC.

Listing 8. Declare the namespaces necessary for the NCX and END
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
                exclude-result-prefixes="ncx xsl"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ncx="http://www.daisy.org/z3986/2005/ncx/"
                xmlns:epub="http://www.idpf.org/2007/ops"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="ncx:ncx">
    <html>
      <head>
        <title><xsl:apply-templates select="/ncx:ncx/ncx:docTitle/ncx:text"/></title>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

Note the mandatory inclusion of the http://www.idpf.org/2007/ops namespace, which is typically prefixed with epub. Include this namespace primarily to support EPUB semantic inflection (additional meaning about the specific purpose an element has in an EPUB content document). If using EPUB 3, you're encouraged to use the expressiveness available in the Structural Semantics Vocabulary to provide context for accessibility software as well as machine processing. See Resources for information on the values included in that vocabulary.

For a complete example showing conversion of other page map types, see the open source nend application listed is Resources.

With the basic outline in place, start to walk the hierarchical TOC in the NCX and output corresponding XHTML elements. Although the NCX allows for several different types of page lists, EPUB books typically include only the ncx:navMap. The template excerpt in Listing 9 shows how to output a set of nodes from the ncx:navMap.

Listing 9. Outputting the navMap
...
  <!-- Generate a complete nav element and sub-list out of the navMap, 
       then recurse through the nodes -->
  <xsl:template match="ncx:navMap">
      <nav id="toc" epub:type="toc">
        <xsl:copy-of select="@class"/>
        <xsl:choose>
          <xsl:when test="ncx:navLabel">
            <xsl:apply-templates select="ncx:navLabel" mode="heading"/>
          </xsl:when>
          <xsl:otherwise>
            <xsl:if test="self::ncx:navMap">
              <h1>Table of Contents</h1>
            </xsl:if>
          </xsl:otherwise>
        </xsl:choose>
        <ol>
          <xsl:apply-templates select="ncx:navPoint|ncx:navLabel"/>
        </ol>
      </nav>
  </xsl:template>

  <xsl:template match="ncx:navPoint">
    <xsl:text>
</xsl:text>
    <li>
      <xsl:copy-of select="@id|@class"/>

      <!-- Every navPoint must have a navLabel and content -->
      <a href="{ncx:content[1]/@src}">
        <xsl:apply-templates select="ncx:navLabel"/>
      </a>

      <!-- Does this element have a sub-nav? -->
      <xsl:if test="ncx:navPoint">
        <ol>
          <xsl:apply-templates select="ncx:navPoint"/>
        </ol>
      </xsl:if>
    </li>
  </xsl:template>

  <!-- These nodes only contain text -->
  <xsl:template match="ncx:navLabel|ncx:text">
    <xsl:apply-templates/>
  </xsl:template>
...

Listing 10 provides an example of a hierarchical NCX.

Listing 10. Sample from a hierarchically organized NCX
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" 
  "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">

<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="en">

  <head>
    <meta name="dtb:uid" content="d989d60c-2302-40d1-9c85-1c028414342a" />
    <meta name="dtb:depth"          content="-1" />
    <meta name="dtb:totalPageCount" content="-1" />
    <meta name="dtb:maxPageNumber"  content="-1" />
  </head>

  <docTitle>
    <text>Middlemarch</text>
  </docTitle>

  <navMap>
    <navPoint id="np1" playOrder="1">
      <navLabel>
        <text>Prelude</text>
      </navLabel>
      <content src="prelude.html"/>
    </navPoint>

    <navPoint id="np2" playOrder="2">
      <navLabel>
        <text>I: Miss Brooke</text>
      </navLabel>
      <content src="book1.html" />

      <navPoint id="np3" playOrder="3">
        <navLabel>
          <text>Chapter 1</text>
        </navLabel>
        <content src="chapter1.html" />
      </navPoint>
      <navPoint id="np4" playOrder="4">
        <navLabel>
          <text>Chapter 2</text>
        </navLabel>
        <content src="chapter2.html" />
      </navPoint>
   ...

Transforming the file in Listing 10 using the XSLT results in the output in Listing 11 below. You can download the example files.

Listing 11. Output from the transformation from NCX to END
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Middlemarch</title>
  </head>
  <body>
    <nav id="toc" epub:type="toc">
      <h1>Table of Contents</h1>
      <ol>
        <li id="np1">
          <a href="prelude.html">Prelude</a>
        </li>
        <li id="np2">
          <a href="book1.html">I: Miss Brooke</a>
          <ol>
            <li id="np3">
              <a href="chapter1.html">Chapter 1</a>
            </li>
            <li id="np4">
              <a href="chapter2.html">Chapter 2</a>
            </li>
...

Because the @id values are preserved from the original file, you should be able to write validation tools to ensure that all of the original nodes are captured. Other options for further transformation include:

  • Updating the metadata in the OPF file from the old Dublin Core scheme to the meta @property scheme, as defined in the Publications 3.0 specification (see Resources).
  • Migrating the deprecated OPF guide content to the landmarks feature in the END.
  • Removing references in the OPF spine to the NCX file (unless you're producing a backwards-compatible document).

Typically, it isn't necessary to modify XHTML 1.1 content to produce EPUB 3-compatible content documents. Where semantic information is available, however, such as pulling from a content management system or other document repository, consider applying semantic inflection to the output. The EPUB 3 specification has more information on semantic inflection (see Resources).


EPUB 3 development guidelines

Until EPUB 3 reading systems become available, it would be premature to recommend specific best practices. However, EPUB 3 is based on rapidly maturing web technologies. There's already sufficient information to make broad recommendations about how to use the underlying technologies and when to use existing best practices to produce solid, semantic, accessible markup.

When to produce EPUB 3

Should you use EPUB 2 or EPUB 3 for eBooks produced today? Fortunately, backwards compatibility was a design goal of EPUB 3. You should benefit from the semantic enhancements and enriched metadata in EPUB 3 while still producing documents that are readable on older eReaders. In practice, it might not be possible to sell such content in some eBook marketplaces; they may not accept EPUB 3 because of business rules. However, "sideloading" such content can be expected to work for most conforming EPUB 2 reading systems. EPUB 3 was also designed to be forwards compatible in terms of reading system support—an EPUB 3 reading system must support valid EPUB 2 documents.

Many reading systems already support a kind of "EPUB 2.5," where HTML5 markup is allowed (especially regarding the video, audio, and canvas elements). You should expect eReading platforms with web browser engines, such as Apple iBooks, to successfully render many of the elements allowed in EPUB 3 content documents. As with any cutting-edge web content, test your content in as many readers as possible before release.

Responsive eBook design

The CSS3 Media Query module is an exciting new component of EPUB 3. Media Query allows authors to specify that a set of rules and properties applies only to a particular viewing condition, typically based on the size of the viewport. You can also use Media Query to target specific height and width ratios, such as portrait versus landscape.

These features are already in use on some web sites to provide improved user experiences on mobile devices. Taken together, these principles are called responsive web design. The techniques have proven effective on the web, and in some ways they are even more applicable to book designers. Book designers draw from decades of research and experimentation in how to effectively present visual information in various sizes and orientations. (See Resources for more on responsive web design.)

Most eBooks are purely, or primarily, text. However, many publication types require richer layout for marketing reasons or for the essential nature of the content. Layout-intensive books have been considered poor candidates for eBook conversion, but EPUB 3 and its use of HTML5 and CSS3 enable advanced design. With great power comes great responsibility, though. You can't neglect users on mobile devices who want to read the content easily and yet with attractive layouts. This is where the combined techniques of CSS3 layout and responsive eBook design come together.


Advanced, responsive layout in EPUB 3

Illustrated books, cookbooks, textbooks, and poetry have been difficult to convert into reflowable content. In this section, see how to adapt the page from a children's poetry book, in Figure 3, into EPUB 3. The word adapt was used rather than convert, because the process is as much artistic as it is technical.

Figure 3. A page from Abroad by Thomas Crane (public domain image from the Internet Archive)
Screen capture of page from the book 'Abroad' to be adapted into EPUB 3

The approach is to capture the text as XHTML and then extract some of the images to evoke—but not reproduce—the original layout. Because EPUB 3 assumes an XHTML5/CSS3 processing context, you can use minimal semantic markup rather than accommodating many legacy browsers, as you would do on the open web. Listing 12 shows the XHTML markup for the content.

Listing 12. Poetry markup
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Example of Media Query in EPUB 3</title>
    <link rel="stylesheet" type="text/css" href="childrens-book-style.css" />
  </head>
  <body>
    <div epub:type="chapter">
      <h1>The Swans.</h1>
      <p>
        <span>"Ho! pretty swans,</span>
        <span>Do you know, in our Zoo'</span>
        <span>The swans of old England</span>
        <span>Are just like you?"</span>
      </p>
      <p>
        <span>"Don't tell me!"</span>
        <span>Said a cross old bird;</span>
        <span>"I know better,</span>
        <span>The thing's quite absurd.</span>
      </p>
      <p>
        <span>Their figures, I'm sure,</span>
        <span>Are not worth a glance:</span>
        <span>If you want to see style,</span>
        <span>You <em>must</em> come to France."</span>
      </p>
      <p>
        <span>With a scornful whisk</span>
        <span>The swan turned tail,</span>
        <span>Spread its wings to the breeze</span>
        <span>And was off full-sail.</span>
      </p>
      <p>
        <span>"Ho! pretty swan,</span>
        <span>Do you know, in our Zoo'</span>
        <span>The swans are not half</span>
        <span>So conceited as you?"</span>
      </p>
    </div>
  </body>
</html>

No images are specified. To facilitate responsive design, images will be provided in the CSS. Although many responsive web development advocates espouse a "mobile first" strategy, it may be easier to start adapting print content with a desktop or tablet-sized screen. For the example, it is assumed that the default view is a large-form screen. Listing 13 shows the CSS, and Figure 4 shows the resulting eBook as rendered in iBooks on an Apple iPad.

Listing 13. CSS for a tablet-sized layout
@namespace epub "http://www.idpf.org/2007/ops";

body {
    font-family: Georgia, serif;
    margin: 0;
    padding: 0;
}

/* Select the entire <div epub:type> and apply the background 
   images at various positions relative to the text. */

div[epub|type="chapter"] {
    background-image: url('childrens-book-swans.jpg'),
                      url('childrens-book-flowers.jpg');
    background-position: 100% 50%, bottom center;
    background-size: 50% auto, auto auto;
    background-repeat: no-repeat, repeat-x;
    background-color: #fdefc2;

    padding: 2em;
}

p {
    font-size: .75em;
    text-align: left;
}

p:last-child {
    padding-bottom: 2em;
}

h1 {
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 200;
}

p > span {
    display: block;
}

/* Use the CSS Selector module to apply rule-based formatting to the 
   poetry content, generating alternating rows of indented text. */

p > span:nth-child(even) {
    text-indent: 1em;
}

The example is using the @namespace syntax from the CSS Namespaces module. CSS namespaces allow styling of namespaced-prefixed elements and attributes. Although it isn't necessary to use CSS namespaces in EPUB 3, it's convenient to attach styles to those elements with EPUB semantic inflection applied (the @epub:type attribute) rather than creating separate classes for styling only. The HTML document must use an .xhtml extension for most browsers to process the CSS namespaces correctly.

Figure 4. Page from the book Abroad rendered on a tablet-sized screen
Screen capture of a page from the book 'Abroad' in XHTML in iBooks on an iPad

With the right-aligned image and large decorative border, the layout in Figure 4 arguably evokes the original page nicely. However, this arrangement is not suitable for a mobile device in portrait mode, where the width will be insufficient for both the image and the text. For mobile devices, which are typically about 480 pixels wide, you can override several elements, as in Listing 14. With the CSS in Listing 14:

  • The image of the swans will shrink, become centered, and appear before the text. The decorative image at the bottom will shrink to avoid overwhelming the poem content.
  • The title will become smaller and center aligned.
  • The poem text itself will be more centered rather than aligned strongly left.
Listing 14. CSS for portrait phone-sized layout
@media screen and (max-width:480px) { 

    div[epub|type="chapter"] {
        background-position: top center, bottom center;
        background-size: 30% auto, 50% auto;

        padding: 1em;
        margin: auto;
        text-align: center;
    }

    h1 {
        margin: 50% auto 0 0;
        font-size: 1em;
        text-align: center;
    }

    p {
        margin-left: 25%;
    }
}

The above directive follows the earlier CSS, so it only needs to override the properties whose values have changed in the new layout. Figure 5 shows the output, spread over two pages.

Figure 5. Page from the book Abroad rendered on phone-sized screen
Screen capture of a page from the book 'Abroad' in XHTML in iBooks on an Apple iPhone

The narrow presentation works well in a portrait layout, but such a short poem could easily fit fully laid out on most landscape pages. You can add one final media query to allow landscape-oriented devices to lay out the poem in multiple columns. This feature is part of the CSS Text module and is a core part of the EPUB 3 CSS support. The CSS for phone-sized landscape layout is in Listing 15.

Listing 15. CSS for phone-sized landscape layout
@media screen and (orientation:landscape and max-width:480px) { 
    div[epub|type="chapter"] {
        background-position: 97% 40%, bottom center;
        background-size: 20% auto, 50% auto;

        /* For now we are required to use the vendor-prefixed versions in most browsers */
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;

        -webkit-column-gap: 0;
        -moz-column-count: 0;
        column-gap: 0;

        padding: 2em 4em 5em 4em;
    }
}

Figure 6 shows the rendered output.

Figure 6. Page from the book Abroad rendered on a phone-sized screen in landscape orientation
Screen capture of a page from the book 'Abroad' in XHTML on Mobile Safari in landscape orientation

Including MathML in publications

In EPUB 2, publications could include mathematical content only as raster images or as SVG. Although SVG math can produce attractive output, it is impenetrable to screen readers and difficult to write. Raster images are worse; they provide neither accessibility nor good scaling across different font and display sizes.

EPUB 3 includes MathML as a native EPUB content type. MathML markup can be provided without any fall-back to another type, such as a raster image. EPUB 3 readers are required to support at least presentational MathML in most cases.

Although MathML is a core content type, it is required that you declare which XHTML pages have MathML in the OPF file, as in Listing 16.

Listing 16. Declaring MathML content in the OPF file
  <manifest>
    <item href="mathml-style.css" id="css1" media-type="text/css"/>
    <item href="mathml.xhtml" properties="mathml" 
             id="page1" media-type="application/xhtml+xml"/>
    <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
    <item id="toc" properties="nav" 
             href="toc.xhtml" media-type="application/xhtml+xml"/>
  </manifest>

Listing 17 shows a simple equation. Although some web browsers now support MathML in an HTML5 context (without namespacing), EPUB 3 requires that MathML content be declared in the correct namespace of http://www.w3.org/1998/Math/MathML.

Listing 17. MathML in EPUB 3 content document
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops" 
      xmlns:m="http://www.w3.org/1998/Math/MathML">
  <head>
    <title>Example of MathML in EPUB 3</title>
    <link rel="stylesheet" type="text/css" href="mathml-style.css" />
  </head>
  <body>

    <m:math display="block">
      <m:mrow>
        <m:mi>x</m:mi>
        <m:mo>=</m:mo>
        <m:mfrac>
          <m:mrow>
            <m:mo form="prefix">-</m:mo>
            <m:mi>b</m:mi>
            <m:mo>±</m:mo>
            <m:msqrt>
              <m:msup>
                <m:mi>b</m:mi>
                <m:mn>2</m:mn>
              </m:msup>
              <m:mo>-</m:mo>
              <m:mn>4</m:mn>
              <m:mo>⁢</m:mo>
              <m:mi>a</m:mi>
              <m:mo>⁢</m:mo>
              <m:mi>c</m:mi>
            </m:msqrt>
          </m:mrow>
          <m:mrow>
            <m:mn>2</m:mn>
            <m:mo>⁢</m:mo>
            <m:mi>a</m:mi>
          </m:mrow>
        </m:mfrac>
      </m:mrow>
    </m:math>              
  </body>
</html>

Figure 7 shows the output in iBooks. You might need to embed a font that includes appropriate mathematical symbols for all equation types to render correctly. See Resources for information on the STIX Fonts for use in scientific publications.

Figure 7. Simple math equations rendered in EPUB 3
Screen capture of an equation in an EPUB 3 book

Many systems that output MathML can use named entities that are part of the MathML 1.0 DTD, such as &PlusMinus;. You need to convert these entities into numeric entities before inclusion in an EPUB 3 publication. As external DTDs, even for core content types, they should not be included in EPUB archives.


Topics to explore further

EPUB 3 offers many options for developing advanced, digital-native publications. You might want to explore the following topics.

  • Using HTML5 canvas paired with JavaScript for interactive books.
  • If you're interested in the Semantic Web, familiarize yourself with the semantic inflection options in the EPUB 3 Structural Semantics Vocabulary.
  • HTML5 semantics and Accessible Rich Internet Applications Suite (WAI-ARIA) roles offer an attractive method for enriching content for consumption by assistive devices or machine learning algorithms.

EPUB 3 is being actively extended. It's likely that features from new CSS modules, like CSS Regions, will be incorporated in future revisions.


Downloads

DescriptionNameSize
XSLT and sample files for NCX transformationncx-to-end.zip5KB
A sample EPUB 3 demonstrating advanced CSS3 layoutchildrens-book-epub.zip139KB
A sample EPUB 3 demonstrating MathMLmathml-epub.zip3KB

Resources

Learn

Get products and technologies

  • EpubCheck: Download the latest version of the validator to work with EPUB 2 and EPUB 3 documents.
  • nend: Get the complete suite of XSLT and Python tools for converting NCX files into ENDs.
  • STIX Fonts: Use the comprehensive set of fonts that serve the scientific and engineering community.
  • IBM product evaluation versions: Download or explore the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into XML on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML, Open source, Web development
ArticleID=800369
ArticleTitle=Create rich-layout publications in EPUB 3 with HTML5, CSS3, and MathML
publish-date=07052012