Writing EPUB 3 - Samples of fixed and flowing ebooks with Japanese text

I've finally managed to get the slides from my talk in Tokyo uploaded.

Writing EPUB 3 - Tokyo Ebook Expo from liz_castro

My talk was titled “Writing EPUB 3”, and was particularly Japanese-language and code-centric. Before June, I had never worked with Japanese at all. And I don't read, write, or speak Japanese. But since one of the major new features of EPUB 3 is its support for Asian languages—and vertical writing and right to left page progression in particular—, I decided I needed to create examples that reflected these improvements.

Here's one completely basic thing I learned: Japanese books can either be laid out with horizontal text and left-to-right page progression (like English) OR with vertical writing and right-to-left page progression. For print books, the former are bound on the left, while the latter are bound on the right. When you're creating ebooks, you have to define the page-progression for each type, that is, when I swipe toward the left, am I going back or forward in the book? EPUB 3 makes this possible.

For my flowing book, I used text from Wikipedia (about my beloved Monarch butterflies), with my own photographs. I added a few Japanese typographic effects, including

• tate-chu-yoko - displaying a few non-Japanese characters, like a number, vertically, instead of on its side as longer strings of non-Japanese characters are generally shown

* kenten - adding sesame seed characters next to words for emphasis



You can also add Ruby characters (tiny Japanese characters placed next to regular words as extra explanation) and other typographic features.

You can download my flowing EPUB 3 example of vertical Japanese text and right-to-left progression here (and note that this is a sample, and not production quality work... it's meant to show possibilities!)

My second example is a short (and silly) manga book in fixed layout format with a Read Aloud media overlay.



Much thanks to Toshiaki Koike of Voyager Japan for recording one of the voices in the audio, and for helping me write out the words that I was learning from my very rudimentary Japanese lessons. The lovely illustrations were created by Andreu Cabré.

It is a valid EPUB 3 file, but I added the Apple .com file so that it would also work in iBooks. Note that although the media overlay works mostly well in iBooks, the book progresses from left to right when it should go from right to left. The page progression works properly in the Kobo app on the iPad, but the media overlay makes the app crash. I've heard that Kobo doesn't like multiple mp3 files, but haven't had a chance to see if that's really the problem. And the page progression also works in Readium, but Readium doesn't yet support media overlays in fixed layout books. We're getting there, but we're not there yet!

Here's how it works in iBooks:



You can download the EPUB 3, Fixed Layout, Media Overlay, with right-to-left progression and Japanese vertical writing here.

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.

Kindle Previewer Bug

I noticed today that when I change preview devices from Kindle to Kindle Fire, Kindle Previewer shows a very strange PDF-style view of my book. Watch this video and you'll see.

Notice that I start by opening a book and viewing it with Kindle Fire. Then I switch to Kindle Touch (looks fine), to Kindle (looks fine), back to Kindle Touch (looks fine) and to Fire (looks fine). But if I go back to Kindle (still looks fine) and then jump to Fire, it shrinks the ebook and displays it at a tiny size that does not respond to font-size changes.



The solution is to open the book again. Hopefully Amazon will get this fixed soon.