DPUB脚注についての検討メモ

関連VFM PR：

• Add DPUB-ARIA footnote mode and redesign footnote option API

関連Vivliostyle.js Issue/PR：

• Support footnotes using role="doc-noteref"/"doc-footnote" attributes
• feat: Support footnotes using role="doc-noteref"/"doc-footnote" attributes

検討課題：

• <aside role="doc-footnote"> の出力位置
• <a role="doc-noteref"> のマークアップと脚注参照番号の形式
• <aside role="doc-footnote"> のマークアップと脚注番号の形式

原則とする方針：

• EPUBとの互換性
  • role属性をepub:type属性に変えればEPUB脚注にも対応できて、EPUBリーダーでの脚注対応（ポップアップ表示など）を活かせること
• HTML文書として再利用性が高いこと
  • 普通にWebページとしてブラウザで表示したときに、読みやすいこと
  • 目的に応じてCSSでスタイルを変えやすいこと

<aside role="doc-footnote"> の出力位置

Vivliostyle.jsでのDPUB脚注サポートでは、組版結果での脚注は基本的に脚注参照 <a role="doc-noteref"> と同じページに配置され、HTML文書上での脚注本体 <aside role="doc-footnote"> がどこにあっても組版結果には影響しない。そのため、HTML文書上での脚注本体をどこに出力するかは、HTML文書としての利便性や再利用性を考慮して決めればよい。

次の3つの選択肢が考えられる。

1. 元のMarkdown文書での脚注定義の位置
2. 脚注参照のある段落の直後
3. ドキュメントの最後

「1. 元のMarkdown文書での脚注定義の位置」が、Markdown原稿作者の意図をそのまま反映できてよいのではないか。

<a role="doc-noteref"> のマークアップと脚注参照番号の形式

Vivliostyle.jsでのDPUB脚注サポートでは、デフォルトのスタイルシートで、脚注参照 <a role="doc-noteref"> をフォントサイズを小さめにした上付き文字で表示するようにしているため、<sup> 要素を入れる必要はない。しかし、通常のHTML文書としての再利用性を考慮すると、<sup> 要素を入れないと本文テキストと脚注参照番号が区別しにくい問題がある。Vivliostyle.jsのデフォルトのスタイルシートでは <a role="doc-noteref"> と <sup> 要素が組み合わせて使われている場合には、上付きのスタイルが二重には適用されないようにしているため、<sup> 要素を入れても脚注参照としての表示には影響しない。

考えられる選択肢：

1. sup要素あり　<a id="fnref1" href="#fn1" role="doc-noteref"><sup>1</sup></a>
2. 番号のみ　<a id="fnref1" href="#fn1" role="doc-noteref">1</a>
3. 番号を角括弧囲み　<a id="fnref1" href="#fn1" role="doc-noteref">[1]</a>

「1. sup要素あり」が、HTML文書としての再利用性が高いのではないか。上付き以外のスタイルにしたいならばCSSで変更すればよい。

<aside role="doc-footnote"> のマークアップと脚注番号の形式

考えられる選択肢：

1. ol要素使用

   <aside id="fn1" role="doc-footnote">
     <ol start="1">
       <li>Footnote</li>
     </ol>
   </aside>

2. 番号をsup要素囲み

   <aside id="fn1" role="doc-footnote">
     <a href="#fnref1" role="doc-backlink"><sup>1</sup></a> Footnote
   </aside>

3. 番号のみ

   <aside id="fn1" role="doc-footnote">
     <a href="#fnref1" role="doc-backlink">1</a> Footnote
   </aside>

4. 番号とピリオド

   <aside id="fn1" role="doc-footnote">
     <a href="#fnref1" role="doc-backlink">1.</a> Footnote
   </aside>

5. 番号を角括弧囲み

   <aside id="fn1" role="doc-footnote">
     <a href="#fnref1" role="doc-backlink">[1]</a> Footnote
   </aside>

「1. ol要素使用」なら、list-styleや::marker疑似要素を使って、番号のスタイルをCSSで柔軟に変更できるメリットがある。脚注番号は counter(list-item) で扱える。そのためにol要素のstart属性を使って、脚注番号の開始番号を指定する必要がある。この方法では脚注番号をbacklinkにすることはできない。

「2. 番号をsup要素囲み」なら、脚注番号をbacklinkにすることができるメリットがある。上付き以外のスタイルにしたいならばCSSで変更すればよい。しかし、list-style-position: outside に相当するスタイルを適用することができない。