The ePub Zen Garden was featured in the recent article Web Standards for E-books by Joe Clark at A List Apart. I highly recommend it.
Thanks to that publicity bump we’ve got a new contribution: Gibson, by Adam Scott. Thank you!
Of all the problems I needed to solve to develop the mobile version of Ibis Reader, I didn’t think I’d need to solve pagination. “WebKit supports CSS3 columns, I don’t have to worry about it.”
My idea was that I’d make the viewport as wide as a single column but force at least 2 columns, and let the user swipe or tap to slide the viewport right and left across all the pages. When I implemented it, it appeared to work great. There was just one problem.
WebKit CSS3 columns are actually broken.
The problem is that elements that are flowed into columns don’t report their position properly. They report their position as if they weren’t in the column at all, but instead had just flowed normally.
This is pretty much a deal-breaker if you want to be able to know what text is on the current “page”, for example, to sync your position across devices.
Here’s a test case that exhibits the problem. I’m requesting the horizontal position of an element that falls in the second column. It should report a value that’s greater than the width of the first column. Instead it reports a tiny value, as if that text were actually positioned up against the left margin.
Chrome, Safari, Mobile Safari, Android
Ironically, Firefox, which lags behind WebKit in its HTML5 support, does the correct thing:
You can download the test case here and run it in any browser.
Unfortunately for us, this meant we had to implement pagination entirely in JavaScript. I’ve done this a few times before (such as in the ePub Zen Garden), but that wasn’t with arbitrary HTML. We worked really, really hard to get JS-based pagination to be as accurate and efficient as possible, but it’s still one of the most resource-intensive parts of the app, and a primary reason why it’s not as fast as a native app.
I’ve been told that this bug is fixed in the WebKit source, but since we’re at the mercy of the deployed versions on mobile devices we never further investigated. The moment this fix lands in a consumer browser we’ll switch to supporting it, which should be a huge performance boost.
Update March 8, 2010: Confirmed fixed in WebKit nightly, so eventually this fix should filter down to the mobile browsers.
I always go a little overboard when making slides for my presentations. I think it’s a form of procrastination. But I’m not a designer and have only limited Photoshop skills, so I have to rely on some tricks.
For my TOC Ignite presentation on Ibis Reader, I used many now-obligatory photos found by searching Creative-Commons-licensed content on the Flickr advanced search page. This is an invaluable resource and I wish more people would consider broadly licensing their images.
Then I shot some photos specifically for the talk. It’s hard to graphically represent an “ebook” so I struggled with this until I remembered this journal I’d bought in college. I had to make sure the picture didn’t reveal any of the post-adolescent angst inside:
I also wanted one to illustrate my idea of a digital book not having a back cover, meaning its pages could spill out on to the net rather than being bound together. It took more than an hour to shoot and composite these photos together, by tearing up an old advance reading copy (sorry!) and shaking the pages out while the camera auto-fired. (This was an excellent way to procrastinate.)
But my favorite trick for slide-making that’s actually pretty lazy is to use the all-powerful Firebug. Firebug is a plugin for Firefox that’s meant to aid web developers in designing and QAing websites. One of its features is that it allows you to change the HTML or CSS of any page in real time. Take this fake Twitter screenshot, which I was happy to see featured in a Jane Austen blog:
I actually went to twitter.com and used Firebug to edit and delete elements on the page until I had what I wanted. The screenshot never went into Photoshop. For example:
@siracusa would never actually say that to me, but I can make him say whatever I want now. HA ha.
The other nice thing is that you can delete elements off the page and remove distractions. So in the Twitter image above I removed all the site navigation and anything that wasn’t part of the punchline — especially important in a slide that’s only going to be on-screen for 15 seconds.
You can do the same trick in recent WebKit browsers that have the debugger enabled, though Firebug is still more powerful.
(All photos above are licensed CC Attribution.)
Though it’s been live for a few days now, Threepress is happy to formally announce that our HTML5 mobile web reader Ibis Reader has launched.
It was exciting to get some favorable coverage from the Wired Gadget Lab blog almost immediately:
Ibis reader is an e-book reading application that does everything that you’d expect an iPhone e-reader to do, with one big difference: It doesn’t come from the App Store. The app runs on any iPhone or iPod Touch and offers full offline access to your library of books, and is as fast and responsive as a native iPhone application. It manages this through the magic of HTML5, which is supported by Mobile Safari and – crucially – offers offline storage for web-sites.
In the coming weeks we’ll be listening to feedback on Get Satisfaction and implementing some of the features we didn’t finish in time for launch. Because Ibis Reader is just a website, we can roll out new things quickly and painlessly, and as mobile browsers improve we get an automatic upgrade. (In the coming weeks we’ll also post more about HTML5/CSS3 app development and some of the challenges we faced.)
Some other early reviews:
The last few weeks have seen a tremendous increase in interest about ePub. Many new blog posts have been written trying to explain the format. We’ve also seen a big jump in the number of publishers coming to Threepress for help with tricky ePub problems or just asking for guidance about the format. While I’d like to pretend that the growth is due, in part, to a long-anticipated awareness about the benefits of open standards among consumers, publishers, and suppliers, I think it’s more likely that it was Steve Jobs’ explicit mention of ePub support in iBooks on the iPad that drove most of the excitement. What makes me most excited about this groundswell is the sudden interest in ePub from a number of clever developers.
Just in the last few days, details emerged of two new JavaScript ePub readers, rePublish from Blaine Cook (@blaine) and JSEpub (screenshot) from August Lilleaas (@augustl). These two new readers join @liza’s epubjs, which will be a year old on Tuesday. An improved version of epubjs powers the ePub Zen Garden, which helps “dispel the myth that digital books can’t also be crafted works of visual design.”
Why are JavaScript ePub readers interesting? They’re interesting to me for three reasons:
Colin Hazlehurst has also published some impressive introductions, tutorials, and code for the .NET/C# crowd at his InsideEpub project and on his blog.
Do you know of other techies making waves with ePub? Please let us know!
(And if you’re one of those publishers who is looking for help, contact us.)
The invaluable epubcheck has officially been at version 1.0.3 for months, but the latest incremental build (1.0.5) has significant improvements. I’ve been seeing a number of ebooks entering the marketplace which pass epubcheck 1.0.3 but have serious flaws that are caught in 1.0.5.
At Threepress we’ve been using 1.0.5 internally for some time, as I suspect many organizations have, so I’ve upgraded the public epubcheck validation service to use the latest code. I’ll keep it up to date periodically until version 1.0.5 becomes final.
(If you prefer to use an earlier version you should download the code directly from the main site, but I strongly recommend against doing so as many serious errors may be bypassed.)
I had a great time speaking in front of the audience at Digital Book World 2010. Actually, that’s not true, it was pretty scary — big audience! But the talk seemed well-received, and the conference was very well-organized, especially given that this was its first year.
You can follow the slides and notes on the Digital Book World page for the talk (sorry about my giant head). The slides are also embedded below.
We’re starting to share early betas of the Ibis Reader mobile UI for iPhones, Nexus Ones, and other Android devices with a limited group of testers. If you’re interested in joining the beta program and testing on other phones, tablets, and laptops, please email info@ibisreader.com. You may be asked to sign a non-disclosure agreement.
More info on our upcoming ereader is available in our announcement post.
BookServer’s open architecture could help enable a new digital ecosystem that helps people find, buy, acquire, and read books from any source, on any device, using many different ebook readers. Based on common, open standards the project has the goal of giving readers the ability to find the books they want, in the formats that they can use, for the device that they have. The goal for publishers, distributors, and libraries is just as strong:
Make as many books as possible available for discovery, with accurate descriptive information,
at as many different places as possible, under the sales / use terms permitted.
Tomorrow, Tuesday, January 19, 2010, at 1:00 PM Eastern, I’ll be presenting a BISG Webcast,
Understanding BookServer: The Power to Find, Buy or Borrow Any Digital Book in Any Format at Any Time. The webcast will cover the history and vision of the project, the pieces of the puzzle we’ve worked out so far, and highlight opportunities for publishers, distributors, and aggregators to expand the reach of their digital content in today’s burgeoning mobile and e-book landscape. Please join if you’re interested.
For all your retrospective needs, my ebook year in review and 2010 thoughts.
