Now You Seem Them… — A CSS Trick for New and Old Kindles

by | Jul 25, 2019

By David Kudler

So I was going to pull together a post looking at the specific challenges of designing a cover for an ebook (as opposed to a print or audiobook edition), but a client presented me with a challenge that I thought I’d share with you.

This is going to be a return to discussing Cascading Stylesheets (CSS), looking at a particular problem with Amazon’s Kindles. Specifically, I’m going to be looking at the annoying way that older Kindles, Amazon’s Look Inside feature, and the browser-based Kindle Cloud Reader all deal with the table of contents pages in standard ePub3-based ebooks — and to make it so they work on both new (KF8) and old (MOBI7) Kindles!

When our story begins, I had done a print design and an ebook conversion for my client Jeffrey Tauber (whose wonderful legal memoir Healing Criminal Justice: A Journey to Restore Community in Our Courts is free on most ebook retailers through the end of July). The base version of the ebook that I created was, as is most common these days, an ePub3 file.

As we posted the ebook on Amazon through KDP, Jeffrey noticed that, when he previewed his book on the Look Inside feature or read it on the Kindle Cloud Reader, the table of contents showed an extra set of conflicting numbers/letters:

Also, the Landmarks section, which tells the ereader where in the ePub3 file certain sections of the book occur,1 was showing — even though it had been set by default as invisible via the display: none property.

The same thing happened with older Kindles like the Kindle 1, Kindle 2, and Kindle DX (so-called MOBI7 Kindles).2

Now, these are not huge problems — I’d never even noticed them before, to be honest, nor had any of my clients. Still, it was esthetically ugly, and Jeffrey really wanted it fixed; I completely agreed.

I poked around for quite a while, trying a number of solutions.

None of them worked.

Ultimately, after talking with some other designers on the KDP communities,3 I realized that I had to create two separate versions of the table of contents: one that worked on older Kindles and the browser versions, and one that worked on newer Kindles.

Here’s what the styled ToC was supposed to look like:

Note that there aren’t any ugly duplicated (and conflicting) numbers before each chapter’s listing.

None of this affected the navigation menu on any Kindle, by the way — while that menu is pulled from the ToC page on newer Kindles, on older Kindles, it’s pulled from the NCX file. It was just the actual XHTML page itself.

So here’s what the ePub3 code looks like, straight out of the box:


Notice that the ePub3 standard expects the contents page to be set up as an ordered (that is, numbered) list, using the <ol> element, and that each item in the list (that is, each chapter) is set off as an <li> element. Note too that there’s a specialized ePub3 element that sets the whole table of contents off — the <nav> element.

Now, the default list-style-type property for ePub3 <nav> elements is none — meaning that there shouldn’t ever be a number or bullet before an item that you didn’t type in yourself. You shouldn’t have to do anything to make it display properly. And you don’t on any current ereader, including all of the KF8 Kindles. But it doesn’t work on some older ereaders — most specifically the MOBI7 Kindles, the Look Inside feature, and the Kindle Cloud Reader. Grr.4

Here’s the HTML for the Landmarks section:


It’s set up almost exactly the same way as the ToC section. Notice, by the way, that as I mentioned the Landmarks section has the display property is set to none!important. That should have made it so that that section never showed up.

That wasn’t the case.

I tried a number of solutions, including using @media queries to change the behavior of the various parts of the table of contents using the class and id attributes. None worked. Always, the unwanted numbers showed up on the contents page and the Landmarks section was showing.5

I realized that I could set up an ePub2 style contents-page; I already had an ePub2-compatible NCX navigation file. But to reverse engineer the whole of the ebook to the ePub2 standard would have taken hours, if not days. Also, I had set up the hundreds of footnotes in Healing Criminal Justice as pop-ups6 — an effect that only works in ePub3. I was going to have to do a lot of work to make the ebook work again.

Finally, at the point of giving up, I realized that there was a specific ePub3-only tag that surrounded both the sections I was having trouble with: the <nav> element.

So… what if I made that element invisible?

Well… that would be good for MOBI7 Kindles, etc., but would break their function on ePub3 ereaders — including newer KF8 Kindles.

Hmm.

Suddenly I had a brainwave. What if I created two separate tables of contents — both in the same XHTML file.

So I copied the <nav> section for the table of contents. In my text editor,7 I pasted in the code.

First I replaced the <nav> tag with a <blockquote> tag. Then I replaced all of the <ol> tags with <div> tags and the <li> tags with paragraph (<p>) tags.

