Wednesday, May 9, 2012

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!

FXL on Readium in desktop

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

EPUB3 FXL package.opf

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="" 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:

<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.

Readium Library

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

FXL on Readium in 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.

facing pages button

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:

EPUB3FXL on 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!


  1. Wow! I love this!

  2. On a iMac, can't see double page spread. What's going on?

    1. Did you press the facing pages icon in that menu that pops up when you hover over the bottom-right corner? (see screenshot above)

  3. Replies
    1. Hmm. And you're sure you have the latest version of Readium, 0.2.4? If so, I guess I would go file a bug report:

    2. @Lizcastro I'm having the same issue with the document. My regular ePubs will display in facing pages, but the sample FL doesn't. Definitely running latest versions of Chrome and Readium. Any ideas?

    3. Jared, I would also encourage you to go over to and file a bug report. Readium is still pretty new and they need to hear about all the instances in which it's not working as it should. Thanks!

    4. This comment has been removed by the author.

  4. Yes the very latest Readium just installed on a fresh Google Chrome too. Beautiful on full screen.
    If I could only get the double page...

    Nonetheless this is great news. Thanks!

  5. Wow! This is terrific! Thanks for explicating it in such detail.

  6. Did it validate for you in EPC 3.0b5? I'm going through a new validation-hell process if I change package from 2.0 to 3.0, using the prefix="rendition:" (You need a quote mark there in your explanation, I think.)

    Still getting some dcterms errors, but worse, I get identifier errors and "files not declared in the OPF" errors (They are!) that don't regster with package 2.0.

  7. Yes, it did validate completely in EpubCheck 3.0b5. I didn't mention the creative commons bit in the package element (thanks for typo fix), but can't imagine that's that important. What's an identifier error? Two things that eliminated a lot of errors in my file were getting rid of DOCTYPEs and simplifying the character set line.

  8. Hi Liz,

    I have reviewed your sample fixed layout file and there is an apple supporting file called "" in META-INF folder which is not specific to IDPF ePub 3 specification. If I remove this file from the ePub and open in the iBooks, the layout is not good.

    Is this something that apple yet to provide the support in iBooks?


    1. The .com file is a proprietary Apple solution and unfortunately is still required for the book to work in iBooks. Note that Apple does not claim support for EPUB3 at all. The hope is that in the future, this file will no longer be necessary in iBooks. Thankfully, it does not invalidate the file or make it unreadable in other ereaders.

  9. Liz,

    We're trying to get our Fixed Layout with read Aloud ePub approved by Apple. After an 11 day wait we finally received the following message, but have no idea what they require:

    Unsupported mime type for Halloween_Ooga-Ooga-Ooum.epub: null,
    META-INF/container.xml in Halloween_Ooga-Ooga-Ooum.epub must contain one and
    only one root file reference.
    Unsupported mime type for Preview.epub: null, META-INF/container.xml in
    Preview.epub must contain one and only one root file reference.

    Could you help us? We're not sure what Apple wants.

    1. I'm swamped today, but from the looks of it, you're not zipping the file correctly. See

      I also offer consulting ( but don't have any time until the week of May 21-25.

  10. First comments on Readium and your example: I can't get a 2 page spread using the button on the popup toolbar. Only 1 page no matter the state of the button. and 2, the table of contents does not work. I'm not sure where the beginning is. What looks like the cover is presented as the end.

    Then I spent a day converting my upcoming book to epub3. I now passes the latest epubchecker just fine ( with warnings about the presence of the .DS_Store files in each folder). I installed Readium and loaded the book. I do get 2 page spreads but no fonts, no media overlay and most importantly, there appears to be CSS that it does not recognize and display properly. I assume it is proper since the browsers I have show it properly. This concerns both image sizes and placement as well as text boxes and line breaks.

    Is all of this to be expected?

  11. Hi Liz, this is Matthew from the Readium project. First off, great post! I appreciate the attention you are bringing to Readium.

    I have some info to report RE: some users not able to get facing pages working for your sample file. This is partly Readium's bug and partly your sample file's. You did not include:

    [option name="open-to-spread"] true [/option]

    in your file. From my reading of the spec, the default for this value attribute is false => no facing pages. That is the root cause of Readium not allowing facing pages for this file.

    As I mentioned this is a bit of a bug on our part too because we are getting conflicting info from the ibooks options and epub3 metadata and we are listening to the ibooks options. In future versions of Readium, this will be the behaviour but I think it is still a good idea for Ebook creators to make sure the ibooks and epub metadata is consistent.

    If anyone has any more questions / complaints about Readium the best place is the github issue tracker:


  12. Hi Liz, can you tell me is there anyway to use the linear="no" function in fixed layout to display scrolling tables etc, I can't seem to make it work?

    tks Ron Ritter

  13. Hi Liz , I read your book on fixed layout great thanks, can the the grey line in the center of the page be removed?

    also can you adjust the size of the table of content boxes on the bottom of the screen, tks

    Ron Ritter

  14. ThanX lot Ms. LIZ CASTRO.. That was very helpfull


More of my books