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

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

Original iBooks on iPad iBooks/iPhone Adobe Digital Editions ->

Kindle Fire Kindle

NOOK NOOK Color

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 { span.dropcap { font-size : 5em; font-size : 3em; float : left; float: none; line-height : 1.5; line-height : 1; margin-right : 0.1em; margin-top : auto; margin-bottom: -.3em; margin-right : auto; font-family : margin-bottom: auto; DavysArtNouveauInitials, font-family : sans-serif; sans-serif; color : #512a37; 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 one 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; orphans: 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 other platforms

Read Aloud iBooks and Kobo Vox only; media overlay 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