HTML5 for Publishers

An Introduction

Nellie McKesson | Digital Development Manager, O’Reilly Media, Inc. | Delhi, India, 30/11/2013
HTML5 for Publishers
by Sanders Kleinfeld

FREE

http://oreil.ly/qr38Cc
HTML is the backbone of
reflowable ebooks
HTML 5 is a constellation
of technologies

Canvas Geolocation

Audio/Video CSS 3
When people say "HTML5," they're
usually referring to...
...next-generation websites that include one or more of the
following:

!
• Embedded audio/video media without resorting to Flash
or other plugins

• Native interactivity/animation/games without resorting
to Flash or other plugins

• Geolocation functionality

• Sites with local storage that you can download and run
offline

• Fancy CSS3: columns, text shadows, animations...

• Native support for MathML and SVG

• Proper semantic markup
HTML5 in action in ebooks:
Why should publishers
care about HTML5?
HTML5 is the backbone of EPUB3
While most major eReaders do not formally
support EPUB 3, many HTML5 features are
currently supported by the following platforms:

!
• iBooks for iOS (iPad, iPhone, iPod)

• Nook Color/Tablet

• Kindle Fire

• Kindle Apps (iPhone/iPad/Android, etc.)

• Safari Books Online
 HTML + CSS 3 =
All book formats from HTML
HTML5 Canvas
 Canvas example:
Draw a picture

<canvas id="my_first_canvas" width="200"

height="225">
The content you put here will show up if
your rendering engine doesn't support the
&lt;canvas&gt; element.
</canvas>
 my_canvas.strokeRect(0,0,200,225) // to start, draw a border around the canvas
!
//draw face
my_canvas.beginPath();
my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensions
my_canvas.strokeStyle = "black"; // circle outline is black
my_canvas.lineWidth = 3; // outline is three pixels wide
my_canvas.fillStyle = "yellow"; // fill circle with yellow
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();

// now, draw left eye

my_canvas.fillStyle = "black"; // switch to black for the fill

You draw on the

