HTML 5 , CSS 3 , and MathML Create rich-layout publications in ...

unevenfitterInternet and Web Development

Jun 20, 2012 (5 years and 4 months ago)

736 views

© Copyright IBM Corporation 2012
Trademarks
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
1
of
22
Create rich-layout publications in EPUB 3 with
HTML5, CSS3, and MathML
Explore the next-generation open eBook standard for
advanced layout and typography
Liza Daly
(
liza@safaribooksonline.com
)
Vice-President of Engineering
Safari Books Online
Skill Level: Intermediate
Date: 20 Mar 2012
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.
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.
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
2
of
22
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.
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
3
of
22

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.
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
4
of
22
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
.
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
5
of
22
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
<![CDATA[
<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>
...
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
6
of
22
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
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
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;
}
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
7
of
22
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>
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
8
of
22
<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>
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
9
of
22
</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.
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
10
of
22

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
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
11
of
22
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)
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"?>
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
12
of
22
<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'),
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
13
of
22
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.
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
14
of
22
Figure 4. Page from the book
Abroad
rendered on a tablet-sized screen
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;
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
15
of
22
}
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
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
.
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
16
of
22
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
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
.
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
17
of
22
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>
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
18
of
22
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
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.
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
19
of
22
Downloads
Description
Name
Size
Download
method
XSLT and sample files for NCX transformation
ncx-to-end.zip
5KB
HTTP
A sample EPUB 3 demonstrating advanced
CSS3 layout
childrens-book-epub.zip
139KB
HTTP
A sample EPUB 3 demonstrating MathML
mathml-epub.zip
3KB
HTTP
Information about download methods
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
20
of
22
Resources
Learn

Build a digital book with EPUB
(Liza Daly, developerWorks, July 2011): Learn
about the EPUB format in detail.

EPUB 3 specification
: Get an overview of the current revision of the EPUB
standard.

EPUB Publications 3.0 Recommended Specification
: Read about the
publication-level semantics and conformance requirements for EPUB® 3,
including the format of the Package Document and rules for how this document
and other Publication Resources are associated to create a conforming EPUB
Publication.

EPUB 3 Structural Semantics Vocabulary
: Learn more about the set of
properties relating to the description of structural semantics of written works.

HTML5 for Publishers
(Sanders Kleinfeld, O'Reilly Media, 2011): Get this free
EPUB book that demonstrates the use of canvas-based interactivity and other
exciting features of EPUB 3.

Responsive Web Design
by Ethan Marcotte: Explore CSS techniques and
design principles, including fluid grids, flexible images, and media queries.

New to XML?
Get the resources you need to learn XML.

XML area on developerWorks
: Find the resources you need to advance
your skills in the XML arena, including DTDs, schemas, and XSLT. See the
XML technical library
for a wide range of technical articles and tips, tutorials,
standards, and IBM Redbooks.

IBM XML certification
: Find out how you can become an IBM-Certified
Developer in XML and related technologies.

developerWorks technical events and webcasts
: Stay current with technology in
these sessions.

developerWorks on-demand demos
: Watch demos ranging from product
installation and setup demos for beginners to advanced functionality for
experienced developers.

developerWorks on Twitter
: Join today to follow developerWorks tweets.

developerWorks podcasts
: Listen to interesting interviews and discussions for
software developers.

developerWorks on-demand demos
: Watch demos ranging from product
installation and setup for beginners to advanced functionality for experienced
developers.
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.
ibm.com/developerWorks/
developerWorks®
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
21
of
22

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

developerWorks profile
: Create your profile today and
set up a watchlist
.

XML zone discussion forums
: Participate in any of several XML-related
discussions.

The
developerWorks community
: Connect with other developerWorks users
while exploring the developer-driven blogs, forums, groups, and wikis.
developerWorks®
ibm.com/developerWorks/
Create rich-layout publications in EPUB 3 with HTML5,
CSS3, and MathML
Page
22
of
22
About the author
Liza Daly
Liza 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.
© Copyright IBM Corporation 2012
(www.ibm.com/legal/copytrade.shtml)
Trademarks
(www.ibm.com/developerworks/ibm/trademarks/)