The EPUB 3.0 specifications are designed to take advantage of HTML5.
From this version, an application for reading an EPUB book can display notes and footnote references separately by displaying the text of the note differently , for example, in a separate dialog box instead of showing them from within the main book text or chapter.
Having designed an Android app that reads these kind of files using a WebView, my objective was to take advantage of this new EPUB feature.
EPUB book Moby-Dick downloaded from this link:
Without any particular treatment of the following EPUB annotation
epub:type="noteref"used in the text of the EPUB 3.0 footnotes, all the footnotes and references using this annotation will be by default displayed with the rest of the text at the end of the page. You can see an example of this default behavior on the next image on the left.
On the other hand, in the image on the right, you can see the result of displaying the same text, but this time using a dialog box which can only be seen when the user clicks the link to the reference. This eliminates the need for the footnote text to be displayed at the end of the main page text.
Then, once having verified that the clicked element contains the annotation corresponding to
epub:type="noteref", I retrieve the text from the target HTML file at the target location and finally I show this text in a dialog box using the Android AlertDialog component.
The solution in details
In summary, I’ve separated the whole task into three parts:
On each click event of the page this function calls a method of my ‘WebViewJavaInterface’ class which I have given the alias of ‘Android’.
2. WebViewJavaInterface class
This class contains three methods used for displaying the text of the footnote reference inside a dialog box.
The getNoteRefText method then gets two parameters: the URL of the local file to read and the keyword of the element found in the text of the file. This method uses also another method from a custom class that I made to help me read and load data from any XML content that I called LoadHelper.readFootNoteFromContentFile.
This last method uses the SAX library available for Java, but again this is another subject that I won’t explain here in detail.
And next you will see the loading of each URL into the WebView.
This last method loadUrl takes as parameters the WebView used to display the XHTML pages from the EPUB file and the L’URL to be displayed.
My method FileIO.getContents returns the content of the file passed as parameter with the selected encoding, this method uses the Java Class RandomAccessFile in order to accomplish this task.
Finally I’ve included the following links that were very useful to me concerning the same subject (reading EPUB files, footnotes, etc.) and I hope it could be useful for you too:
Inside EPUB (anglais) – Inside EPUB EPUB 3 Overview (anglais) – EPUB 3 Overview Creating pop-up footnotes in EPUB 3 (and thus in iBooks) (anglais) – Creating pop-up footnotes in EPUB 3 (and thus in iBooks)