ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)

From HTML 5 & CSS 3...To ePub 3

@cwehrung

ePub ?

ePub ?

definitionEPUB defines a means of representing, packaging and encoding structured and semantically enhanced Web content — including HTML5, CSS, SVG, images, and other resources — for distribution in a single-file format.

HTML 5Content

CSS 3Style

ePub 3Package

Technologies

JavaScriptBehavior

(theory)

HTML

CSS

Result

CSS 3Style

ePub 3Package

HTML 5

JavaScriptBehavior

HTML 5Content

Audio+Video

Flash

Interactivity

Geolocation Local Storage

DEVICES SUPPORT

HTML 5 <canvas> ::geoloc:: <audio> <video> MathML

iBooks

NOOK Color/Tablet

Safari Books Online

Kindle Apps

Kindle Fire

✓ Sort Of * ✓ ✓ ✓✘ ✘ ✓ ✓ ✘ ✓ ✓ ✓ ✓ ✓✘ ✘ ✓ ✓ ✘ ✘ ✘ ✘ ✘ ✘

HTML 5Content

ePub 3Package

CSS 3

JavaScriptBehavior

(theory)

CSS 3Style

Animations

Support varies

Shadows

-webkit, -moz, ... Regions

Media Queries

HTML 4

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"><link rel="stylesheet" type="text/css" media="print" href="serif.css">

CSS 3

@media screen { * { font-family: sans-serif }}

Media Queries

HTML 4

<link rel="stylesheet" media="screen and (color)" href="example.css" />

CSS 3

@import url(color.css) screen and (color);

Other examples:

@media (orientation: portrait) { … }

@media (min-width:500px) { … }

Selectors

You already know:

a:link /* unvisited links */a:visited /* visited links */a:hover /* user hovers */a:active /* active links */

An example of combining dynamic pseudo-classes:

a:focusa:focus:hover

Selectors

The ::before and ::after pseudo-elements

h1:before { content : "> " }

Structural pseudo-classes

tr:nth-child(odd) /* represents every odd row of an HTML table */tr:nth-child(even) /* represents every even row of an HTML table */

/* Alternate paragraph colours in CSS */p:nth-child(4n+1) { color: navy; }p:nth-child(4n+2) { color: green; }p:nth-child(4n+3) { color: maroon; }p:nth-child(4n+4) { color: purple; }

Selectors

div > p:first-child

This selector represents a p element that is the first child of a div element:

<p> The last P before the note.</p><div class="note"><p> The first P inside the note.</p></div>

but cannot represent the second p in the following fragment:

<p> The last P before the note.</p><div class="note"><h2> Note </h2><p> The first P inside the note.</p></div>

Selectors

p { color: red; font-size: 12pt }p::first-letter { color: green; font-size: 200% }p::first-line { color: blue }

<P>A bird in the hand is worth two in the bush...</P>

Combinators

Descendant combinator E F (1) — matches an element F that’s a descendant of an element E. Note that descendant combinators target all descendants and not just direct children.

ul li {background: red;}

<ul> <li>List Item 1</li> <li>List Item 2 <ol> <li>List Item 2-1</li> <li>List Item 2-2</li> </ol> </li> <li>List Item 3</li></ul>

Combinators

Child combinator E > F (2) — matches an element F that’s a child of an element E. The difference here is that F must be a direct child of E.

ul>li {background: red;}

<ul> <li>List Item 1</li> <li>List Item 2 <ol> <li>List Item 2-1</li> <li>List Item 2-2</li> </ol> </li> <li>List Item 3</li></ul>

http://css-tricks.com/5514-child-and-sibling-selectors/

http://css-tricks.com/5514-child-and-sibling-selectors/

Combinators

Adjacent sibling combinator E + F (2) — matches an element F immediately preceded by an element E. Note the word adjacent. Only the first element F after E will be targeted.

h1+p {background: red;}

<h1>Heading</h1><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p>

Combinators

General sibling combinator E ~ F (3) — matches an element F preceded by an element E. Unlike the above this will match any sibling and not just the first.

