1. From HTML 5 & CSS 3...
To ePub 3
@cwehrung

2. ePub ?

3. ePub ?

4. definition
EPUB 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.

5. JavaScript
Behavior
HTML 5 CSS 3
Content Style
ePub 3
Package
Technologies (theory)

6. HTML
Result
CSS

7. JavaScript
Behavior
HTML 5 CSS 3
Content Style
ePub 3
Package
HTML 5

8. Audio+Video Interactivity
Flash
Geolocation Local Storage

9. DEVICES SUPPORT
HTML 5 <canvas> ::geoloc:: <audio> <video> MathML
iBooks ✓ Sort Of * ✓ ✓ ✓
NOOK Color/
Tablet ✘ ✘ ✓ ✓ ✘
Safari Books
Online ✓ ✓ ✓ ✓ ✓
Kindle Apps ✘ ✘ ✓ ✓ ✘
Kindle Fire ✘ ✘ ✘ ✘ ✘

10. JavaScript
Behavior
HTML 5 CSS 3
Content Style
ePub 3
Package
CSS 3 (theory)

11. Animations Shadows
Support varies
-webkit, -moz, ... Regions

12. 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 }
}

13. 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) { … }

14. 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:focus
a:focus:hover

15. 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; }

16. 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>

17. 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>

18. 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>

19. 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>

20. 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>

21. 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>

22. JavaScript
Behavior
HTML 5 CSS 3
Content Style
ePub 3
Package
ePub 3

23. ePUB
mimetype OEBPS META-INF
Container ( iBooks )
Options

24. NEW OPPORTUNITIES

25. NEW OPPORTUNITIES

26. EPUB 3 FEATURES
Semantic Inflection
Audio+Video Content Switching
Speech
&
Manifest Fallbacks
NCX
Embedded Fonts SVG Metadata
Media Overlays
Triggers+Binding
MathML DTBook
Guide ⇢ NavigationDocuments

27. ePub 2 ePub 3
CSS 3 ✘ ✓
HTML 5 ✘ ✓
SVG In XHTML Direct in Spine
Fonts Only built-in OTF & WOFF
@font-face
Audio & Video ✘ ✓
JavaScript ✘ optionally supported
Multiple
Stylesheets ✘ ✓
Alternative to
XHTML DTBook HTML 5
Table of Content NCX Navigation Documents

28. ToC
ePub 2
<?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>

29. ToC
ePub 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&#x2019;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>

30. ePUB
META-INF
OEBPS
content.opf
mimetype OEBPS
↬ <metadata>
↬ <manifest>
↬ <spine> Container ( iBooks )
Options
↬ <guide>

31. 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>

32. media overlays
↬ text-to-speech ?

33. media overlays
↬ text-to-speech ?

34. media overlays
↬ Speech
In content.opf :
<item id="smil-003" href="smil/page1.smil" media-type="application/smil+xml"/>
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>

35. <?xml version="1.0" encoding="UTF-8"?>
SMIL
<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"> <!-- Once -->
<text src="../page003.xhtml#word1"/>
<audio clipBegin="0.562419" clipEnd=".990" src="../audio/
yellow_submarine.m4a"/>
</par>
<par id="id2"> <!-- upon -->
<text src="../page003.xhtml#word2"/>
<audio clipBegin="0.993" clipEnd="1.345" src="../audio/yellow_submarine.m4a"/>
</par>
<par id="id3"> <!-- a -->
<text src="../page003.xhtml#word3"/>
<audio clipBegin="1.345" clipEnd="1.442" src="../audio/yellow_submarine.m4a"/>
</par>
<par id="id4"> <!-- time -->
<text src="../page003.xhtml#word4"/>
<audio clipBegin="1.442" clipEnd="1.873659" src="../audio/
yellow_submarine.m4a"/>
</par>
</body>
</smil>

36. — animation —
JavaScript ?

37. JavaScript
HTML 5 CSS 3
ePub 3
ePub 3 (theory)

38. JavaScript
HTML 5 CSS 3
ePub 3
Apple (new)

39. JavaScript
HTML 5 CSS 3
ePub 3
Apple (new)

40. LAYOUT TYPES

41. LAYOUT TYPES

42. LAYOUT TYPES
ab le...
ef low
N ot R

43. LAYOUT TYPES

44. LAYOUT TYPES
Predictable !

45. Reflowable Fixed-Layout

46. WHAT ?

48. ToC
fixed-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&#x2019;s
Notes:</a>
</li>
<li
id="introduction_001">
<a
href="introduction_001.html">ETYMOLOGY.</a>
</li>
not compulsory
<li
id="epigraph_001">
<a
href="epigraph_001.html">EXTRACTS
(Supplied
by
a
Sub-­‐
⇢ links in page
Sub-­‐Librarian).</a>
</li>
(...)

49. 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;
}

50. JavaScript
HTML 5 CSS 3
ePub 3
ePub 3 (theory)

51. JavaScript
HTML 5 CSS 3
Fixed-Layout
ePub 3
ePub 3 (theory)

52. JavaScript
HTML 5 CSS 3
Fixed-Layout
ePub 3
Apple (new)

53. Standard Retina@2x

54. standard...

55. standard...
vs.
Retina

57. Standard

58. Retina@2x

60. i ze !
F ileS

62. fixed-layout rules
<guid
e>
spread vs. page
orientatio
size ratio
n -lock
resolution @media & rendition

63. fixed-layout limits
Retina localStorage
“touch” margins
-webkit-le
tter-spaci
n g
sc ree n>
! full
<