my_canvas.beginPath();
my_canvas.arc(65, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensions
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle

<canvas> with my_canvas.closePath();

!
// now, draw right eye

JavaScript
my_canvas.beginPath();
my_canvas.arc(135, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensions
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
!
// draw smile
my_canvas.lineWidth = 6; // switch to six pixels wide for outline
my_canvas.beginPath();
my_canvas.arc(99, 120, 35, (Math.PI/180)*0, (Math.PI/180)*-180, false); // semicircle dimensions
my_canvas.stroke();
my_canvas.closePath();
!
// Smiley Speaks!
my_canvas.fillStyle = "black"; // switch to black for text fill
my_canvas.font = '20px _sans'; // use 20 pixel sans serif font
my_canvas.fillText ("Hello Canvas!", 45, 200); // write text
The Result:
But canvas is all about interactivity...

You can dynamically update what's displayed on

the canvas in real time, and in response to user
input, which opens the door to animations,
games, and more.
 Canvas in Action 1:
Graphing Calculator
http://bit.ly/canvascalc
 Canvas in Action 2:
Finger Painting
http://bit.ly/canvasfingerpaint
Geolocation
 W3C Geolocation API
http://dev.w3.org/geo/api/spec-source.html

Get a user’s latitude/longitude coordinates:

!
navigator.geolocation.getCurrentPosition(callback_function)
!
callback_function: a function you define to receive and process the latitude/
longitude data.
Geolocation’s value in
ebooks

• Interactive atlas, road maps

• Travel/Restaurant guides customized
for user’s location

• Geolocated fiction

• Geolocation-based games
(geocaching, scavenger hunt)
 Geolocation in Action:
A Geolocated Tale
http://bit.ly/geolocatedtale

Before:
 Geolocation in Action:
A Geolocated Tale
http://bit.ly/geolocatedtale

After:
Audio/Video
 <audio id="new_slang">
<source src="new_slang.wav" type="audio/wav"/>
<source src="new_slang.mp3" type="audio/mp3"/>
Embed audio/video <source src="new_slang.ogg" type="audio/ogg"/>
<em>(Sorry, &lt;audio&gt; element not supported in your browser/

directly in your ereader, so you will not be able to listen to this song.)</em>
</audio>
!
content <video id="dancing_pony" width="300" height="300">
<source src="dancing_pony.mp4" type="video/mp4"/>
No plugins necessary <source src="dancing_pony.ogg" type="video/ogg"/>
<em>(Sorry, &lt;video&gt; element not supported in your browser/
ereader, so you will not be able to watch this video.)</em>
</video>
 Compatibility

<audio> support in Browsers

(http://en.wikipedia.org/wiki/Html5_audio#Audio_format_support)
<video> support in Browsers

(http://en.wikipedia.org/wiki/HTML5_video#Table)
 Ereader Audio/Video
Compatibility
Audio: Use MP3
Video: Use H.264/MP4

It works on: It works on:
• iBooks
• iBooks

• NOOK Color/Tablet
• NOOK Color/Tablet

• Kindle software readers • Kindle software readers
(iPad/iPhone/Android/etc.) (iPad/iPhone/Android/etc.)
 Audio in Action:
Audible Glossary
http://bit.ly/miniglossary
 Video in Action:
A clip about <canvas>
http://bit.ly/ormcanvasvid
MathML
 An XML vocabulary for
mathematical expressions

• The HTML5 specification provides native

support for MathML in HTML documents

!
• MathML provides both Presentation and
Content Markup models.
 Presentation markup tags math expressions
based on how they should be displayed
(for example, “superscripted 2”).

<math> – Root element for a mathematical expression

<mrow> – Element for grouping subexpressions

<mo> – Math operator (e.g., +, -)

<mi> – Math identifier (e.g., variable or constant)

<mn> – Number

<mfrac> – Fraction

<msqrt> – Square root

<msup> – Superscript

<msub> – Subscript

<mfenced> – Parentheses or braces
Content markup tags expressions based on the
mathematical operations performed
(e.g., “taken to the 2nd power”)

x + y + z

!
<apply>
<plus/>
<ci> x </ci>
<ci> y </ci>
<ci> z </ci>
</apply>
 Convert a famous
equation to MathML!
http://bit.ly/mathconverter
 Why write all this markup:

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle displaystyle="true">
<mi> E </mi>
<mo> = </mo>
<mi> m </mi>
<msup>
<mrow>
<mi> c </mi>
</mrow>
<mrow>
<mn> 2 </mn>
</mrow>
</msup>
</mstyle>
</math>

...when you can just embed

the equation as an image?
Advantages of MathML over images

• Equations are resizable, like text

!
• Equations can be styled with CSS

!
• Equations can be interacted with
using JavaScript
 MathML in Action:
Quadratic Equation Solver
http://bit.ly/mathml
 CSS 3
A Very Brief Overview
• New features: animations, rounded
corners, text shadows, and
transitions

!
• CSS 3 support is limited and
varies by browser

!
• CSS 3 can also be used to make
PDFs for print or Web
 Fallbacks
What if your eReader Device

doesn’t support CSS 3 or JavaScript?
When designing interactive content
for a diverse eReader ecosystem,
think about implementing fallbacks

<canvas>

<audio>

<video>

MathML

Geolocation

CSS 3

JavaScript
 Fallbacks example: CSS and JS
“Same ebook file,
different instructions”
Adobe Digital Editions:
iBooks:

No JS support Full functionality
Semantic Tagging
 HTML5 Semantic Tagging:
New tags to mark up the sections of a document
more descriptively than you could in HTML 4.01

HTML 4.01:
HTML5:

<div> <article>

<aside>

<div>

<header>

<footer>

<figure>

<figcaption>

<nav>

<section>
 Semantic Tagging:
Before and After
HTML 4.01:
HTML5:

! !
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>The United States Constitution</title> <title>The United States Constitution</title>
</head> </head>
<body> <body>
<h1>THE UNITED STATES CONSTITUTION</h1> <h1>THE UNITED STATES CONSTITUTION</h1>
<div class="section"> <section>
<h2>Preamble</h2> <h2>Preamble</h2>
<p>We the People of the United States, in Order to form <p>We the People of the United States, in Order to form
a more perfect Union...</p> a more perfect Union...</p>
</div> </section>
<div class="article"> <article>
<h2>Article I</h2> <h2>Article I</h2>
<div class="section"> <section>
<h3>Section 1</h3> <h3>Section 1</h3>
<p>All legislative Powers herein granted shall be vested <p>All legislative Powers herein granted shall be vested
in a Congress of the United States, which shall consist in a Congress of the United States, which shall consist
of a Senate and House of Representatives.</p> of a Senate and House of Representatives.</p>
</div> </section>
</div> </article>
<div class="figure"> <figure>
<img src="bald_eagle.jpg"/> <img src="bald_eagle.jpg"/>
<div class="caption">The eagle has landed</div> <figcaption>The eagle has landed</figcaption>
</div> </figure>
</body> </body>
</html> </html>
 Semantic Tagging:
Before and After
HTML 4.01: HTML5:
 So what’s the point,
if the content looks the same?
Semantic tagging is for machines,
not humans

✘ ✔
It provides a universal grammar so that
machines can more easily parse HTML content
 It’s Harder for a Machine
to parse this HTML…
<p>Web page created on January 18, 2012</p>

...than this HTML

<footer>
Web page created on
<time pubdate="2012-01-18">January 18, 2012</time>
</footer>
Extending HTML5 Semantics in EPUB
3
EPUB 3 supports “inflection” of HTML5 elements
through the epub:type attribute:
!
<section epub:type="colophon">
<p>The animal on the cover of this book is a meerkat…</p>
</section>
!
epub:type accepts the book terms defined in
the EPUB 3 Structural Semantics Vocabulary:
!
http://idpf.org/epub/vocab/structure/
!
These include: “volume”, “chapter”, “epigraph”, “appendix”, “glossary”…
 HTML5 support in today’s eReaders
<canvas> Geolocation <audio> <video> MathML

iBooks 1.x YES Sort of * YES YES YES

Nook Color/
NO NO YES YES NO
Tablet

Safari Books
YES YES YES YES YES
Online

Kindle Apps NO NO YES YES NO

Kindle Fire NO NO NO NO NO

* iBooks 1.x supports Geolocation API, but does not support calls to related APIs (Google Maps, GeoNames, etc.)
HTML5 for Publishers
by Sanders Kleinfeld

FREE

http://oreil.ly/qr38Cc