Turning ePub chapter end-notes into “popups”

Lately, as part of my efforts to learn French, I’ve been trying to read Rivarol’s French translation of Dante’s Inferno on my Android mobile phone. I’ve mostly been using Kindle, but I have also tried FBReader. I’m not sure what format Kindle uses, but with FBReader(J) I’ve been using the ePub version from gutenberg.org.

One problem I’ve been finding is that all of the end-notes are at the end of the chapter (as you might expect), and it is hard to flip back and forth between the end-note and its reference. To remedy this, I decided to find a way to make the end-notes appear as “popup” boxes over the main text. Unfortunately, this was not directly possible with the fairly limited ePub format (or, at least, not with FBReaderJ). A simple solution was to (1) put all of the end-notes at the end of the document, rather than the end of the chapter (so that you wouldn’t have to skip over them), (2) create hyperlinks allowing you to jump back and forth between each reference and its corresponding end-note, and (3) put a page break after each end-note entry so that you only see one at a time. To achieve (3), one way in FBReaderJ is to simply put a new level-2 heading at the start of each entry, which causes it to be put on a new page.

Luckily, the ePub format is very simple, consisting of just a few XML files contained in a ZIP archive, with the actual content being stored in XHTML format. My usual approach to this kind of problem would be to hack something up in Perl using regexps. However, this time, I decided to do something in Java, partly because I had some kind of idea that I might try to integrate it into FBReaderJ at some stage. This has probably led to it taking twice as long and ending up twice as complex, but on the other hand it has improved my knowledge of Java’s XML libraries.

Here is an example of the result, looking at a paragraph from Dante’s “l’Enfer” chapter 18 (the text is public-domain). Notice the blue link reading “[end-note 1]”. Before processing, this was simply “[1]” (and not a link). I added “end-note” to make it a bigger target.

And here is what you get if you click it:

…And there’s a link back to the reference’s location in the main text. As you can see, the link text I have added is in English. In retrospect, perhaps it should be in French :).

It took surprisingly long to write the code for this, considering how simple it seems now. But I did have to update the OPF descriptor file, and the toc file as well, and create tables of all the relevant ids to create the links, and then separate the end-notes out into a separate document so they could all go at the end without risking hitting some obscure ePub file size limitation, all while wrestling with the w3c DOM in Java… you get the picture :). I think my program should work with all of the rest of the ePubs in the same series (Rivarol’s French Dante – so far I’ve only tried it with l’Enfer [Inferno]), and it should be fairly easy to adapt it to work with slightly differently formatted documents.

I am continuing to work on trying to make FBReader a better platform for language learning. I have a funny feeling my next stop is going to be to do something with ColorDict…


Leave a comment

Filed under EBooks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s