In the Trenches with Accessible EPUB - Charles LaPierre - ebookcraft 2017
The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld
-
Upload
booknet-canada -
Category
Education
-
view
323 -
download
2
Transcript of The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld
![Page 1: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/1.jpg)
The Ebook Developer's Toolbox
Sanders KleinfeldO’Reilly Media, Inc.Twitter: @sandersk
ebookcraft 2016
![Page 2: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/2.jpg)
An Inconvenient Truth…
![Page 3: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/3.jpg)
Ebooks are made of CODE!!!
![Page 4: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/4.jpg)
![Page 5: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/5.jpg)
Technologies of the Trade:
![Page 6: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/6.jpg)
(X)HTML CSS JSXSLT
regexRDF NCX
ONIX
MOBI EPUB
MathML SVG XPath
OPFOTF
WOFF LATEX
WTF?!
![Page 7: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/7.jpg)
Tools/Techniques of the Trade:
![Page 8: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/8.jpg)
InDesign Media QueriesKindlegenoXygen
MathML Cloud“View Source
”CSSLint
Readium
jQuery Sass
Acrobat
Kindle Previewer
iBooks Author
epubcheck
ADE
FontForge FileFormat.info
BISG EPUB 3 Support
Grid
![Page 9: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/9.jpg)
“What’s in my Toolbox?”
![Page 10: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/10.jpg)
Three Indispensable Tools for my Workflow
1.XSLT
2.Responsive Ebook Design Techniques
3.Equation Processing with MathML Cloud
![Page 11: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/11.jpg)
XSLT 101
![Page 12: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/12.jpg)
Pop Quiz #1: XSLT is…
A: An acronym for “Extensible Stylesheet Language Transformations”
B: A programming language written in XML syntax
C: An official W3C Specification
D: All of the above
![Page 13: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/13.jpg)
Pop Quiz #1: XSLT is…
A: An acronym for “Extensible Stylesheet Language Transformations”
B: A programming language written in XML syntax
C: An official W3C Specification
D: All of the above
(http://www.w3.org/TR/xslt-30)
![Page 14: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/14.jpg)
XSLT is a tool for global, programmatic markup manipulation
![Page 15: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/15.jpg)
<body> <div class="section"> <p><b>Chapter 1</b></p>HTML5 is really great, because there are lots of new elements to facilitate meaningfultagging of content.<br/><br/>Also, they deprecated a lot of yucky <font color="green">non-semantic stuff.</font> </div></body>
<body> <section> <h1>Chapter 1<h1><p>HTML5 is really great, because there are lots of new elements to facilitate meaningful tagging of content.</p><p>Also, they deprecated a lot of yucky <span style="color: green;">non-semantic stuff.</span></p> </section></body>
XSLT😢 😎
![Page 16: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/16.jpg)
Rhetorical Question #1:
“Um, can’t I just use regular expressions
for this?”
![Page 17: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/17.jpg)
Example: Converting <b> to <em>
with regex
your_markup.replace(/<b>/, '<em>')
![Page 18: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/18.jpg)
But what about:•Closing tags (</b>)•Attributes (<b class="term">)•Extra Whitespace (<b >)
your_markup.replace(/<(\/)?b(\s*[^>]*)>/g, '<$1em$2>')
![Page 19: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/19.jpg)
A Stack Overflow Classic:“You can’t parse [X]HTML with regex”
(http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags)
![Page 20: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/20.jpg)
XSLT leverages a functional* paradigm
* Many folks have salient objections to calling XSLT a functional programming language (e.g., http://www.snoyman.com/blog/2012/04/xslt-rant.html), but document processing with XSLT still embodies the spirit of functional programming, and it feels pedantic to me to deny that.
![Page 21: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/21.jpg)
<markup> <!--Input--></markup>
Functional Paradigmin XSLT
<markup> <!--Output--></markup>
<xsl:stylesheet>
<xsl:template match="..."> <!—Stuff happens here--> </xsl:template>
<xsl:template match="..."> <!—Stuff happens here--> </xsl:template>
</xsl:stylesheet>
![Page 22: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/22.jpg)
f(x) = 1 * x
Identity Function*in Algebra
* Output of function is identical to input
![Page 23: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/23.jpg)
Identity Stylesheet*in XSLT
* Output of stylesheet is identical to input
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
![Page 24: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/24.jpg)
Rhetorical Question #2:
“Say What?”
![Page 25: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/25.jpg)
Identity Stylesheetin XSLT: Explained
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
BEGIN stylesheet
END stylesheet
BEGIN matching function
Match any node (element, attribute, text)
BEGIN copy matched node (OPEN elem)END Copy matched node (CLOSE elem)
Select any node
END matching function
Run stylesheet against specified children of matched node
![Page 26: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/26.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
![Page 27: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/27.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
![Page 28: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/28.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body>
</body>
![Page 29: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/29.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body>
</body>
![Page 30: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/30.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body>
</body>
![Page 31: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/31.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p>
</p></body>
![Page 32: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/32.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p>
</p></body>
![Page 33: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/33.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p>
</p></body>
![Page 34: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/34.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p class="greet">
</p></body>
![Page 35: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/35.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p class="greet">
</p></body>
![Page 36: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/36.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p class="greet">
</p></body>
![Page 37: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/37.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p class="greet"> Hello World</p></body>
![Page 38: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/38.jpg)
Identity Stylesheet in XSLT: How it Works
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:stylesheet>
<body> <p class="greet"> Hello World </p></body>
Stylesheet Input XHTML Output XHTML
<body><p class="greet"> Hello World</p></body>
![Page 39: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/39.jpg)
Rhetorical Question #5:
“OK, so how do you actually transform
the output”
![Page 40: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/40.jpg)
You can override the identity templates with other, more specific matching templates (just as you override rules with other rules in CSS)
CSS XSLT
* { font-size: 10px;}
h1 { /* Custom Handling */ font-size: 20px;}
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy></xsl:template>
<xsl:template match="h1"> <xsl:copy> <!--Custom handling--> <xsl:apply-templates/> </xsl:copy></xsl:template>
</xsl:stylesheet>
![Page 41: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/41.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="p[@class='greet']"> <h1> <xsl:apply-templates select="@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
XPath matching all p elements with a class of “greet”
![Page 42: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/42.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
![Page 43: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/43.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
![Page 44: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/44.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body>
</body>
![Page 45: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/45.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body>
</body>
![Page 46: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/46.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body>
</body>
![Page 47: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/47.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1>
</h1></body>
![Page 48: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/48.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1>
</h1></body>
![Page 49: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/49.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1>
</h1></body>
![Page 50: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/50.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet">
</h1></body>
![Page 51: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/51.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet">
</h1></body>
![Page 52: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/52.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet">
</h1></body>
![Page 53: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/53.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1></body>
![Page 54: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/54.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1></body>
![Page 55: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/55.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1></body>
![Page 56: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/56.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1> <p></p></body>
![Page 57: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/57.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1> <p></p></body>
![Page 58: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/58.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1> <p></p></body>
![Page 59: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/59.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1> <p>What’s up?</p></body>
![Page 60: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/60.jpg)
Our first transform: Convert all <p class="greet"> elements to <h1>s
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match=“p[@class=‘greet’]”> <h1> <xsl:apply-templates select=“@*|node()"/> </h1> </xsl:template></xsl:stylesheet>
<body> <p class="greet"> Hello World </p> <p>What’s up?</p></body>
Stylesheet Input XHTML Output XHTML
<body> <h1 class="greet"> Hello World </h1> <p>What’s up?</p></body>
![Page 61: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/61.jpg)
Pop Quiz #2: What does this transform do?
XSLT INPUT XHTML
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
![Page 62: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/62.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
![Page 63: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/63.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
![Page 64: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/64.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p></p>
![Page 65: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/65.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p></p>
![Page 66: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/66.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p></p>
![Page 67: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/67.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
![Page 68: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/68.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
![Page 69: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/69.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
![Page 70: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/70.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
![Page 71: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/71.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning is awesome!</p>
![Page 72: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/72.jpg)
Pop Quiz #2 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"/></xsl:stylesheet>
<p>Learning <strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning is awesome!</p>
![Page 73: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/73.jpg)
Pop Quiz #3: Write XSLT that drops <strong> tags from the HTML below, but preserves the text content inside
the tagsINPUT XHTML
<p>Learning <strong>XSLT</strong> is awesome!</p>
DESIRED OUTPUT XHTML
<p>Learning XSLT is awesome!</p>
![Page 74: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/74.jpg)
Pop Quiz #3 Solution
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
<xsl:template match="strong"> <xsl:apply-templates/> </xsl:template>
</xsl:stylesheet>
BEGIN match “strong” element
Select child nodes (except attributes) of matched “strong” element
End match “strong” element
![Page 75: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/75.jpg)
Intermediate Topics•XPath expressions
•Conditionals (xsl:if, xsl:choose/xsl:when/xsl:otherwise)
•Looping/Grouping(xsl:for-each, xsl:for-each-group)
•Numbering/Labeling(xsl:number)
•Includes/Imports(xsl:include/xsl:import)
![Page 76: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/76.jpg)
My Favorite XSLT Reference Book
![Page 77: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/77.jpg)
Responsive Ebook Design
![Page 78: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/78.jpg)
What do we mean by responsive
design?
![Page 79: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/79.jpg)
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the
same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our
designs to make them not only more flexible, but more adaptive to the media that renders
them.”
— Ethan Marcotte“Responsive Web Design”
http://alistapart.com/article/responsive-web-design
![Page 80: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/80.jpg)
Responsive Ebook Design:
Four Principles
![Page 81: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/81.jpg)
1. Content is split into pages
(Safari for Mac) (iBooks for Mac)
![Page 82: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/82.jpg)
2. Content reflows from page to page
(iBooks for iPhone) (iBooks for iPad)
![Page 83: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/83.jpg)
3. Content settings are user-configurable
User #1’s settings User #2’s settings
![Page 84: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/84.jpg)
4. Single ebook archive for all platforms
(iBooks) (NOOK)
(Google Play)
(Kobo) (Kindle)*
(Universal Ebook)
* Either converted to MOBI via KindleGen, or submitted to Amazon for conversion
![Page 85: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/85.jpg)
Responsive Ebook Design Toolbox:
CSS Media Queries
![Page 86: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/86.jpg)
Media Queries encapsulate CSS rules to be applied only when certain display conditions are satisfied,
such as:
•Screen dimensions fall within a given width/height range
•Screen is monochrome or color
•Screen orientation is portrait or landscape
![Page 87: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/87.jpg)
Media Query Syntax*
@media media-type and (media-feature) { /* CSS Rules to be applied */}
* Media queries may contain an optional media type, followed by zero or more media features in parentheses delimited by “and”.
![Page 88: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/88.jpg)
Some Key W3C-Specified Media Types:
•all - applied on any device
•print - applied to output for printers
•speech - applied on screen readers
•screen - applied to any display that is not print or speech, which encompasses most Web browsers and readers
![Page 89: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/89.jpg)
Kindle’s Custom Media Types*:
•amzn-kf8 - applied on any Kindle device or app that supports Amazon’s Kindle Format 8 specification
•amzn-mobi - applied to Kindle devices or apps that support only the legacy MOBI 7 format.
* See Chapter 8 of Kindle Publisher Guidelines
![Page 90: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/90.jpg)
Example #1: Kindle’s Recommended Media
Queries for table handling*@media amzn-mobi { table.complex { /* Suppress display of complex tables on MOBI and use fallback image instead */ display: none; }}
@media amzn-kf8 { img.table_fallback { /* Suppress display of table fallback images on KF8, which can support complex tables */ display: none; }}
* See Chapter 8 of Kindle Publisher Guidelines
![Page 91: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/91.jpg)
Some Key W3C-Specified Media Features:
•(min-|max-)width - query the width of the current display window.
•(min-|max-)device-width* - query the screen width of the device
•(min-|max-)height - query the height of the current display window
•(min-|max-)device-height* - query the screen height of the device
•orientation - query whether orientation is currently portrait or landscape
•color - query whether the display is color
•monochrome - query whether the display is monochrome
* Deprecated in Media Queries Level 4
![Page 92: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/92.jpg)
Example #2: Media Query for iBooks for iPad
@media (min-device-width:768px) and (max-device-width:1024px) { #usernote::before { content: “You are reading this on iBooks for iPad"; }}
![Page 93: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/93.jpg)
iBooks Ereader Detectorhttps://github.com/sandersk/ibooks_ereader_detector
![Page 94: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/94.jpg)
Example #3: Media query to target both
iBooks + KF8-enabled Kindle*
@media not amzn-mobi { /* Styling for everything that _is not_ a MOBI 7 platform */}
* See Liz Castro’s “Media Queries for formatting Poetry on Kindle and EPUB” for real-world applications.
![Page 95: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/95.jpg)
Responsive Ebook Design Toolbox:
CSS Fragmentation
![Page 96: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/96.jpg)
Some Key W3C-Specified Fragmentation Properties:*
•page-break-before - configure page breaking rules before specified element(s)
•page-break-after - configure page breaking rules after specified element(s)
•page-break-inside - configure page breaking rules within specified element(s)* CSS Fragmentation Module Level 3 no longer mandates “page-” prefix on these properties, but it’s a good idea to keep them for broad ereader compatibility
![Page 97: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/97.jpg)
page-break- properties accept the following values
•auto - Defer to browser/ereader on pagebreak here (default)
•avoid - Avoid pagebreak here•always - Always pagebreak here •left - Add one or two pagebreaks to
make next page a left page•right - Add one or two pagebreaks to
make next page a right page•inherit - Inherit pagebreak rules from
parent element** “page-break” rules are not inherited by default
![Page 98: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/98.jpg)
Example #1: Force pagebreaks before top-
level headings
h1 { page-break-before: always }
![Page 99: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/99.jpg)
Example #2: Avoid pagebreaks within
figures
figure { page-break-inside: avoid }
![Page 100: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/100.jpg)
Some More Key W3C-Specified Fragmentation Properties:*
•orphans - specify minimum number of lines within an element that must be preserved before a page boundary (at bottom of page)
•widows - specify minimum number of lines within an element that must be preserved after a page boundary (at top of page)
* Default value is 2 for both properties
![Page 101: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/101.jpg)
Example #3: Require three paragraph lines to “stay together” at both the
bottom and top of pages
p { orphans: 3 widows: 3 }
![Page 102: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/102.jpg)
For more, read my article
“Responsive Ebook Design: A Primer”
![Page 103: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/103.jpg)
Accessible Math with MathML Cloud
(MathJax)
![Page 104: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/104.jpg)
The Publisher’s Challenge: How to produce high-quality,
accessible mathematical content across ereader
platforms
![Page 106: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/106.jpg)
MathML in EPUB (iBooks)
![Page 107: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/107.jpg)
MathML in EPUB (NOOK)
![Page 108: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/108.jpg)
MathML in Mobi (Kindle Fire)
![Page 110: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/110.jpg)
SVG in EPUB (iBooks)
![Page 111: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/111.jpg)
SVG in Mobi (Kindle Voyage)
![Page 112: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/112.jpg)
SVG in Mobi (Kindle “classic”)
![Page 113: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/113.jpg)
The only reliable, universal choice is
bitmap images
![Page 114: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/114.jpg)
But how can we automate creation of
equation images…
![Page 115: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/115.jpg)
…And what about accessibility?
![Page 116: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/116.jpg)
MathML Cloud provides a solution for automation and
accessibility
http://mathmlcloud.org
![Page 118: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/118.jpg)
MathML Cloud is open source, built on mathjax-node
https://github.com/benetech/mmlc-api/
![Page 119: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/119.jpg)
“What’s in YOUR Toolbox?”
![Page 120: The Ebook Developer's Toolbox - ebookcraft 2016 - Sanders Kleinfeld](https://reader035.fdocuments.in/reader035/viewer/2022070514/58817bb71a28ab0b398b4737/html5/thumbnails/120.jpg)
Thank You!☺📖📱
Contact Me:@sandersk