Tuesday, December 21, 2010

Opening new windows in iBooks

Rick Gordon mentioned that the ebooks on programming that Apple just published to the iBookstore had some interesting features, among them tables that opened up into a new window, similarly to what happens when you double-click an image:
  • the table fills the iPad space, ignoring the typical iBooks margins,
  • the regular navigational and presentation features disappear, so you can't move directly to the next page, or change the font or font-size
  • if the table doesn't fit in the space, you can pan down or to the right to see the rest of it
  • double-clicking the table or clicking Done in the upper-right corner returns you to where you were
  • although tables are a natural use for new windows, you can put anything in one
Here is the table as it would appear regularly in iBooks (ew!):
Open New Windows in iBooks

And here is what it looks like in its own window (ah!):
Open New Windows in iBooks

You can pan down to see the lower part of the table:
Open New Windows in iBooks

And when you tilt the iPad vertically, the table resizes to fit:
Open New Windows in iBooks

Since tables are really hard to show well in iBooks (or any ereader), this is a really welcome development. Now, any time you have a complicated table, instead of risking having it mangled, you can just have it show up in its own neat window, and be sure your readers will be able to see it properly.

How do you do it? You simply go into the content.opf file and in the spine section add linear="no" to the document that should open in its own window. Remember that the spine is the place where you define the order of the documents in your ebook. I have complete details about the content.opf file, and the spine in particular, in my book, EPUB Straight to the Point.

I've found that the text in the new window is smaller by default than text in the regular book pages. Again, it is not affected by the text size choice of the reader, so you have to make sure you set it big enough to start with.

You can download my sample EPUB file and look at the code. It's published with a Share Alike and Give Attribution Creative commons license. You'll notice that ePubCheck complains that I didn't fix the Wikipedia footnotes and that I didn't get rid of the iTunesMetadata.plist file. But I'm running out of time and wanted to get this up today. I'll fix those minor things later.

It feels like there's a lot we can do with us. I'd love to hear about what you create!

If you like this article, consider buying my book. It's a great foundation for all things EPUB.

7 comments:

  1. Unfortunately ADE hasn’t ever honored linear="no", so when reading through the EPUB from front to back, the table will appear twice. At least if you want to make it appear in the ordinary text flow and also in a new window in the iPad-optimized version, and if your ambition is to create one EPUB for all devices.

    Within a few months we’ll see the point when iBooks will beat ADE’s EPUB compliance. They are already close or even better in some regards.

    ReplyDelete
  2. If you poke around iTunes U, you'll find that all of the ePubs there are sans DRM. Thus, lots of examples that can be deconstructed to learn how Apple and its more privileged partners achieve these effects.

    Apparently, this particular technique has been in use for a while now at those high profile institutions such as OU (The Open University). I've been reading "The Restless Universe" from OU and they use this technique to provide readers with a quiz and answers feature.

    ReplyDelete
  3. Worth mentioning also that you can zoom into these windows with a two-finger spread gesture (as in Safari), so small text size is not necessarily a deal breaker.

    Thanks to Liz for sleuthing out the way this is implemented.

    ReplyDelete
  4. This works not only for tables, but presumably for any xhtml file, rendering it into one long vertical "page" of many screen-fulls you can scroll through. I wonder how the font and size is determined, though, since it doesn't seem to be affected if you change these when the book is first opened.

    One other discovery is that you can reach such a "no" file via the table of contents if you've set up such an entry for the beginning of the file. Doesn't work so well, though, if the TOC entry is interior.

    apropos the OU books, the quiz-answers for the ones I've looked at are just PDF files.

    ReplyDelete
  5. @Bill Benson, here's the URI to the iTunes University .epub file that I cited:
    http://itunes.apple.com/us/itunes-u/the-restless-universe/id400803433

    If you open this up with a text editor, you'll see that the answers are all .html files named answer01.html and so on. The content is similarly contained in .html files named chunk.01.html and so forth. There's quite a bit of Javascript requiring jQuery used such as Christian Bach's TableSorter 2.0. (found in the js folder and used throughout the content pages).

    I'd guess that these are harbingers of the future of ePub as Apple would have it. It would be interesting to know if Apple has developed tools to streamline the implementation of these features.

    ReplyDelete
  6. You're right. I misremembered and should have checked. There are a few pdfs employed in "Word and Image", but for viewing documents rather than answers.

    ReplyDelete
  7. Hi Liz,

    Did Apple enable this "zoom-able table" capability in iBooks 1.3? I just noticed that the tables in our ePub files popped up on a new window when I double-clicked one of them. And I didn't declare any "linear" properties in the content.opf. Unfortunately, I haven't found any documentation from the iBooks version 1.3 update saying that the ePub tables now behaves like the way images do. It's a great feature though, like you mentioned.

    Hope you can check whether this has been enabled in iBooks version 1.3 or perhaps I just didn't know that ePub tables already behave this way in much earlier versions after this blog entry.

    Thanks and More Power,
    Mers

    ReplyDelete

More of my books