Josh On Design

With all of the hoopla last week about the innovative features in the new iBooks 2 I thought it would be instructive to see what could be done with pure HTML 5. I put together a little demo which adapts to screen sizes and has simple interactive content. Here's what it looks like:

View the live demo here. I highly suggest you load it up on an iPad as well. Try rotating the screen (or make the browser window narrow if you are on a desktop.) Keep in mind this is just a prototype. It's not skinned or made to look pretty at all.

You can spin the little sphere tree by dragging with your mouse. If you view this on a tablet it will respond to touch events as well. You can click on the photo to see a large fullscreen version. The footer will stay fixed to the bottom. The inline photo and canvas will resize and move to the left edge if you switch to portrait mode.

My goal for this effort is use pure semantic HTML. If we want to scale this up to a full book then the markup needs to be as close to pure text as possible. I'm using only divs with paragraphs and headers for all textual content. The interactive stuff is canvas or img tags. All interaction is standardized and put into reusable javascript files except for the actual dot tree itself (though it does use reusable components). I had to add a little hack to make the canvas resize properly, but that is also reusable. The footer and general layout is pure CSS.

I think the prototype turned out pretty well. It would be easy scale up to a full book with one page per chapter. Table of contents, index, and glossary would have to be written by hand unless we have some automated tool to do it, though I think such tools already exist.

So far I haven't found much that the new iBooks 2 format does that couldn't be done with plain HTML. They did add nice columns and shaped floats, but that is part of the CSS 3 specs and could be implemented in the renderer quite easily. (And shaped floats have been hacked into CSS2 for over a decade!)

I do like the look of iBooks Author. It's a very nice visual tool that should let people create books without any programming experience. The new terms of service are a different issue, but after thinking about it I've decided I don't care. iBooks Author is a tool for formatting content to be sold in the iBookstore. It really has no purpose other than that so the terms of use don't make much difference. Amazon has their own tools for their own store as well, and I expect them to get better with the advent of the Kindle Fire.

While I would love to see a beautiful visual editor like iBooks Author that formats content for all possible bookstores I don't really expect Apple to build it for me. Such a solution will have to come from a third party. Fortunately third parties now know that Apple won't compete with them to build such a tool, so I expect we'll see something like it soon.

Anyway, back to my HTML 5 prototype. Anything else you'd like to see it do?

Please send feedback and comments to my twitter account @joshmarinacci instead of on the blog. Thanks!