Controlling spreads in EPUB3 Fixed Layout

EPUB 3's spread settings should allow you to decide when individual documents are placed next to each other on a 'synthetic' spread in a book. For example, you might want to show two consecutive pages in a spread if the device is held in landscape orientation but individually if it's held in a portrait orientation. According to the spec, that's possible. In real life, on real devices, it's not.

Let's look at the different options, since they're not very self-explanatory.

First, you can find a quick overview on this earlier article about EPUB 3 fixed layout.

EPUB 3 has three important fixed layout rendition properties, layout, spread, and orientation. The first is the one that determines if an EPUB 3 document is fixed layout or not. So, if you want a fixed-layout book, you'll add the following code to the meta section of your opf file.

<meta property="rendition:layout">pre-paginated</meta>

And if you want a flowing book, you'll leave it out to use the default value of reflowable. Can you mix fixed layout and flowing pages in a single book? Theoretically, yes, by adding the property to individual pages in the spine section, but unfortunately not in the real world. At least not yet.

The spread property determines when pages should be placed next to each other in a 'synthetic' spread. The default is for the first page to be shown by itself on the right, and each two pages after that to be shown opposite each other in a spread. With EPUB 3's spread options, you can choose to have pages always be shown independently (none), only when the device is in landscape mode (landscape), only when the device is in portrait mode (portrait), in both orientations (both), or just use the automatic settings of the reading device (auto).

So, for example, here's what it looks like in iBooks if you choose none. Each page is shown in its own spread.



Unfortunately, iBooks doesn't support any of the other options, which would be very welcome. You might have a fixed-layout book that looks great in two-page spreads in landscape orientation, but that is too small in portrait view. By choosing landscape, you could force the spread in landscape, but allow for the individual pages to fill the device in portrait as well. Hopefully some day in the future.

There are additional page-spread properties that you can apply to individual pages (in the spine section) to indicate that a page should always be shown on the left side of a spread or on the right side of a spread. But I have not been able to get them to work in iBooks either.

It does work in Readium, though. Notice how the Introduction page here has been forced to display on the left, which both leaves the previous page by itself (not shown), and pulled the subsequent page next to it:



Readium doesn't seem to support any of the other spread options. No matter what I choose, it always initially shows a single page, and then if I change the options in the Settings box, it shows two.

The third property is orientation. This is how you force a book to always be displayed in one orientation or another, regardless of the way the reading device is held. The choices are landscape, portrait, and auto, and the first two options constrain the display to the given orientation.

So, if you choose auto, the book rotates with the reading device. Here's what it looks when held horizontally:



And here's what it looks like if it's rotated to a portrait orientation:



But if you choose either landscape or portrait, then no matter how the reader holds the device, the book will always be shown in that orientation. Here's a book with the landscape orientation chosen, with the device being held vertically:

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.

EPUB 3 has finally arrived

EPUB 3 support is remarkably good in Readium, Kobo for iOS and iBooks, and EPUB 3 files can be opened by NOOK and Kobo Vox, and converted by Kindle Previewer and KDP.

I am writing today from Tokyo where the IDPF kindly invited me to speak about EPUB 3 at the 16th Ebook Expo. At first, I was a bit nervous to go (OK, I’m still a little nervous) because although others have been talking about EPUB 3 for a while, I had been avoiding digging in too deeply. To be frank, there were only a few ereaders that supported EPUB 3 until just recently, and I was reluctant to spend time on something that wasn’t yet working in the main ereaders.

But as I worked on this presentation, which began with IDPF’s Digital Book portion of BEA in New York in June, and then developed into the talk I’m giving today in Tokyo, I realized that EPUB 3 is much closer to reality than most of us have realized.

I started by trying to unravel why the toc.ncx file is allowed in EPUB 3 while the nav.xhtml file is required. Why would you go to the trouble of adding the rather persnickety toc.ncx file if you have to create the nav.xhtml file anyway? Or, put another way, why would you create a toc.ncx file if your ereader supports EPUB 3 and thus the nav.xhtml file? The answer, of course, is to serve old ereaders that don’t support EPUB 3. But can they read EPUB 3 at all? To find out, I created a sample EPUB 3 file and then opened it up in all of my old ereaders, that presumably only support EPUB 2. Imagine my surprise, when every single one opened the EPUB 3 file without a complaint.

