Date post: | 24-Jan-2015 |
Category: |
Technology |
Upload: | clement-wehrung |
View: | 18,781 times |
Download: | 6 times |
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>
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
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>
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>
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"> <!-- 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>
SMIL
— 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