h1+p {background: red;}

<h1>Heading</h1><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p>

HTML 5Content

CSS 3Style

ePub 3Package

ePub 3

JavaScriptBehavior

ePUB

OEBPS META-INFmimetype

Container ( iBooks ) Options

NEW OPPORTUNITIES

NEW OPPORTUNITIES

EPUB 3 FEATURES

SVG

MathML

&

Semantic InflectionContent Switching

NCX

Triggers+Binding

Embedded Fonts

Audio+Video

Media Overlays

Metadata

SpeechManifest Fallbacks

DTBookGuide ⇢ NavigationDocuments

ePub 2 ePub 3CSS 3

HTML 5

SVG

Fonts

Audio & Video

JavaScript

Multiple Stylesheets

Alternative to XHTML

Table of Content

✘ ✓✘ ✓

In XHTML Direct in Spine

Only built-in OTF & WOFF@font-face

✘ ✓✘ optionally supported

✘ ✓DTBook HTML 5

NCX Navigation Documents

<?xml version="1.0" encoding="UTF-‐8"?><ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-‐1" xml:lang="en-‐US"><head><meta name="dtb:uid" content="p9780316000000"/></head><docTitle><text>Moby-‐Dick</text></docTitle><docAuthor><text>Herman Melville</text></docAuthor><navMap>(...)<navPoint playOrder="4" id="introduction_001"><navLabel><text>ETYMOLOGY.</text></navLabel><content src="introduction_001.html"/></navPoint><navPoint playOrder="5" id="epigraph_001"><navLabel><text>EXTRACTS (Supplied by a Sub-‐Sub-‐Librarian).</text></navLabel><content src="epigraph_001.html"/></navPoint>

ToCePub 2

http://www.daisy.org/z3986/2005/ncx/




ToCePub 3

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"profile="http://www.idpf.org/epub/30/profile/content/"><head><title>Moby-‐Dick</title></head><body><nav id="toc" epub:type="toc"><h1>Contents</h1><ol><li id="cover"><a href="cover.html">Cover</a></li><li id="titlepage"><a href="titlepage.html">Title Page</a></li><li id="preface_001"><a href="preface_001.html">Original Transcriber’s Notes:</a></li><li id="introduction_001"><a href="introduction_001.html">ETYMOLOGY.</a></li><li id="epigraph_001"><a href="epigraph_001.html">EXTRACTS (Supplied by a Sub-‐Sub-‐Librarian).</a></li>

http://www.w3.org/1999/xhtml


http://www.idpf.org/2007/ops


http://www.idpf.org/epub/30/profile/content/




content.opf↬ <metadata>

↬ <manifest>

↬ <spine>

↬ <guide>

ePUB

OEBPS

META-INF

mimetype

Container ( iBooks ) Options

OEBPS

content.opf<?xml version="1.0" encoding="utf-8" standalone="no"?><package xmlns="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0" unique-identifier="bookid"> <metadata> <dc:identifier id="bookid">urn:uuid:9782081266766</dc:identifier> <dc:title>My Little Paris</dc:title> <dc:publisher>Gutenberg Technology</dc:publisher> <dc:date >2012-02-07</dc:date> <dc:creator xmlns:opf="http://www.idpf.org/2007/opf" opf:file-as="Daly, Liza">Vasak, Vladimir</dc:creator> <dc:language>fr</dc:language> <meta name="cover" content="cover-image"/> </metadata> <manifest> <item id="ncxtoc" media-type="application/x-dtbncx+xml" href="toc.ncx" /> <item id="cover-image" media-type="image/jpeg" href="cover.jpg" /> <item id="font1" media-type="application/octet-stream" href="fonts/BZLJKT_HelveticaNeue-Light.ttf" /> <item id="css1" media-type="text/css" href="1.css" /> <item id="page1" media-type="application/xhtml+xml" href="1.html" /> </manifest> <spine toc="ncxtoc"> <itemref idref="page1" linear="yes" /> <itemref idref="page2" linear="yes" /> <itemref idref="page3" linear="yes" /> </spine> <guide> <reference type="cover" title="Cover" href="1.html"/> <reference type="text" title="Cover" href="1.html"/> </guide></package>