(I even tried uploading an EPUB 3 file to Kindle Direct Publishing. Again, no problem at all, it converted the EPUB 3 file to mobi and kf8 and they displayed just fine.)

This is exceptionally good news, as it means we can move forward with EPUB 3 without worrying that older readers won’t be able to open our files.

Of course, old ereaders won’t be able to take advantage of all of the new features that EPUB 3 provides. Indeed, that’s exactly why you might include the old toc.ncx file: since old ereaders don’t know what to do with the nav.xhtml file, the toc.ncx file is still necessary for them to generate a navigational TOC. Newer EPUB 3 readers will just ignore it.

But there’s more. As I discussed in an article a month or so ago, the IDPF published a new specification for Fixed Layout format in May. Readium, the EPUB 3 browser developed by the IDPF of course supports the newly published spec, as does iBooks (albeit unofficially). And thanks to a tip from Laura Brady, I downloaded the new version of Kobo for iOS, and saw that Kobo for iOS, too, supports the new IDPF EPUB 3 spec.

Perhaps not surprisingly—given Kobo’s recent acquisition by the Japanese company Rakuten—but very gratifyingly nonetheless, Kobo also has strong support for EPUB 3 based Japanese writing systems, both in flowing and fixed layout books.



But there’s still more. As I was developing an example for my talk today—a right-to-left, fixed layout, read aloud, Japanese language lesson*—I realized that EPUB 3's system for creating media-overlays (the mechanism for creating read aloud narration that syncs with text) is significantly different from Apple’s.

But when I tested my new book, using the official spec for EPUB 3 fixed layout and media overlays and Japanese writing, it worked brilliantly in Readium, Kobo, and iBooks, (with some minor caveats**) shown below in that order.







This is huge news. Readium’s support was obvious and necessary, Kobo’s was encouraging, but Apple’s support means that all of the iBooks-focused work can move towards EPUB 3, and the myriad of amazing possibilities that it affords, without having to worry about losing the iPad readers, where most of those features really shine.

I can only hope that Barnes & Noble, and of course Amazon, join the party soon.

I suspect neither is willing to give up the Japanese market, where EPUB 3 is the best answer for vertical writing systems. Support for fixed layout EPUB 3 and media-overlays is a natural extension.

Of course, as you know by now, I am an eternal standards optimist. Still, today’s news is brilliant and hopeful indeed. The IDPF is doing excellent work and the top ereader manufacturers are using it!

Last but not least, in the Tokyo metro today, I saw an ad for the new Kobo Touch, proudly displaying Vertical Japanese text (an EPUB 3 only feature), for 8990 Yen, or about $100. EPUB 3 really is here.



You can download my manga example here. There are lots more EPUB 3 examples on the Readium site.

--------
*Since I don’t speak or read Japanese, I got a lot of help from Wikipedia, Google Translate, Andreu Cabré (who also drew the illustrations for the manga example and is studying Japanese), and EPUB expert Toshiaki Koike, from Voyager Japan, who wrote out the Japanese words and then narrated the boy’s part. Yours truly plays the girl.

**Ah, the caveats. First, you still have to include the com file for Apple to recognize that a file is fixed layout. It seems kind of ridiculous to me, given that it already recognizes the official way for marking a fixed layout file (with the renditions prefix), but that’s where it stands so far. I was so impressed that iBooks understands the new Media-overlay code that I gave it a(nother) free ride on this account.

Next caveat: Although iBooks supports vertical writing and highlighted media overlays, it does not yet support right-to-left progression. You’ll notice that my manga example proceeds in the wrong direction (left to right) in iBooks. In flowing books, iBooks doesn’t know what to do with the second and subsequent pages of vertical text, and hides it altogether. That is a fatal flaw that I assume they’re working on.

Next caveat: Although Kobo has strong support for both vertical writing and right to left page progression, its support of media-overlays is rather spotty yet. At first I couldn't get the play button to appear at all, but after downloading Kobo again, the play button showed up, but now the read aloud crashes pretty regularly. I hear that Kobo doesn't like multiple audio files (which my EPUB has, and legally so), so that'll be my next try, but I didn't have time for this example.

