Monday, August 20, 2012

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.

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

EPUB 3 Flowing ebook with Japanese writing

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.

EPUB 3 Fixed Layout with 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.


  1. Well, both writing directions can be and are intermingled in the same document. Check any newspaper or magazine, for example, or the markings on an airplane. Any spec that restricts directionality to one or the other cannot accommodate real-world text.

    ePub, like so many computer specs, is being lovingly crafted to accommodate the high-status, indeed priceless, Japanese and Chinese languages, but in so doing other writing directions (e.g., that of traditional Mongolian) are simply left out.

  2. Have you tried reading this in Readium? Some issues with headings having the wrong orientation, also number markers on list items...

  3. The tate-chu-yoko, in your sample file, works in Chrome but not in iBooks. Any idea on this? I guess support isn't yet ready on the iPad. Also, looks like we should shift to using "text-combine-horizontal: all"



More of my books