Now, the <li> tags had been nested — for second-level indents, there were <ol> tags inside of the <li> and </li> tags. So I had to move the </p> end tags so that they came before the opening <div> tags.

I also changed the title of the section so that it read Contents rather than Table of Contents so that I’d be able to see which version was displaying when I viewed it.

Here’s what HTML for the top of the “new” contents section looks like:

Note the comment at the top, so that I can see clear in the code where the MOBI7 version of the page starts. Note, too, the </p> tag immediately at the end of this line:

<a href=”../Text/Part-I.xhtml”>PART I: THE OAKLAND DRUG COURT </p>

That closing tag was one that I’d had to move up from lower in the code (because the original <li></li> element had an <ol></ol> list element nested inside it.)

I pasted this version of the “page” in immediately before the </body> tag at the bottom of the XHTML file.

Now came the magic: the CSS that makes the table of contents work properly no matter what kind of Kindle it displayed on.8

In the <style> element at the top of the page, inside the <head> element, I created a pair of @media queries that let the Kindle know which set of rules to apply, based on whether it is using MOBI7 or KF8:

The first one (@media amzn-mobi) tells all older Kindles, the Look Inside feature, and the Kindle Cloud Reader that the rule applies to them. It then sets the <nav> elements including both the table of contents and the landmarks section invisible (display:none!important). So the ePub3 version of the page is now invisible on MOBI7 Kindles. I also created a hanging indent for all paragraph <p> elements on this page only so that the individual chapters would look pretty no matter what font size they displayed at.

The second one (@media amzn-kf8) tells all recent-ish Kindles (2010 and newer) that the rule applies to them. It then sets the element with the id property of #landmarks as well as the <blockquote> elements on this page only invisible (display:none!important).9 So the ePub3 version of the page is now invisible on MOBI7 Kindles, including — and here’s what I was shooting for all along! — the Look Inside feature and the Kindle Cloud Reader.

Hey, presto!

Now, when I look at Jeffrey’s book on the Kindle Cloud Reader, the ugly numbers at the beginning of each chapter or section are gone:

Notice that the head/title at the top of the page reads Contents — I know I’m looking at the MOBI7 version of the page. Notice too how the hanging indents for several of the chapters make it easier to see that the title is longer than one line — so you know when a new chapter starts.

Here’s how it looks on my Kindle Fire:

There you go! You’ll see that this version has the title Table of Contents, which shows me that it’s the KF8 version of the table of contents. When I go down to the bottom of the ToC, here’s what it looks like:

You’ll see that the second, MOBI7 table, the one with the title Contents, doesn’t show up. Instead, there’s a bunch of lovely white space. So now everyone sees a table of contents page that’s pretty — but only the one appropriate for their Kindle.

Whew!

Next time, I’ll talk about covers.


1 For example, it sets where the Body Matter begins, so the ereader knows what to consider the first page of the actual book, as opposed to front matter like the cover, title page, copyright page, etc.
2 These models were introduced before 2010 — though many of them were built and purchased later.
3 Always a great place to get help. Thanks to NotJohn, William Thompson, Booknookbiz, and others for their assistance!
4 Many other vintage ereaders (like early Nooks and Kobos, for example) won’t even load ePub3 files, so this isn’t a problem for them.
5 Actually, I was able to turn it off in the Look Inside feature — but not on the Kindle Cloud Reader or MOBI7 Kindles.
6 If you’d really like me to, let me know and I will put a quick post together on how to create pop-up notes.
7 I use Apple’s TextEdit app with Format >> Make Plain Text turned on. On Windows, you can use Notepad. Do not use Word, Apple Pages, or another formatted word processing app. Those apps will add “smart” quotes and other formatting that will break your HTML.
8 Notice that, at this point, it was easier simply to create an Amazon-only version of the ebook — not my first choice, but the simplest way to handle things, because I couldn’t be sure that the file would display properly on a non-Kindle ereader.
9 Note that I didn’t include these rules in a stylesheet file for the book — I placed both rules in the <style> section at the top of the page. Otherwise, I would have rendered all <blockquote> elements invisible!

 
Photo: BigStockPhoto

tbd advanced publishing starter kit

0 Comments

Trackbacks/Pingbacks

  1. Digital Pubbing - A Potpourri of Resources - […] “Now You Seem Them… — A CSS Trick for New and Old Kindles” on The Book Designer […]
  2. Top Picks Thursday! For Writers & Readers 08-01-2019 | The Author Chronicles - […] author. Nathan Bransford parses what it costs to self-publish a book, David Kudler shares a CSS trick for new…

Submit a Comment

Your email address will not be published. Required fields are marked *