Last but not least: Readium supports fixed layout, vertical text, rtl page progression, and media-overlays, including highlighting in flowing books, but I had to beg for a pre-release fork to see the highlighting in action in this fixed layout example. And it still doesn't quite highlight the words as I marked them, nor does it let me choose a highlight color. It should be updated soon.

Admittedly, we’re in the initial stages, but I really like the direction we’re headed, together, thanks to the IDPF and its members.

Readium displays Fixed Layout EPUB on desktop (compatible with iBooks too)

We have been waiting to view Fixed Layout on a desktop screen for a long time and the IDPF with its Fixed Layout spec and support for Readium has now made it possible. Just look at this!



First, I adapted my Fixed Layout example (from my original miniguide on the subject, which desperately needs updating now) so that it conformed with the new IDPF spec. This required:

In the content.opf file:

• Add version="3.0" to the package element.
• Add prefix="rendition: http://www.idpf.org/vocab/rendition/# to the package element as well.
• Add <meta property="dcterms:modified">2012-05-08</meta> to the package element. This is a great, new required element that hopefully will help with caching problems, among other things, as it's supposed to contain the last date the content was modified.



Still in the content.opf file, we get to the stuff that determines how the fixed layout book is displayed, the so-called "rendition" options. (Thankfully, the CIA is not involved.)

There are three principal rendition variables: layout (with values of pre-paginated or reflowable, that is whether you want it fixed or flowing), orientation (with values of landscape, portrait, auto, that is, whether a certain orientation should be forced), and spread (with values of none, landscape, portrait, both, auto, that is, whether the ereader should use facing pages—aka a synthetic spread—in given orientations).

I promise to explain these in more detail in the upcoming new edition of the Fixed Layout miniguide!



Here I've chosen the most basic fixed layout options: that it be fixed layout, that it can be viewed in either a horizontal or vertical orientation, and that it always be displayed with facing pages.

In the content itself (the XHTML):

The code is not very different. As with all EPUB3 documents, I've eliminated the DOCTYPE, made sure the xml declaration is present, and used a simpler character set declaration:



Last but not least, add the meta tag for the viewport, as usual:

The new TOC

Finally, you have to create on extra file, the new HTML TOC, or nav element. It's not much more than an ordered list, with each of the TOC items in its own list item, along with the all important nav element:

<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc">

Here's what my toc.xhtml file looks like:



And, of course, don't forget to declare the toc.xhtml file in the content.opf file:

<manifest>
...
<item id="toc" href="nav.xhtml" properties="nav" media-type="application/xhtml+xml"/>

And you're done!

Now, zip it up as usual, and run it by EpubCheck3.0b5 to make sure you did it all right.

Then, in Google Chrome (it won't work in other browsers), download the very latest version of Readium (released this morning!), it's 0.2.4, kindly fixed and uploaded by Matthew Robertson, and add your book to the library.



And voilà, you can see a fixed layout book on your desktop!!!



What, you say, you don't see facing pages? Click the facing pages button in the Readium pop-up menu that appears when you hover over the bottom-right corner of the screen.



And where are the embedded fonts? I'm not sure yet if that's a problem with this very new software, or if I haven't embedded them properly. It's definitely true that only OTF and WOFF fonts are supported in EPUB3, but I use WOFF in my example, so they *should* be showing.

Ah, but I hear a bigger worry... why should you go to all this trouble to create a format that only works with a fledgling ereader that no-one uses yet? And I could try to convince you about the importance of standards, but hopefully the following screenshot is more powerful: because the IDPF's EPUB 3 Fixed Layout spec works in iBooks!!! Apple and Barnes & Noble (and others) were involved with the IDPF in creating the Fixed Layout standard and Apple already supports it as you can see the same file showed here in iBooks:



This is a great development, and the IDPF should be commended. Hopefully there will soon be a time when we can create a single fixed layout EPUB file and it will work properly in all ereaders—Barnes & Noble also worked closely with the IDPF to develop this spec—and on the desktop. Even in Kindle.

The best way to help make this happen is to start using the new EPUB3 Fixed Layout format right now: create lots of examples, view them in Readium and help contribute to making Readium a more powerful ereader.

You can download my new EPUB3 FXL example here. Feel free to open it up and play with it. I'd love to see any examples you create!


Don't forget: subscribers receive all my blog posts via email, as well as other perks, and help to keep me writing. Thanks to all of you!