Threepress Consulting blog » epub

HTML5 for Web Designers by Jeremy Keith available as an EPUB

Liza Daly — Wed, 01 Sep 2010 18:04:27 +0000

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.

Test-driving Apple Pages with ePub export

Liza Daly — Thu, 26 Aug 2010 21:40:29 +0000

Finally there’s a commercial word processor that can export ePub.

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:

ePub Best Practices for Pages 09-49-51
Liza Daly
Pages v4.0.4
2010-08-26
Business & Personal Finance

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:


  This document will show you how to use paragraph styles to create a publication that looks great..

If those are paragraph styles, where are the paragraphs? It is not acceptable to use

where

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

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.

Easier EPUB Experimenting and Updating in iBooks

Keith Fahlgren — Thu, 19 Aug 2010 12:00:51 +0000

The arrival of iBooks this year helped many people understand that ebooks were already capable of interesting experimentation, multimedia, and nuanced, thoughtful design. Many of iBooks’ strengths come directly from the fact that they wisely chose to base it on WebKit, the rendering engine core used in desktop browsers like Safari & Chrome and mobile browsers for the iPhone, iPad, Android, and now Blackberry browsers. This makes it an attractive test platform for folks developing new and innovative content in EPUB, but many have been frustrated with the time and effort it takes to update EPUB content in iBooks on an iPad using the iTunes sync. This post outlines an easier approach for iteratively developing and testing changes to EPUB XHTML and CSS files in iBooks (1.1.2) without using iTunes.

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

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

JavaScript and interactivity in iBooks

Liza Daly — Thu, 24 Jun 2010 15:36:06 +0000

iBooks supports JavaScript-based interactivity in EPUB content.

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 &lt; terms.length; i++) {
  terms[i].addEventListener('click', popup);
}
var popups = document.getElementsByClassName('popup');
for (var i=0; i &lt; popups.length; i++) {
  popups[i].addEventListener('click', dismiss);
}

Here’s a sample of the XHTML:

1 wild turkey breast

Some other nerdy details:

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.
Inline script blocks do not work, which is not a bad thing.
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.
iBooks caching is really annoying isn’t it?
I haven’t tried this on iBooks for iPhone.
I have no idea if JavaScript is allowed in the iBookstore…
…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…

Practical Interactivity and Shaping the Future of EPUB

Keith Fahlgren — Tue, 22 Jun 2010 21:00:47 +0000

The IDPF kicked off the next revision of EPUB with two days of face-to-face meetings in New York last week. I came away from the (lively, well-attended) meetings feeling very optimistic about the work ahead of us, as there was a humbling range of backgrounds and experience present in the room. That said, many of the fourteen Industry Problems that the Working Group is chartered with ameliorating (not solving forever for everyone) will present real challenges.

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.

Interactivity in EPUB using JavaScript, HTML5 and CSS3: BEA/IDPF video posted

Liza Daly — Wed, 02 Jun 2010 14:29:39 +0000

I re-recorded my talk at IDPF Digital Book as a video. Getting the audio synced properly was no fun so I apologize for a few production issues.

Interactivity in EPUB

View more videos from lizadaly.

Here’s the executive summary of the talk:

You can add interactivity to an EPUB book using either the or