We were very happy to develop the EPUB version of HTML5 for Web Designers by Jeremy Keith, the first title from A Book Apart. A Book Apart is the publishing offshoot of A List Apart, an organization hosting a fantastic digital design blog (including Web Standards for E-books by Joe Clark).

We love working with digital-friendly publishers and we’re very pleased with how great the book looks, especially in ereaders with advanced CSS support, like iBooks and Ibis Reader. It’s DRM-free too!

Special thanks to our friends at Granade Graphic Design who assisted with the conversion.

Today Apple released an update to iWork 9.0.4 that provides ePub as one of the output formats in the Export menu, alongside PDF and Word. Apple has also provided a support page describing the differences between ePub and PDF, and a very helpful Pages template for use in creating an ePub.

I quickly took a stroll through the template and its output and so far I’m quite impressed.

The template provides a number of different default styles and headers. The headers are critical; this is how Pages determines which items are chapter boundaries that should be given unique NCX entries. Headers with the Chapter Name style mark the boundaries where content is chunked into discrete XHTML files. The Chapter Subtitle style will create a new nested TOC entry but not a new XHTML file. This is sensible and should produce rich TOCs if used appropriately.

I modified the sample template just a bit to test out color and ensure that my changes were propagated into the epub:

Then I went to the Export Menu, which now has an ePub option:

and prompts you for some additional metadata, a nice touch:

The ePub file was valid, hooray. I took a look at the OPF file:

<dc:title>ePub Best Practices for Pages 09-49-51</dc:title>
<dc:creator opf:role="aut">Liza Daly</dc:creator>
<dc:contributor opf:role="bkp">Pages v4.0.4</dc:contributor>
<dc:date>2010-08-26</dc:date>
<dc:subject>Business &amp; Personal Finance</dc:subject>

Nice use of opf:role, one of the additional types of ePub authorship metadata that we recommend. The NCX file was also sane.

The CSS is a little bloat-y and unreadable but that’s typical of automated output from page-centric tools. It’s no worse than InDesign’s:

