Thursday, August 2, 2012

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:

ID6 lists to EPUB

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):

Kindle Previewer - numbered list -1

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.

Map to Ordered Lists

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:

Add more CSS

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:

Remove hard-coded line numbers

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):

Lists fixed for EPUB

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

Kindle Fire Previewer - numbered list -1 Kindle Previewer - numbered list -1

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:

convert to text

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:

add hanging indent css to epub

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

Hacked lists on Touch

and on iBooks:

Hacked lists in 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:

Hacked lists on Kindle - 1

even more so when the text is smaller:

Hacked lists on Kindle -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.

10 comments:

  1. Wow. This is... **shakes head** Adobe! You know better! What the heck?

    ReplyDelete
  2. Thank Liz,
    Sad, Adobe,I would've hoped with CS6 we'd be getting some better export tools. Sure hope there's not to many other "enhanced features" to deal with.

    ReplyDelete
  3. Well done Liz,
    You pretty much nailed most (if not all) of my points and solutions for this List issue.

    I do see what Adobe was "trying" to do:
    They were attempting to solve the problem of complicated list numbering always breaking when exported to ePub.
    Though it is a creative way of solving that problem, it unfortunately broke everything else that worked for simple lists.

    I have some suggestions for them and will be reporting that all to them shortly.

    Thanks again for getting this information out there much quicker than I have been able to.

    ReplyDelete
  4. Thanks for taking the time to investigate and explain the problem. I hadn't yet done any work in ID 6 yet involving lists so I didn't realize it was doing that. I'm sure this will save me some time in the near future.

    I go with the "coder" solution and break open the EPUB. I find it easier to grep search on the default li and ol tags rather than touch every number with a character style to the numbers. The grep is more complicated but I only have to do it once. And while I have the EPUB open I'll drop in my own css rather than override through ID's export.

    ReplyDelete
  5. Excellent pair of articles, Liz and Ron! I know that Adobe is reading your posts and hopefully working on a better solution to simple and complicated lists.

    ReplyDelete
  6. So common that I find solutions to ePub issues here. I appreciate you so much. (I was in Catalunya this summer and raised a toast to you.)

    ReplyDelete
  7. I had a problem with lists and actually needed to use the second solution here. The list went to 118. Using regular ol styling, the three-digit numbers would get cut off on Kindle Fire and epub. Oddly, everything looked okay on older Kindle. I needed to actually use Adobe's solution of hard-coding the numbers (with your second solution fix of course).

    Incidentally, I just realized that Kindle for iPad uses the old mobi. Can't they update it so it looks as good as the new Kindles? That seems stinky and underhanded of Amazon to cripple the iPad app.

    ReplyDelete
  8. Has Adobe made any announcement about a fix to this issue? I want to use the epub output and make it into HTML after the fact (extracting a sample chapter for the web), so I need to understand if we think there will be any change or if we are stuck with this "bullet support".

    ReplyDelete
  9. Liz,

    I just stumbled across this problem in an epub and found your excellent advice.

    My question is does the .css formatting include what we used to call "hang for ten" or "hang for one hundred"?

    This means that the period following the number "9." will align with the period for "10." and the number 1 in "10." is aligned to the left of the "9."?

    It's hard to tell if the code in your example will work.

    ReplyDelete
  10. Liz, this explanation was such a help to me on a recent project. Thank you for presenting this so clearly. It makes a lot of sense. A nifty work around. Cheers!

    ReplyDelete

More of my books