footnote as popup in epub

Question

In an ebook I bought, if you click on the number of a footnote the text of the note appears as a popup, and you may choose to close the popup or go to the chapter with footnotes. I noticed this behavior both on Moon+Reader and in Calibre reader, so I am confident it depends from the raw text of the epub.

However, I looked at the source code and I did not find anything hinting at this. The source for a footnote is

<span class="apice"><a href="../Text/base7.html#fnref15" id="fn15">[15]</a></span>

The text for the note starts with

<p class="Note"><span class="apice-note"><a href="../Text/base4.html#fn15" 
id="fnref15">[15]</a></span> blah blah ... </p>

and the relevant CSS is

p.Note {
  font-size : 0.75em;
  line-height : 1.2;
  text-align : left;
  color : #000000;
  text-indent : 0px;
  margin : 0px 0px 7px 0px;
}
span.apice {
  font-weight : normal;
  font-style : normal;
  font-size : 0.70em;
  vertical-align : super;
  color : #000000;
}
span.apice-note {
  font-weight : normal;
  font-style : normal;
  font-size : 0.80em;
  vertical-align : super;
  color : #000000;
}

Where is the trick?

Addendum: It seems indeed that I casually picked two of the very few reader applications which support footnotes - see this announcement on Facebook for Moon+ Reader and this thread for Calibre.

Answer 1

There are two possibilities here, and without seeing more of the book's code, it's not really possible to tell. The first is that this is extra functionality offered by the reading system rather than something built into the epub file itself. As noted by Liz Castro in the spec, this is similar to Apple's example of

supporting symantically marked footnotes, and then "associating specialized behaviors" as the spec directs.

If that's the case, Moon+ and Calibre don't seem to be supporting the epub 3 spec as directly as Apple does, though—according to the Structural Semantics Vocabulary for epub 3, footnotes should be contained in <aside> tags marked with epub:type=footnote" and then corresponding epub:type="noteref"s for the superscripted symbols in the body.

The other possibility is that there is some JavaScript in the ebook file that is somehow accessing content in a different file. Since JavaScript is generally constrained by the DOM, though, this doesn't seem likely.

if you'd like to replicate the behavior yourself in an epub 3 file, the relevant code (heavily cribbed from the spec) to try out would be:

<p>This is some body text with a footnote reference. <a class="noteref" epub:type="noteref" href="#note1">1</a></p>

...

<aside class="footnote" epub:type="footnote" id="note1">1: This is a corresponding note</aside>

Note that this behavior is purely optional—epub 3 has the ability for publishers to tell the reading system what kind of content a particular section is, and it is up to the reading systems to decide what they want to do with that information.

EDIT: Based on your comment, it sounds like since there is no JavaScript and the book is epub 2.0, there is either something hack-y going on or the reading systems you're using are looking for particular classes and associating special behavior with them. Based on this blog post, I'm guessing the former—it sounds like you can include the correct namespacing in an epub 2 file to allow epub:type to work, and change the <aside> tag to a <p> with display: none on its CSS to get this to work in iBooks, which Moon+ and Calibre might be copying.

Note that according to that blog post, this gives you a working ebook that fails epubCheck, which means that many retailers will reject it. Making an epub 3 file might be the way to go for you.