Let Me Pop Your eBook's Images

RSS  •  Permalink  •  Created 16 Feb 2015  •  Written by Alberto Pettarin

Once I was reading on my iPad an EPUB version of a history book, when I reached a point where the eBook displayed a map of a battlefield, included in the EPUB as a high resolution PNG image.

The image was scaled to fit roughly 90% of the screen width, but iBooks opened it in "fullscreen mode" when I double tapped it. I perused the map, zooming it as needed, dragged it around, and then I continued reading the text.

Until, several chapters later, I felt the need to look at the map again. Of course, the author could not anticipate my cognitive need at that very point of the narration, and place a link to the map right there.

I could

  1. bookmark the current location,
  2. go back and enlarge the map again, and
  3. return to the location I was reading,

but that way I could not have, on the very same screen, both the map and the text passage I was reading.

This is a limitation.

This is a limitation that should not exist in eBooks.

This is a limitation that should not exist in eBooks because smart reading systems should allow the user to rearrange the book assets at the user's wish, covering cognitive needs like mine with that map.

I cannot emphasize enough the concept that, if we want a more efficient reading experience, we need better eBooks, and better reading systems.

(The business/technical dynamics of this chicken-and-egg problem will be the subject of another post.)

People rightly promote the notion of

"eBooks are superior to print-replica formats (e.g., PDFs) because they allow the user to customize the reading experience using semantics"

but, if you look at current (EPUB) reading systems, that notion is embodied at best by "changing typography settings" and "exporting annotations".

Popup Images in Menestrello v3

In Menestrello v3 I slipped in a feature which would have helped me with the aforementioned map: double tapping an image will open it in fullscreen mode, and double tapping it again will make it "float" over the text, even across different chapters (XHTML files).

Let me explain with an example. The eBook featured in the following screenshots is Maurizio Falghera's Come realizzare audiolibri in Home Studio ("How to produce audiobooks in Home Studio"), which is a great manual about audiobook production, available in EPUB 3 Audio-eBook (reflow + Media Overlays) format.

Suppose you want to enlarge Image 7G:

Blog Image 20150216-text.png

In Menestrello v3 all you need to do is double tapping it, and this works independently from the actual XHTML code in the EPUB:

Blog Image 20150216-full.png

In this "popup" mode, you can also pinch to zoom the image in/out or drag it around:

Blog Image 20150216-zoomed.png

If you simply tap the image, the "popup" will close, and you will return to the text.

Nothing new so far. But if you double tap the image again, Menestrello will float it over the text:

Blog Image 20150216-floating.png

and again, you can also resize/drag it around. In the above screenshot you can clearly see the "original" image embedded into the text, and the "floating" enlarged clone.

But things get more interesting quickly: just a few screens below Image 7G, Image 7I shows the same audio waveform after the editing explained in the text:

Blog Image 20150216-other1.png

Clearly, the user might want to visually compare Image 7H with Image 7I.

If we float and drag 7H as explained above, we can have both images in the current screen, and compare them:

Blog Image 20150216-other2.png

Moreover, we can even pop the second image out, and resize it for a better comparison:

Blog Image 20150216-floating2.png

(In the previous screenshot I moved the images a bit outside the viewport on the right, to reveal the text below them and show that the two images are indeed "floating".)

Future Work

This feature is just a proof-of-concept, and its edges are still rough, but I wanted to talk about it because I think it makes for a clear example of the kind of manipulations that a smart Reading System might allow the user to perform with her eBooks.

The first improvements (over the current implementation) that come to my mind:

  • let the user "park" images (or audio/video files, citations, … you name it) in "drawers" (e.g., side panels/tabs) that can be accessed even from other locations of the eBook
  • smoother image scaling/dragging
  • tools to enhance/edit the popped images, like scaling, rotating, cropping, gamma adjustment, make-this-color-transparent, etc.
  • actual comparisons tools, like side-to-side/aligned display
  • export assets (email, DropBox, Twitter, etc.)
  • customizable gestures to activate/disable this function

I expect that empowering the reader will also solicit concerns about the intellectual property of the eBook assets. However, I strongly believe that the potential gains of smarter eBooks/apps, especially for learning activities, massively outnumber these "rights concerns".

BTW, once your eBook does not have DRM, the same manipulations can be performed by the user anyway. (And we all know "heavy" DRM does not have a bright future ahead…)

What do you think about the concept of "eBook as a container of assets" and the implied importance of the reading systems?

You can reach me via email or on Twitter (@acutebit).