ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
-
Upload
clement-wehrung -
Category
Technology
-
view
18.783 -
download
6
description
Transcript of ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
![Page 1: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/1.jpg)
From HTML 5 & CSS 3...To ePub 3
@cwehrung
![Page 2: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/2.jpg)
ePub ?
![Page 3: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/3.jpg)
ePub ?
![Page 4: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/4.jpg)
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.
![Page 5: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/5.jpg)
HTML 5Content
CSS 3Style
ePub 3Package
Technologies
JavaScriptBehavior
(theory)
![Page 6: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/6.jpg)
HTML
CSS
Result
![Page 7: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/7.jpg)
CSS 3Style
ePub 3Package
HTML 5
JavaScriptBehavior
HTML 5Content
![Page 8: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/8.jpg)
Audio+Video
Flash
Interactivity
Geolocation Local Storage
![Page 9: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/9.jpg)
DEVICES SUPPORT
HTML 5 <canvas> ::geoloc:: <audio> <video> MathML
iBooks
NOOK Color/Tablet
Safari Books Online
Kindle Apps
Kindle Fire
✓ Sort Of * ✓ ✓ ✓✘ ✘ ✓ ✓ ✘ ✓ ✓ ✓ ✓ ✓✘ ✘ ✓ ✓ ✘ ✘ ✘ ✘ ✘ ✘
![Page 10: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/10.jpg)
HTML 5Content
ePub 3Package
CSS 3
JavaScriptBehavior
(theory)
CSS 3Style
![Page 11: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/11.jpg)
Animations
Support varies
Shadows
-webkit, -moz, ... Regions
![Page 12: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/12.jpg)
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 }}
![Page 13: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/13.jpg)
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) { … }
![Page 14: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/14.jpg)
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
![Page 15: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/15.jpg)
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; }
![Page 16: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/16.jpg)
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>
![Page 17: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/17.jpg)
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>
![Page 18: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/18.jpg)
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>
![Page 19: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/19.jpg)
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>
![Page 20: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/20.jpg)
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>
![Page 21: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/21.jpg)
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>
![Page 22: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/22.jpg)
HTML 5Content
CSS 3Style
ePub 3Package
ePub 3
JavaScriptBehavior
![Page 23: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/23.jpg)
ePUB
OEBPS META-INFmimetype
Container ( iBooks ) Options
![Page 24: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/24.jpg)
NEW OPPORTUNITIES
![Page 25: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/25.jpg)
NEW OPPORTUNITIES
![Page 26: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/26.jpg)
EPUB 3 FEATURES
SVG
MathML
&
Semantic InflectionContent Switching
NCX
Triggers+Binding
Embedded Fonts
Audio+Video
Media Overlays
Metadata
SpeechManifest Fallbacks
DTBookGuide ⇢ NavigationDocuments
![Page 27: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/27.jpg)
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
![Page 28: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/28.jpg)
<?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
![Page 29: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/29.jpg)
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>
![Page 30: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/30.jpg)
content.opf↬ <metadata>
↬ <manifest>
↬ <spine>
↬ <guide>
ePUB
OEBPS
META-INF
mimetype
Container ( iBooks ) Options
OEBPS
![Page 31: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/31.jpg)
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>
![Page 32: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/32.jpg)
media overlays↬ text-to-speech ?
![Page 33: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/33.jpg)
media overlays↬ text-to-speech ?
![Page 34: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/34.jpg)
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>
![Page 35: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/35.jpg)
<?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
![Page 36: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/36.jpg)
— animation — JavaScript ?
![Page 37: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/37.jpg)
HTML 5 CSS 3
ePub 3
JavaScript
ePub 3 (theory)
![Page 38: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/38.jpg)
HTML 5 CSS 3
ePub 3
JavaScript
Apple (new)
![Page 39: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/39.jpg)
HTML 5 CSS 3
ePub 3
JavaScript
Apple (new)
![Page 40: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/40.jpg)
LAYOUT TYPES
![Page 41: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/41.jpg)
LAYOUT TYPES
![Page 42: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/42.jpg)
LAYOUT TYPES
Not Reflowable...
![Page 43: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/43.jpg)
LAYOUT TYPES
![Page 44: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/44.jpg)
LAYOUT TYPES
Predictable !
![Page 45: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/45.jpg)
Reflowable Fixed-Layout
![Page 46: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/46.jpg)
WHAT ?
![Page 47: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/47.jpg)
![Page 48: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/48.jpg)
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
![Page 49: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/49.jpg)
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; }
![Page 50: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/50.jpg)
HTML 5 CSS 3
ePub 3
JavaScript
ePub 3 (theory)
![Page 51: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/51.jpg)
HTML 5 CSS 3
ePub 3
JavaScript
Fixed-Layout
ePub 3 (theory)
![Page 52: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/52.jpg)
HTML 5 CSS 3
ePub 3
JavaScript
Fixed-Layout
Apple (new)
![Page 53: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/53.jpg)
Standard Retina@2x
![Page 54: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/54.jpg)
standard...
![Page 55: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/55.jpg)
standard...
Retinavs.
![Page 56: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/56.jpg)
![Page 57: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/57.jpg)
Standard
![Page 58: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/58.jpg)
Retina@2x
![Page 59: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/59.jpg)
![Page 60: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/60.jpg)
File Size !
![Page 61: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/61.jpg)
![Page 62: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/62.jpg)
<guide>
size ratiospread vs. page
resolution @media & rendition
orientation-lock
fixed-layout rules
![Page 63: ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)](https://reader034.fdocuments.in/reader034/viewer/2022052307/54c370e74a7959a1188b459e/html5/thumbnails/63.jpg)
fixed-layout limits
<! fullscreen>
Retina localStorage“touch” margins
-webkit-letter-spacing