Experimental Lex

Playing with words.

Tag Archives: epub

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.

Lies, Damned Lies, and Mime Types

If you’ve ever had the joy of building EPUB files and struggled with the cryptic error messages produced by epubcheck, you might find this interesting. I was having a number of facepalm moments the other day while dealing with an image icon for a Twitter user. My new Twitter friend @longreads is giving me a steady stream of wonderful content to read. And yet, I was having an awful time trying to figure out why epubcheck was rejecting the longreads Twitter icon as having the wrong mime type.

Here is the url for the icon . It has a “.jpg” extension which suggests that its mimetype is “image/jpeg”. If you download the file and open it in an image viewer app like the Preview app for Mac, it can tell you that it is actually a PNG file. In my automated workflow, this little time bomb silently waits until the EPUB is created before it announces itself during epubcheck validation.

I was previously using the file extension to determine the mime type, and that was obviously not going to work in this world of deceptive file names. Moreover, there are image urls that do not have any file extension. So, I tried to get clever and check the “Content-Type” header in the response when downloading files. However, I even found that this was not always correct.

I did some research on existing open source tools (Java and Python-based) and it is surprising how many use the file extension as the main determinant. And the tools that actually read the file header were said to be buggy. So, it dawned on me later that I should just look into the epubcheck source code and find out how it was reading image types.

Here’s the source code for BitmapChecker.java in the epubcheck source code. As is, it is not designed to be used externally so I created a copy and compiled it into a command-line tool like epubcheck. It is called MimeCheck and you can run it like this. It reads the file header returns the mime type.

$ java -jar mimecheck-1.0.jar twitpic.jpg


That only works if the file is in the same directory as the mimecheck-1.0.jar file. You can also provide the absolute path and it works the same. Here’s a download link for the jar file if you are interested in using it.


Let me know if you have any questions or if you need the source code. I think I have a few other EPUB-related tools that I can contribute and perhaps turn this into an open source project on Google code. That depends on whether anyone else finds it useful. I realize that not many people need to do automated builds of EPUB files.