Experimental Lex

Playing with words.

Tag Archives: ibooks

Page flip events in iBooks Webkit. No dice.

Still working on my iBooks interactive ebook (still top secret) and I wanted to reset the page to it’s original state after flipping to the next page.  I tried the pageshow and pagehide events.  These are tied to the Page Cache in webkit.  These are like the page load and unload events and I think these are designed more for navigating forward and backward in your browse history.

Didn’t work.  I suppose they work in some use cases, but not in iBooks which is admittedly not the main scenario that it was designed for.

Next I learned about the Page Visibility API which tracks the visibilitychange event. For example, if you switch to another tab in your browser, the visibilty state changes from “visible” to “hidden”.  I added code like this:

document.addEventListener("webkitvisibilitychange", function() {
   var state = document["webkitVisibilityState"];
   if (state == "hidden") {
   LEX.removeClass(card, 'flip');
 }, false);

I thought for sure that this would solve my need. Again, no dice. Deep down, I know that iBooks has separate webview controls and the page that I just flipped over is still open and does not consider itself hidden. That’s not the same as switching tabs, but I wish it were.

Oh well, another fail.  The good news is that iBooks unloads a page after you have flipped two pages forward.  When you flip back 2 pages, you see that the page has reloaded.

Little Known Facts … about iBooks, iPhone, and iPad

I’ve spent many days struggling with iBooks.  The weirdness of retina displays is giving me trouble.  I am creating a reflowable EPUB for iBooks with some tricky image sizing issues. In order to have the same ebook work on both iPad and iPhone 4+ without change, I need to determine the internal screen dimensions on page load.  For your benefit and mine, here is what I found out for portrait display iBooks.

iPad: 557 x 800


iPhone/iPod with retina display: 274×376

It’s also shocking that the true resolution of the retina display (640×960) is ignored.  All pixel dimensions are automatically doubled.

Yes, so annoying and confusing… I decided to work with scalable vector graphics (SVG).  It actually works well.  (more later)

Note to Self

Some time ago, I stopped blogging because it was too much work.  I treated each post like a masterpiece and upon reflection (and hindsight), many of the posts look pretty foolish.  Some weren’t too bad…

Anyway, I am trying something new with the blog.  In my recent ebook work, I have been uncovering all kinds of useful (and sometimes “-less”) technical facts about EPUB development.  So, my plan is to occasionally post my findings and share.  Kind of like taking notes. (Ergo the title “Note to Self”) Perhaps someday I will google for an answer and find my own post to answer my own question.

Coming soon, some posts on my hard-fought battles with EPUB and iBooks on the following:

  • Proper viewport settings for fixed layout
  • Event propagation
  • Raw/vintage Javascript
  • Twitter Bootstrap in EPUB


HTML5 Storage in EPUB

I’ve been working on some personal ebook projects recently and wanted to find out if I could use HTML5 storage in an iBooks EPUB.  The answer is not quite.  If you have information to the contrary, please let me know.

Here’s a code sample I used to increment the score for a user as they completed different activities.

function addScore() { 
var db = window["localStorage"]; 
var counter = document.getElementById("flipcount"); 
if (db["score"] != undefined) 
{ var c = parseInt(db["score"]); 
db.setItem("score", c+1); 
counter.innerText = db["score"]; 
} else { 
db.setItem("score", 1); 
counter.innerText = 1; 

It seems the iBooks does not recognize “localStorage”, though it does recognize “globalStorage”. Unfortunately, it doesn’t save the information after you leave a page.  Ideally, it would maintain it in a session that is accessible across all of the pages in a single ebook.  I hope this is fixed in an upcoming iBooks update.