The document discusses the differences between ePub 2 and ePub 3 formats. ePub 3 includes new features such as support for HTML5, CSS3, SVG, audio and video, JavaScript, and alternative navigation documents. It also describes layout types in ePub including reflowable and fixed layout. Fixed layout does not reflow content to fit different screens and may require metadata for proper display on devices.

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
<