Where eBooks are Going—Pop-ups in EPUB 3

This isn’t about whether or not we’re going to have or how often we’re going to be reading eBooks in the next few years, because I assume that’s been thoroughly answered to everyone’s satisfaction.

This is a little view into what they may look like in the next few years, focusing on one cool feature: pop-up glossary or footnote data inside your books. Before you run off saying this isn’t for fiction, think about how often you’ve been in the middle of a complex SF or fantasy novel and wished for a f**king character list—especially when half the character names seem to start with the letter K!  (Yes, that’s an actual quote from a reader). With science fiction you’re dealing with advanced technology that may require a little optional background info—selectable or ignored at the reader’s choice. Choice is always good, but clarity and one click away from answers is…priceless.

Let me walk you through it and then you decide if this is for you and your books.
I’m going to begin with the end and show you what it looks like first, along with a sample chapter you can read and use in iBooks to see what’s going on.

Right after this part, because this is where I spent a good deal of time. And because I think it’s cool:


I built a prototype web app that automates adding the pop-ups to your EPUBs. The app takes an EPUB page (good old HTML with some new bits in it), lets you add descriptions for characters, places, events, and then adds the code, references, and pop-up functions into the page. If all goes well you should be able to drop this into your ePub file and load it up in a reader that supports the type:epub attribute (e.g., iBooks 2.0 and higher). Screenshots and a link to the builder below.

Back to the beginning. Here’s what the pop-up glossary info looks like in iBooks—which currently supports this portion of the EPUB 3 spec:


Click for the full view: 


Example1

Click for the full view:


Example2
Example3

Here’s the working example of Seaborn I built with the web app I made. Download it and view it in iBooks or other EPUB 3 reader, or just hit this page with your iPad and click the link.  You should get an “Open in iBooks” dialog and then you’re set. 

Download Example: SEABORN EPUB WITH POP-UPs

Here’s the link andbelow ita walk-through of the app that I made to generate the EPUB with pop-ups.
Pop-up Glossary Builder app

 

Example4

You get to the next page, which looks like this:


Example6

When you get to the bottom of the page…


Example7

 

Keep in mind that this is pretty experimental right now. The parser for the nouns and phrases is very simple, and the find/replace operations don’t take into account words or phrases inside other words and phrasesso a link for “Atlantic” will also be dropped into the link for “Atlantic Ocean”.

Another thing: you will probably have to update your XML Namespace to point here: http://www.idpf.org/2007/ops

What this means is that at the top of your EPUB file you’ll see something like this: 

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Change the part that says xmlns: … to this:

xmlns:epub=”http://www.idpf.org/2007/ops”

Link structure

To make pop-up links in your EPUB files here’s what you do:

Wrap any words or phrases you want to explain in an anchor tag with epub:type=”noteref” with the href pointing to an in-document location, like this:

<a epub:type=”noteref” href=”#prax”>Prax</a>

Then, at the bottom of the page (I put mine right before the end body tag </body>) add an HTML5 <aside> tag, which supporting readers/browsers won’t show with the page.  This is where you stick your pop-up text and images:

<aside epub:type=”footnote” id=”prax”><p> <img src=”../Images/person.png” /> Praxinos (Prahx-ee-nos) was the third Wreath-wearer, King of the Seaborn, from House Alkimides. Kassandra calls him “Prax” for short.</p></aside>

Okay, that’s it for now. Let me know if you find any of this useful, how it can work better, all that stuff.  Leave a comment!

Big thank you to Liz Castro for her post on pop-ups in EPUB 3 at Pigs, Gourds, and Wikis.

Other things I was thinking about: EPUB is broken up into one file per chapter, section, or some kind of logical text break. So, you can have different text for the same word or phrase in different chapters, which allows you to reveal just enough info about a character without revealing too much and spoiling the plot or suspense. Also, wouldn’t it be nice at some point if you could turn links on or off?

 

.

Category: Books, ebook, ePub, EPUB 3 | Tags: , , , , , , ,

3 comments on “Where eBooks are Going—Pop-ups in EPUB 3

  1. Hi, I am trying to get an image to display in the footnote pop-up in iBooks as shown in your example. The coding is straight-forward but for some reason the image does not display. The text in the pop-up displays fine and leaves a blank space where the image should be. Has anyone else gotten this to work? Thanks!
  2. Hi Rob, I'm having the same problem. This used to work--as recently as a month ago. I am assuming at this point that it's something new in iBooks. A couple people have emailed about this issue as well. I will dig into it and post an update! Chris
  3. this feature would be really neat if an embedded video could work... it'll be useful for asl/english books with sign language videos... don't know if it'll work? secondly, it seems this code works only for ibooks? i tested it via azardi and readium (google chrome) on laptop as well as gitden reader and idea group reader on an android smartphone. doesn't work at all. i'm not sure if it's because the ereader doesnt support it, or if it's an ibooks specific feature?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>