ReedenReeden
电子书扩展

富文本脚注

使用标准 EPUB 3 或 Reeden 集中式结构制作可打开的脚注

富文本脚注让读者在正文中点击脚注标记,并查看包含段落、强调或链接的说明内容。

点击正文脚注标记后在当前阅读页打开脚注卡片

优先使用 EPUB 3 标准脚注

新制作的 EPUB 3 应优先使用标准 epub:type 语义:

XHTML 根节点需要声明 EPUB namespace:

<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:epub="http://www.idpf.org/2007/ops">

正文与脚注可以写成:

<p>
  正文<a epub:type="noteref" href="#note-1">[1]</a>
</p>

<aside epub:type="footnote" id="note-1">
  <p>脚注正文。</p>
</aside>

href="#note-1" 必须指向脚注元素的 id="note-1"

制作集中式脚注列表

使用集中放在章节末尾的脚注列表时,可以使用 Reeden class:

<p>
  正文<a class="reeden-footnote" href="#note-1">[1]</a>
</p>

<ol class="reeden-footnote-content">
  <li class="reeden-footnote-item" id="note-1">
    <p>脚注正文。</p>
  </li>
</ol>

三个 class 的职责分别是:

class作用
reeden-footnote标记正文中的脚注引用
reeden-footnote-content包裹集中式脚注列表
reeden-footnote-item标记一条带 id 的脚注内容

脚注内容可以包含普通的 XHTML 富文本。引用与内容建议放在同一 XHTML 文件中。

常见问题

点击后没有找到脚注

检查引用是否为带 hrefa 元素、href# 后的片段是否与脚注 id 完全一致,并确认 id 在当前文件中唯一。只给无链接的 span 添加 class 不会建立脚注关联。

脚注内容直接出现在正文中

确认脚注项具有标准 epub:type="footnote",或者使用了完整的 Reeden 集中式脚注结构。

不要用 CSS 把脚注内容永久设为 display: none,否则脚注内容无法显示。

兼容写法

规范写法兼容写法
reeden-footnoteduokan-footnote
reeden-footnote-contentduokan-footnote-content
reeden-footnote-itemduokan-footnote-item

相关文档