http://www.idpf.org/2007/opf


http://purl.org/dc/elements/1.1/

http://purl.org/dc/elements/1.1/



media overlays↬ text-to-speech ?

media overlays↬ text-to-speech ?

In content.opf :

<item id="smil-003" href="smil/page1.smil" media-type="application/smil+xml"/>

media overlays↬ Speech

In page1.xhtml :

<p><span id="word1">Once</span> <span id="word2">upon</span> <span id="word3">a</span> <span id="word4">time</span>...</p>

<?xml version="1.0" encoding="UTF-8"?><smil xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2011/epub" version="3.0" profile="http://www.idpf.org/epub/30/profile/content/"> <body> <par id="id1">  <text src="../page003.xhtml#word1"/> <audio clipBegin="0.562419" clipEnd=".990" src="../audio/yellow_submarine.m4a"/> </par> <par id="id2">  <text src="../page003.xhtml#word2"/> <audio clipBegin="0.993" clipEnd="1.345" src="../audio/yellow_submarine.m4a"/> </par> <par id="id3">  <text src="../page003.xhtml#word3"/> <audio clipBegin="1.345" clipEnd="1.442" src="../audio/yellow_submarine.m4a"/> </par> <par id="id4">  <text src="../page003.xhtml#word4"/> <audio clipBegin="1.442" clipEnd="1.873659" src="../audio/yellow_submarine.m4a"/> </par> </body></smil>

SMIL

http://www.w3.org/ns/SMIL

http://www.w3.org/ns/SMIL

http://www.idpf.org/2011/epub






— animation — JavaScript ?

HTML 5 CSS 3

ePub 3

JavaScript

ePub 3 (theory)

HTML 5 CSS 3

ePub 3

JavaScript

Apple (new)

HTML 5 CSS 3

ePub 3

JavaScript

Apple (new)

LAYOUT TYPES

LAYOUT TYPES

LAYOUT TYPES

Not Reflowable...

LAYOUT TYPES

LAYOUT TYPES

Predictable !

Reflowable Fixed-Layout

WHAT ?

ToCfixed-layout

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:epub="http://www.idpf.org/2007/ops"profile="http://www.idpf.org/epub/30/profile/content/"><head><title>Moby-‐Dick</title></head><body><nav id="toc" epub:type="toc"><h1>Contents</h1><ol><li id="cover"><a href="cover.html">Cover</a></li><li id="titlepage"><a href="titlepage.html">Title Page</a></li><li id="preface_001"><a href="preface_001.html">Original Transcriber’s Notes:</a></li><li id="introduction_001"><a href="introduction_001.html">ETYMOLOGY.</a></li><li id="epigraph_001"><a href="epigraph_001.html">EXTRACTS (Supplied by a Sub-‐Sub-‐Librarian).</a></li>

(...)

✗not compulsory⇢ links in page












viewport + metadata ?In META-INF/com.apple.ibooks.display-options.xml

<?xml version="1.0" encoding="UTF-‐8"?><display_options><platform name="*"><option name="fixed-‐layout">true</option></platform></display_options>

In any xhtml content

<meta name="viewport" content="width=512, height=758"></meta>

In any css stylesheet

body { width: 758px; height: 512px; }

HTML 5 CSS 3

ePub 3

JavaScript

ePub 3 (theory)

HTML 5 CSS 3

ePub 3

JavaScript

Fixed-Layout

ePub 3 (theory)

HTML 5 CSS 3

ePub 3

JavaScript

Fixed-Layout

Apple (new)

Standard Retina@2x

standard...

standard...

Retinavs.

Standard

Retina@2x

File Size !

<guide>

size ratiospread vs. page

resolution @media & rendition

orientation-lock

fixed-layout rules

fixed-layout limits

<! fullscreen>

Retina localStorage“touch” margins

-webkit-letter-spacing