A footnote is very common in books to explain something not very important for continuous reading but still worth explaining. for example in one of my books I wanted to refer the readers to another book for further reading on a specific subject. In a printed book this would be done with a number or asterisk (*) shown as super script (*) and in the bottom of the page repeat this number and explain it. This is why it is called footnote.
In EPUB reflowable book we don't have the notion of pages, pages are virtual entities determined by the reading application, so how do we implement foot notes in EPUB files?
The common method is links as it is in HTML websites, links that refer to another page or another place in the same page with the text for this note. In websites it is common to do it with special CSS or JavaScript. However EPUB2 does not support special CSS tricks and or JavaScript, only EPUB3 supports javascript and event this support is usually lacking.
EPUB3 standard contains a standard method for footnotes without the need for special tricks such as JavaScript or CSS, however the implementation varies between different reading system.
So how to do it?
Making a foot note is a two step process, the first step is putting the link at the right place. The second step is the note itself.
For the link we use standard html link with special attribute:
<a href="#n1" epub:type="noteref" >1</a>
The link can either be styled using CSS to appear as superscript or using the html tags.
Note the use of epub:type="noteref" this tells the reader that this link is not a standard link but a link to a note.
The note itself should be inside a new HTML5 semantic tag
For example:
<aside id="n1" epub:type="footnote" >
This is a note
<aside>
Note that the aside tag must have the id stated in the link href attribute, this way the reading system knows that this is the note to show for that link.
You also have to put the epub:type="footnote" so the reading system knows that this aside tag is a foot note. By default there is no special meaning to the aside tag.
It is advised to put the aside tag at the bottom of the HTML file.
There are no guidelines in the EPUB3 standard as to how a reading system should display foot notes.
Some reading system such as Apple iBooks will show the note as a popup like speech bublle in commics. Other reading system may jump to it and provide a button to go back, this is similar to what you do in a printed book — go to the bottom of the page and return back.
Do not put special styles for the aside tag as you don't know how the reading system will show it.
Since we added the epub:type attributes, this page will not be validated untill we add the epub name space to it.
This is done by adding the epub namespace to the opening HTML tag.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" >
Note the addition of xmlns:epub="http://www.idpf.org/2007/ops"
This tells the reading system where the epub:type and other similar attributes are defined.
Note that we have two name spaces declared, the first one is the standard W3C name space for XHTML.