Creating pop-up footnotes in EPUB 3

showme-footnotes-lg

In EPUB 3 Flowing and Fixed Layout books, you can create pop-up footnotes by labeling footnotes with the appropriate epub:type values. You use two elements to create a pop-up footnote: an anchor (<a>) element that triggers the popup and the <aside> element that contains the footnote text. Both elements have an epub:type attribute to identify their purpose: epub:type="noteref" to trigger the popup and epub:type="footnote" to indicate the footnote’s text.

In the example below, the anchor element (<a>) has two attributes: epub:type="noteref" and a link that references the location of the element that contains the popup's text.

The <aside> element that contains the popup's text also has two attributes:

  • id="myNote" that matches the value of the href attribute in the link that references it

  • epub:type="footnote"

Because the <aside> element has an epub:type of footnote, the text is hidden in the main body of the book. The text will only be seen by the reader in the context of the popup.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<body>
  <p>
    <a href="chapter.xhtml#myNote" epub:type="noteref">1
  </p>
  <aside id="myNote" epub:type="footnote">Text in popup</aside>
</body>
</html>

Example

Footnote and reference

<p>lorum ipsum.<a epub:type="noteref" href="#fn01">1</a></p>
<aside epub:type="footnote">
   My footnote
</aside>

Endnote and reference

<p>lorum ipsum.<a epub:type="noteref" href="#en01">1</a></p>
<aside epub:type="endnote">
   My endnote
</aside>

Endnotes section

<section epub:type="endnotes">
   <h1>Endnotes</h1>
   
   <section>
     <h2>Chapter 1</h2>
     <aside epub:type="endnote">
       My endnote
     </aside>
   </section>
</section>

Advertsing

125X125_06





MonthList

CommentList