Numbered lists from InDesign CS 6 to EPUB and mobi

I got a note from a reader asking me to help with a document exported from InDesign 6, but whose lists were displaying repeated line numbers in old Kindle (mobi).

It turns out that if you use the Bullets and Numbering tab so that InDesign automatically numbers your lists, InDesign CS6 always hard-codes the line numbers into the resulting EPUB. Always.

Depending on whether you choose "Map to Ordered Lists"

<ol>
<li class="Numberedlist"><span class="char-style-override-1">1. </span>Research solar panels.</li>
...

"Map to Static Ordered Lists" (notice that value attribute is added)

<ol>
<li class="Numberedlist" value="1"><span class="char-style-override-1">1. </span>Research solar panels.</li>

or "Convert to text" (notice that now the paragraphs are exported as p elements, and not li)

<p class="Numberedlist"><span>1. </span>Research solar panels.</p>

and how you map the list paragraphs to export tags, it will create the HTML in one way or another, but the numbers themselves will always be there.

But a li item is always numbered in HTML/EPUB, no? How does InDesign keep there from being two line numbers? The answer is that it messes with the CSS, and changes the li items into regular block elements, taking away their listiness and thus their automatic numbering:

li {
display:block;
}

Not only that, it removes all the default margin settings from both the ol and li elements:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}

This has two unfortunate effects. First, in EPUB ereaders, the lists are numbered but they're not treated as real lists. This means that there are no hanging indents:



And since old Kindle (mobi) doesn't understand the CSS that ID uses to convert list items to block items, it keeps displaying them as list items, and we get duplicate line numbers (the automatic ones from the list, as well as the hard coded ones):



Both outcomes are pretty unacceptable, if you ask me.

So what can you do? I see two avenues. You can either crack open your EPUB and GREP out the line numbers and then use HTML/EPUB's natural list-item formatting or accept that InDesign is going to hard-code the line numbers into your HTML and attempt to create hanging indents from the resulting paragraphs (without ever having to open the EPUB).

Let's start with the first, or "coder" solution.

First, I'm going to assume that you've formatted your lists using the Bullets and Numbering tab in the Paragraph Styles box. This means that InDesign will automatically number your lists within InDesign and it will hard code the numbers into the EPUB. It's probably a good idea to use a special character style for the numbers themselves, in case you want to format them later through the CSS. It also makes them easier to GREP-remove, as I'll show in a moment. Mine are called "numbers".

Second, create an listsarelists.css file in your favorite text editor (and save it as text only). It should look like this:
li {display:list-item}

ol, ul {margin: 2em}

This will override ID's CSS and thus restore the listiness of your list items and gives them hanging indents and automatic numbers.

When you go to export your EPUB, choose "Map to Ordered List" next to Numbers at the bottom part of the first panel of the Export Options box.



Then click Advanced to go to the last panel of the Export Options box. Click Add Style Sheet in the middle of the box, choose the listsarelists.css file and click OK. You'll see it listed in the Additional CSS box:



Now export.

Now crack open your EPUB and use GREP to remove all of the hard-coded line numbers:

Note that I applied a character style called "numbers" to the numbers in my lists. This makes them easy to search for, even though ID has added character style overrides:



That is, search for: <span class="numbers.*?</span> (That means, search a span tag whose class is numbers, and maybe some other stuff, and then get rid of it, up until the first following closing span tag.)

And replace it with nothing.

Finally, rezip your EPUB and it looks great:

In iBooks (and other EPUB ereaders):



In Kindle Fire and Kindle (shown with Kindle Previewer):



Now let's look at the less codey solution that doesn't require that you crack open the EPUB:

Remember again that InDesign will always output those line numbers. So what if we converted the lists to text in the EPUB in order to remove the automatic numbering? We start the same way, with InDesign's Bullets and Numbering panel and creating the lists in our book. It turns out the only way to export a list with no listiness (e.g., no ol or li elements) is by choosing Convert to Text upon export:



Here's what the HTML looks like that we'll have to work with:

<p class="Basic-Paragraph">Here’s a list:</p>
<p class="Basic-Paragraph"> </p>
<p class="Numberedlist"><span>1. </span>Research solar panels.</p>
<p class="Numberedlist"><span>2. </span>Figure out if it makes sense to redesign the kitchen.</p>

You don't have to look at it, but it helps to know what we've got :)

The next step is to create an extras.css file with CSS that formats the resulting p elements into things that look like hanging indents. Beware, it won't look perfect. Make sure that the class name in your CSS (here: list) matches the paragraph style name in InDesign.

p.list {line-height: 1;padding:0;margin:0}


@media not amzn-mobi {
p.list {margin-left:1.2em; text-indent: -1.2em;}
}

@media amzn-mobi {
p.list {text-indent:-40px}
}

You can have InDesign add that CSS to your EPUB by choosing it in the Advanced Panel of the Export Options box:



That looks pretty good on the Kindle Touch (at this font size):



and on iBooks:



though you can see that the lines are not quite lined up.

When you look at it in old Kindle, the misalignment is more pronounced:



even more so when the text is smaller:



So, those are two solutions. Neither is perfect. Keep in mind that my example is a very simple one-level numbered list. Not a bulleted list and not a complicated one.

As I was working on this, I asked on #eprdctn if anyone had any other ideas, and it turns out that Ron Bilodeau has been working on this too. He wrote a little bit about lists in ID6 in last month's InDesign Magazine and says he is writing a blog post that should go up some time next week. I can't wait to read what he finds.