EPUB in the Wild Liz Castro @lizcastro - - PowerPoint PPT Presentation
EPUB in the Wild Liz Castro @lizcastro - - PowerPoint PPT Presentation
EPUB in the Wild Liz Castro @lizcastro http://PigsGourdsandWikis.com http://www.elizabethcastro.com/epub Specifications Specifications Specifications Specifications Specifications Specifications Specifications Specifications
Specifications
Specifications
Specifications
Specifications
Specifications
Specifications
Specifications
Specifications
Manufacturer Guidelines
Manufacturer Guidelines
Manufacturer Guidelines
Objective:
One file to rule them all
3 problems
- 1. They can’t do it.
- 2. They want to do it their own way.
- 3. They won’t let you do it.
Secrecy
http://weblogs.mozillazine.org/bz/archives/2012/02/vendor_interactions_with_the_c.html
Three strategies
- Create cross platform code
- Use media queries when cross
platform code isn’t possible
- Make informed decisions about not
supporting certain platforms
Everybody supports
bold and italic font-size text-indent top and bottom margins images
iBooks on iPad Original Adobe Digital Editions -> iBooks/iPhone
Kindle Fire Kindle
NOOK Color NOOK
Many support
font family small caps leading left and right margins float and width text wrap (around images, sidebars, and drop caps) borders, backgrounds color
Adobe Digital Editions
iBooks on iPad
iBooks on iPhone
NOOK Color with Publishers Defaults OFF
NOOK Color with Publishers Defaults ON
NOOK
Kindle Fire
Kindle
Media Query example
@media amzn-mobi { span.dropcap { font-size : 3em; float: none; line-height : 1; margin-top : auto; margin-right : auto; margin-bottom: auto; font-family : sans-serif; color : #512a37; } } span.dropcap { font-size : 5em; float : left; line-height : 1.5; margin-right : 0.1em; margin-bottom: -.3em; font-family : DavysArtNouveauInitials, sans-serif; color : #512a37; }
Kindle
Watch out for...
Aligning drop cap
span.dropcap { ... line-height : 1; margin-top : .2em; margin-right : 0.1em; margin-bottom: 0em; ... } span.dropcap { ... line-height : 1.5; margin-right : 0.1em; margin-bottom: -.3em; ...}
Adjusting for narrow screen
Don’t try to fit too much in a single paragraph—float on
- ne side or other, but
not both! Don’t indent excessively
Adjusting for narrow screen
p.Poem-line { font-size: .8em; text-indent : -20px; margin : 0 0 0 20px ; padding: 0px 28px; }
iBooks and fonts
Don’t forget the .com file or else iBooks won’t display embed fonts
Cross platform dilemmas
Discretional page breaks
page-break-after: avoid Kindle, iBooks don’t support.
Discretional page breaks
Both NOOK and NOOK Color support all page-break properties
Discretional page breaks
But Kindle Fire and iBooks do support page- break-inside: avoid Create a div with header and first paragraph.
Discretional page breaks
iBooks supports page- break-inside: avoid (but no other “avoids”)
Widows and orphans
.body { widows: 3;
- rphans: 3;
}
Widows and orphans
Neither iBooks nor Kindle Fire support widows or orphans
Widows and orphans
Again, NOOK comes through
Tables
Very problematic in narrow pages
Tables
Tables
<manifest> ... <item id="table1" href="table1.html" media- type="application/xhtml+xml" /> <item id="table2" href="table2.html" media- type="application/xhtml+xml" /> ... </manifest> <spine toc="ncx"> <itemref idref="maintext" /> <itemref idref="table1"/> <itemref idref="table2" linear="no" /> </spine>
Tables
Tables
Tables
Kindle Fire does not support non-linear tables
Tables
Neither does NOOK
Tables
Results are pretty awful on Kindle
Audio and Video
iBookstore: yes, B&N + Amazon: no
Fixed Layout
iBooks and Kobo Vox use very similar systems; NOOK has closed system, Amazon new system
Javascript
Works best in iBooks; allowed in iBookstore Sketchy support on
- ther platforms
Read Aloud
iBooks and Kobo Vox only; media
- verlay on top of fixed layout; laborious
Informed choices
- How to create the best ebook that
works on the most platforms
- Sometimes, you’ll decide to leave some
devices behind
Liz Castro
- EPUB Straight to the Point
- Fixed Layout for iBooks
- Audio and Video in EPUB
- Read Aloud EPUB
- From InDesign CS 5.5 to EPUB and Kindle
- HTML/CSS Visual QuickStart Guide
- www.elizabethcastro.com/epub
- www.PigsGourdsandWikis.com
- Twitter: @lizcastro, #eprdctn, #edigital