.s2{
	color: #000000;
	font-size: 75.0000%;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	letter-spacing: 0.0000em;
	margin-bottom: 1.2821%;
...

The default style produces some reasonable CSS for superscripts and subscripts, another nice touch:

sup{
	font-size: 67%;
	vertical-align: 33%;
}
sub{
	font-size: 67%;
	vertical-align: -10%;
}

In future improvements I’d like to see the randomly-numbered classnames be transformed to something more human-readable.

Unfortunately I can’t say as many positive things about the XHTML:

<div class="s2">
  This document will show you how to use paragraph styles to create a publication that looks great..
</div>

If those are paragraph styles, where are the paragraphs? It is not acceptable to use <div> where <p> is semantically accurate. This must be corrected in future updates.

Uploading it to Ibis Reader produced good results, and the CSS “works”:

I had a few random Pages documents lying around and I got decent ePub output from them too, even without using the styles found in the best-practices template. Those styles should be used on content of any length or complexity, if only to get the critical XHTML automatic chunking.

Overall I’m quite excited that there’s finally a commercial tool for normal humans that produces one-step valid ePub output. If the XHTML output is improved only to use <p> I’ll be able to recommend Pages without reservation.

The outputted ePub file: test-from-pages.epub.

Edited Friday August 27 to reflect some further exploration. Thank you to Baldur Bjarnason for identifying the div issue.

Here’s a tweak to the XHTML of a chapter and the CSS used for h1s that I did quickly without having to make a new EPUB or use iTunes:

The key to this hack technique is the free (as in beer) iPhone Explorer application, which exposes the contents of your iPad like a USB drive (including resources for Apps). It has both a Mac and Windows version, but I’ve only tested these instructions on a Mac. Before starting, connect your iPad to your computer and iTunes. You should not be using automatic syncing (“Sync Books” is not checked).

To get started playing with a particular EPUB, sync the file onto your iPad, open the book once in iBooks, then close iBooks. Now you’re ready to start moving the files back and forth (iPhone Explorer is all drag and drop).

1. Open iBooks to your Library (not a book).
2. Open iPhone Explorer (or hit Refresh if it was open, but this is occasionally flaky).
3. Expand [Your] iPad->Media->Books.
4. Find the [XXXX].epub you’re interested in and expand it until you find your XHTML content or CSS.
5. Drag the XHTML file or CSS you want to experiment with somewhere on your computer (perhaps your Desktop in the Finder) to edit.
6. Edit the file using something you like.
7. Drag the XHTML or CSS file back from your computer to the same location in iPhone Explorer.
8. Say “OK” to the “Overwrite?” dialog.
9. Open the book in iBooks to see the changes.

Now you’re ready to use steps 5–9 (closing the book in iBooks in between) to continue experimenting with the EPUB’s design or content.

It can occasionally be non-obvious which filename iBooks has assigned to your EPUB. Curious folks will want to play around with some of the other resources exposed in addition to the exploded EPUBs (check out Books.plist).

The chapter headings look especially great:

Thank you Anthony!

OPDS Catalogs enable the aggregation, distribution, and discovery of books, journals, and other digital content by any user, from any source, in any electronic format, on any device. They’re becoming an increasingly popular technique for moving ebooks around between companies in addition to offering an attractive browsing experience to readers looking for something good to read.

Feedbooks, the biggest OPDS Catalog success story, already distributes more than 2 million ebooks every month using its OPDS Catalogs. They’ve just posted a great overview of their ecosystem, which really shows the breadth of support for OPDS Catalogs today.

OPDS Catalogs are the first component in the Internet Archive’s BookServer Project.

The story is revealed online with new content each day, and will later be published as a standalone ebook and print book.

For the online reader, they’re using a customized version of Monocle, which looks lovely:

Web-based publishing was a must for Enthrill due to the real-time nature of the book. Unlike with a custom iPhone/iPad app, they get cross-platform support for free. And by using a web-friendly ereader like Monocle, they’ll be able to repurpose the content into a later EPUB version.

Best of luck!

I took some content from Cooking with Booze by James Bridle (a.k.a. George Harvey Bone). It’s released under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license, which means that this derivative work is as well.

I took one recipe and marked it up in EPUB:

I added some slightly useless annotations and illustrative images from Flickr (also under an Attribution license). I then added some JavaScript-based event handlers. If you tap on the hyperlinked items in the recipe, the annotation will fade in as a popup. Tap on the annotation to dismiss it.

There are two kinds of annotations available: image popups and textual notes. Here’s a text note:

The JavaScript here is extremely simple, though I needed to use webkitTransform rather than normal positioning code because iBooks does not recognize position: absolute and the like:

function popup() {
  var p = document.getElementById(this.id + '-popup');
  var top_of_el = this.offsetTop;
  p.style.opacity = 1;
  var new_y = p.offsetTop - top_of_el - 30;
  p.style.webkitTransform = 'translateY(-' + new_y + 'px) translateX(' + this.offsetLeft + 'px)';
}
function dismiss() {
  this.style.opacity = 0;
  var el = this;
  setTimeout(function () {
    el.style.webkitTransform = null;
  }, 1000);
}
/* Register the events */
var terms = document.getElementsByClassName('term');
for (var i=0; i < terms.length; i++) {
  terms[i].addEventListener('click', popup);
}
var popups = document.getElementsByClassName('popup');
for (var i=0; i < popups.length; i++) {
  popups[i].addEventListener('click', dismiss);
}

Here’s a sample of the XHTML:

1 wild <a class="term" id="turkey">turkey</a> breast

Some other nerdy details:

1. The fade-in effect uses CSS3. I think the iBooks implementation may not be hardware-accelerated like Mobile Safari — it’s less smooth than the transitions on Ibis Reader, for example.
2. Inline script blocks do not work, which is not a bad thing.
3. Scripts are disallowed from accessing remote URLs. This means that ebooks that interact with remote data, like the geo-aware ebook, do not work. Interestingly, this is one of the restrictions that Baldur Bjarnason suggested might allow for safe JavaScript use in ebooks in a recent comment on our post Practical Interactivity and Shaping the Future of EPUB.
4. iBooks caching is really annoying isn’t it?
5. I haven’t tried this on iBooks for iPhone.
6. I have no idea if JavaScript is allowed in the iBookstore…
7. …not that you need Apple’s permission to sell a DRM-free enhanced EPUB that users could load into iBooks themselves.

Download the sample EPUB book. All content in the book is licensed under a Creative Commons license of some kind; the whole bundle should be considered Creative Commons Attribution-Noncommercial-Share Alike 3.0.

That said, I encourage commercial publishers to explore interactivity in EPUB, and it goes without saying that we’d love to help, whether it’s to provide glosses and annotations like those shown here, or interactive quizzes, or animation, or…

With the work on those challenges just starting, I was pleased to see that Joseph Pearson, the creator of the Monocle EPUB reader, had taken the time to start writing his thoughts about the challenges of solving the interactivity Problem. Joseph raises three concerns surrounding the work on interactivity: a need for scripting security, the lack of a defined interaction model, and the danger of document modification by reading systems. While I think that he raises two real problems that will need pragmatic solutions (the first two), we can acknowledge either problem and still get started on defining & supporting more interactive content in EPUB.

In particular, it’s seems unnecessarily pessimistic to point to the current limitations of JavaScript’s security model as an insurmountable issue. Reading systems like iBooks, which hosts its own customized setup of the WebKit rendering engine, already enable a secure, sandboxed JavaScript execution environment. If the IDPF and the Working Group comes up with concrete use cases and requirements around scripting and security, those concrete needs may be the motivation that browser-makers require to get started on aligning broader emerging web standards with the needs of ereaders, especially browser-based readers like Ibis Reader and Monocle. Existing work like Eli Grey’s JSandbox is promising in this regard.

As for the issue of defining the interface & events that an interactive EPUB can hook into: yes, we’ll need that. It’s clear that a basic interaction model should be included in the new specification, but that doesn’t seem like an unrealistic goal at this time.

I don’t understand Joseph’s concern with document modification (as a major problem). EPUB Reading Systems that enable interactivity will need to be careful about keeping the EPUB internals consistent-enough to be usable. It will also be challenging to ensure that content is structured and provided inside interactive content to ensure accessibility for all readers. With luck, work from the WAI-ARIA folks will help guide us.

I’d like to explicitly encourage Joseph and anyone interested in contributing to the future of EPUB (and digital reading in general) to join the IDPF and contribute to the Working Group. In particular, I’d love to hear more voices from people creating digital content, especially outside of North America.

Explicitly: This is purely my own opinion. Liza has her own more informed and interesting thoughts on the topic and she’ll be actively participating in the Interactivity Subgroup and the Working Group in general.

1. Readers can now select any of the on-board fonts (omitting some unsuitable decorative fonts for clarity).
2. Turning pages uses a more reliable method. It’s now much harder to accidentally switch pages by brushing the screen.
3. All visual effects now use CSS3. On iPhones and iPads these will appear to be much smoother than before.
4. Many menus are on the iPad are now drop-downs, providing a better overall view of the application.

Details follow, click on screenshots to enlarge:

Drop-down menus in iPad

To take better advantage of the larger screen we’ve made some options behave more like native iPad menus rather than the full-screen overlays on the mobile phones. (We do this purely with CSS, including the CSS3 effects for drop-shadows and the like.)

Font customization

On the iPad, we’ve converted the font menu to a drop-down. We’ve also included full support for all the on-board “body” fonts. The iPhone font list includes the new fonts in iOS4; if you still have 3.x, you’ll see them as well but they’ll have no effect.

Until iOS4 supports embedded fonts in a non-buggy way, we’re not able to support embedded fonts either, and at this time user customizations will always override book fonts that are supported on these platforms.

A note about Android: We don’t mean to neglect our Android friends, but we haven’t yet done the necessary research to understand which fonts are on which device/platform. We’d love some help from Android users on font selection; for now Android users will get the same serif/sans-serif selection as in earlier Ibis releases.

How to get the upgrade

As always, updates are automatic! HTML5’s update mechanism does mean that you may need to open and close Ibis Reader at least once to see the new changes.

Quote from the article:

Ibis Reader is written in HTML5, and is a combination of a web-based service and a locally cached web application running on the iPad’s mobile Safari browser which allows you to read DRM-free EPUB files that you can upload to the ibisreader.com web site, or connect to an OPDS-formatted book repository anywhere on the web, including ones you can create yourself.

Read the complete ZDNet article…