EPUB 3 リフロー型のブックおよび固定レイアウト型のブックでは、任意の epub:type 値でフットノートをラベル付けすることにより、ポップアップフットノートを作成することができます。次の 2 つの要素を用いてポップアップフットノートを作成することができます。アンカー (<a>) 要素はポップアップをトリガーします。<aside> 要素はフットノートのテキストを格納します。両要素には epub:type 属性があり、それぞれの目的を識別します。epub:type="noteref" はポップアップをトリガーし、epub:type="footnote" はフットノートのテキストを示します。
下の例では、アンカー要素 (<a>) が 2 つの属性を持ちます。 epub:type="noteref" およびポップアップのテキストを格納する要素の位置を参照するリンクです。
ポップアップのテキストを格納する <aside> 要素にも 2 つの属性があります。
id="myNote" はそれを参照するリンク内の href 属性の値に一致する値
epub:type="footnote"
<aside> 要素には footnote の epub:type があるため、そのテキストは、ブックの本文内では非表示になります。 テキストは、ポップアップのコンテキスト内でのみ読み手に見えるようになります。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">. . .<p> <a href="chapter.xhtml#myNote" epub:type="noteref">1</a></p><aside id="myNote" epub:type="footnote">Text in popup</aside>. . .</html>注記: epub:type 属性の使用には、xmlns:epub="http://www.idpf.org/2007/ops を <html> 要素に含めることが必要とされます。
対象のブックが右から左へなど特定のテキストの向きを必要とし、かつフットノートのテキストの向きを合わせたい場合は、フットノートのテキストを <p> 要素にラップし、テキストの向きを指定するスタイルを追加します。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> . . .<p> <a href="chapter.xhtml#myNote" epub:type="noteref">1</a></p><aside id="myNote" epub:type="footnote"><p style="direction:rtl">Text in popup</p></aside>. . .</html>注記: EPUB 3 のブックにポップアップ形式の脚注を追加する際に、<aside> エレメントを、<div> エレメントまたは <p> エレメントに置き替えることができます。脚注を非表示にする場合は、<aside> エレメントを使用し、通常の読書ビューに脚注を表示する場合は、<div> エレメントまたは <p> エレメントを使用します。<div> または <p> を使用した場合、ユーザが脚注のリンクをクリックすると、コンテンツがポップアップ形式で表示され、脚注もページ上のテキストの一部として表示されます。