So I used to be going to tug collectively a publish wanting on the particular challenges of designing a canopy for an e-book (as opposed to a print or audiobook version), however a shopper introduced me with a problem that I assumed I’d share with you.
This is going to be a return to discussing Cascading Stylesheets (CSS), taking a look at a specific drawback with Amazon’s Kindles. Specifically, I’m going to be wanting at the annoying means that older Kindles, Amazon’s Look Inside function, and the browser-based Kindle Cloud Reader all cope with the table of contents pages in normal ePub3-based ebooks — and to make it in order that they work on both new (KF8) and previous (MOBI7) Kindles!
When our story begins, I had executed a print design and an e book conversion for my shopper Jeffrey Tauber (whose fantastic legal memoir Therapeutic Legal Justice: A Journey to Restore Group in Our Courts is free on most e-book retailers by means of the top of July). The bottom version of the e-book that I created was, as is commonest lately, an ePub3 file.
As we posted the e-book on Amazon by means of KDP, Jeffrey observed that, when he previewed his ebook on the Look Inside function or read it on the Kindle Cloud Reader, the table of contents showed an extra set of conflicting numbers/letters:
Also, the Landmarks part, which tells the ereader where in the ePub3 file sure sections of the e-book happen,1 was displaying — although it had been set by default as invisible by way of the show: none property.
The identical thing happened with older Kindles just like the Kindle 1, Kindle 2, and Kindle DX (so-called MOBI7 Kindles).2
Now, these aren’t big issues — I’d never even observed them before, to be trustworthy, nor had any of my shoppers. Nonetheless, it was esthetically ugly, and Jeffrey really needed it fastened; I utterly agreed.
I poked around for fairly a while, making an attempt various options.
None of them labored.
Finally, after speaking with some other designers on the KDP communities,3 I noticed that I had to create two separate versions of the desk of contents: one that labored on older Kindles and the browser versions, and one that labored on newer Kindles.
Here’s what the styled ToC was imagined to seem like:
Word that there aren’t any ugly duplicated (and conflicting) numbers earlier than each chapter’s listing.
None of this affected the navigation menu on any Kindle, by the best way — whereas that menu is pulled from the ToC page on newer Kindles, on older Kindles, it’s pulled from the NCX file. It was simply the actual XHTML page itself.
So right here’s what the ePub3 code appears like, straight out of the field:
Notice that the ePub3 commonplace expects the contents web page to be arrange as an ordered (that’s, numbered) listing, utilizing the
aspect, and that each item in the record (that’s, each chapter) is about off as an
component. Word too that there’s a specialized ePub3 aspect that sets the entire desk of contents off — the
tag at the bottom of the XHTML file.
Now came the magic: the CSS that makes the desk of contents work properly it doesn’t matter what sort of Kindle it displayed on.eight