<aside>ではなく<div>要素に注釈部分を記述

以前のエントリではfootnote指定を<aside>タグの属性として記述していたのですが、この状態ですとiBooksでは注釈部分は表示されません。今回は通常のテキストとしても表示させたかったので、<div>要素の属性としてfootnote指定をしました。以下のような感じです。

呼び出しファイル側：

<p>本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る<span class=super><a epub:type=”noteref” href=”#cyu001″>［★］</a></span>本文テキスト入る本文テキスト入る本文テキスト入る</p>

注釈ファイル側：

<div class=”start-1em”>
<div epub:type=”footnote” id=”cyu001″>
<p><span class=”gfont”>注釈タイトル</span></p>
<p>注釈テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る</p>
</div>
</div>

なお今回は複数の段落ブロックを注として表示させるためにdiv要素に対してfootnote指定をしていますが、ブロック要素内の一部のテキストのみをポップアップ表示させたい場合は、span要素に対してfootnote指定をすることで実現できるようです。

リンクタグはネストの一番内側に記述する

以前のエントリーにも書いたのですが、リンクタグ（aタグ）はネストの一番内側に記述する必要があります。そうしないとiBooksでポップアップが動作しません。

本文テキスト入る<span class=super><a epub:type=”noteref” href=”#cyu001″>［★］</a></span>本文テキスト

ならOKですが、

本文テキスト入る<a epub:type=”noteref” href=”#cyu001″><span class=super>［★］</span></a>本文テキスト

ではダメです。

ポップアップウィンドウ内ではCSS指定は無視される

また、ポップアップウィンドウ内では一切のCSS指定が無視されます。このため、太字や書体指定など、CSS指定に依存する表現は使用しない方が良いと思われます。同様にルビも通常のテキストとして表示されてしまいます。ただ、こちらは<rp>タグを利用して「文字（ルビ）」のように表示させることで対処できそうです。今回はルビが無かったため試してはいませんが、ソース的にはこんな感じでしょうか。

<div class=”start-1em”>
<div epub:type=”footnote” id=”cyu001″>
<p><span class=”gfont”>注釈タイトル</span></p>
<p>注釈テキスト入る<ruby>注釈<rp>（</rp><rt>ちゅうしゃく</rt><rp>）</rp></ruby>テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る</p>
</div>
</div>

また、注釈部分に内部／外部問わずリンクを含めるのは、現状では避けた方が良いようです。内部リンクではタップした際にポップアップウィンドウの挙動がおかしなことになりますし、外部リンクではアプリケーションが落ちてしまうようです。

注釈部分のファイルサイズは30KB程度を目安に

正確な値は分からないのですが、どうやら呼び出す注釈部分のファイルサイズが大きすぎるとポップアップが動作しなくなるようです。おそらくiBooksのメモリ管理の関係かと思います。試してみた範囲では、XHTMLファイルのサイズを30KB以下程度に抑えることで回避できるようです。ただ、リンクの数に依存する可能性もありますので、正確なところはわかりません。