如何给自制 Kindle 电子书添加弹出脚注或尾注

更新时间： 编辑：书伴 分类：使用技巧 49 条留言

脚注 (Footnote)，是书籍中的常见元素，比如对语汇、内容、背景、引文作介绍、评议的文字。在 Kindle 上查看注释很便捷，如果在电子书中遇到脚注标记，点击即可在弹出的脚注框中阅读完整脚注内容，而不需要切换页面或离开当前的阅读位置。如果想要查看所有脚注，点击【前往】即可浏览所有的脚注内容。如下图所示，是 Kindle 电子书弹窗注释的两种形式。

kindle-ebook-footnote

一、给 Kindle 电子书添加弹窗注释

一般脚注分两个部分，一个是“脚注标记”，另一个是“脚注内容”。脚注标记通常会以上标文本的形式显示，类似于“文本【1】”、“文本【注】”。脚注内容通常会放在电子书章节末尾或整本书内容的最后一页上，如“【1】解释内容”。给电子书添加弹窗脚注也很容易，很简单的两段 HTML 代码即可完成。

脚注标记代码：

<sup><a id="footnote-1-backlink" href="chapter02.html#footnote-1">【1】</a></sup>

这里使用了上标文本标签 <sup> ... </sup> 以便于和正文文字区分。注意标签 <a> ... </a> 中有两个属性，id 是脚注标记的锚点，方便从脚注内容的位置跳转过来，href 的值表示的是从脚注标记转向脚注内容锚点所在的位置，注意路径、文件名以及脚注内容的 id 要和脚注内容相对应。

脚注内容代码：

<p><a id="footnote-1" href="chapter01.html#footnote-1-backlink">【1】</a>这里是注释内容。</p>

和脚注标记相反，这里的 id 是脚注内容的锚点，方便从脚注标记的位置跳转过来，href 的值表示的是从脚注内容转向脚注标记锚点所在的位置，注意路径、文件名以及脚注标记的 id 要和脚注标记相对应。

另外，经过测试，发现如果注释标记和注释内容在同一个页面上，前后之前需要有足够多的段落，不然点击注释标记将没有反应。如果注释标记和注释内容放在不同的页面上，则没有这个问题。

二、脚注为什么有两种显示形式

如本文开头的图片所示，在 Kindle 中脚注有两种显示形式：一种是在页面中间弹出一个显示注释内容的单独窗口；另一种是在页面底部弹出注释内容。这是因为电子书生成工具版本导致的。

Kindle 电子书的标准有 mobi7 和 mobi8 (KF8) 两种，亚马逊官方提供的电子书生成工具是 KindleGen，如果使用的是 1.1 版本生成的电子书是 mobi7 标准，注释内容会以弹出单独窗口的形式显示；而最新版本如 2.9 版本生成的电子书则是 mobi8 标准，注释内容会以底部弹出的形式显示。

三、为什么底部弹出注释会重复

* 注意：这个 Bug 已经在新的 5.7.2 版本固件中得到了修复，如有遇到建议升级到最新固件。

kindle-ebook-footnote-repeat

如上图所示，现象很多小伙伴都遇到过这个问题（1、2、3、4），点击某一脚注后，偶尔脚注内容会出现重复的现象。这和电子书没有什么关系，可以确定是 Kindle 固件的一个 Bug。也有的小伙伴向客服反馈过这一问题，可然并卵，只能希望 Kindle 固件开发团队在下一版本中修复这一问题了。

© 「书伴」原创文章，转载请注明出处及原文链接：https://bookfere.com/post/285.html

“制作Kindle电子书”相关阅读

给这篇文章写一条留言

提示：带 * 标记的是必填项。您填写的邮箱地址将会被保密。首次留言将会在通过人工审核后显示。如果是提出问题，请务必提供尽可能多信息，这有助于他人更好地理解你所提出的问题。

小伙伴们写下了 49 条留言

  1. 请问在手机KindleApp里面就可以弹出脚注，但是到了Kindle设备里面就跳转到脚注页，这怎么办啊？
    固件版本5.16.xx

    回复

  2. 请教一下站长，脚注只支持横排的书吗，我有一本epub格式的带脚注的电子书，转成竖排之后导入kindle，打开时提示打开出错，但是横排格式下可以正常打开。竖排之后只在kindle无法打开，在iPad的Books软件里以及iPad的Kindle软件里都可以正常打开。所以怀疑是脚注和竖排在kindle里不兼容。不知可否帮忙查看下具体原因和解决方案，源文件发您邮箱可以吗？

    回复

      • 站长你好，我已发邮箱，邮件名为飞车乐园，劳驾您方便时测试一下，不胜感激！

        回复

        • 这个问题是 CSS 中存在冲突声明导致的。请检查电子书的所有 CSS 文件，看是否有与 -webkit-writing-mode: vertical-rl; 相冲突的声明，如 -webkit-writing-mode: horizontal-tb;，如果有的话可以将其删除，或将其属性值 horizontal-tb 修改为 vertical-rl。

          回复

          • 多谢站长！照您提供的方式修改后可以正常加载了
            尚有问题想请教一下
            1.设置书本的语言为繁体之后，在kindle里显示的字体还是简体中文的那四个字体，选用之后在竖排模式下，逗号和句号这类标点符号的位置仍然没有居中，而是偏左下角显示，我确认已经在meta标签下把语言选项修改为了zh-TW，也尝试导入过原生的繁体书，都存在标点符号未居中的问题，请问站长，这是kindle固件的特性还是我设置存在的问题？样书可以参考之前上个问题里邮箱发给您的电子书
            2.假如想要在书内嵌入多个自定义字体，如正文一种、对话一种，可否将自定义字体导入kindle，再在css里调用族名。另外，可否只针对对话的css设置字体，比如对话设置为字体A，导入kindle后，在kindle内的自定义字体面板手动选择字体C，选择之后，预先定义过的对话的字体A会自动被字体C覆盖吗？不知站长可否赐教，或者有无别的办法实现这样的需求

            回复

  3. 请教一下站长，如果书中有大量的注解的话，有能快速添加的方法或工具吗？

    回复

  4. 请教站长，在calibre阅读里面电子书有弹注，导入kindle就没有弹注了。这种情况怎么解决呢？

    回复

      • 我用calibre打开，

        标注部分代码 <a href="part0011.html#footnote1"></a>

        内容部分代码 <a href="part0011.html#note1">波希米亚最早从威尼斯人学会烧玻璃；波希米亚玻璃表示玻璃古老及质地坚固。</a>

        ID值不是数字开头。

        回复

        • URL 片段部分应该是目标元素的 ID。比如 part0011.html#footnote1 的片段是 #footnote1，那么它指向的目标元素 ID 就应该是 footnote1，反之亦然。以你提供的代码为例，正确的 HTML 代码应该像下面这样。

          标注部分代码：

          <a href="part0011.html#footnote1" id="note1"></a>

          内容部分代码：

          <a href="part0011.html#note1" id="footnote1">波希米亚最早从威尼斯人学会烧玻璃；波希米亚玻璃表示玻璃古老及质地坚固。</a>
          回复

  5. 请教一下站长，书籍格式为azw3，书籍内容中已经有尾注（在每一页的末尾），脚注的编号形式为（一）（二）（三）……，但是正文里的编号和尾注编号之间没有相互链接，如果手动逐一添加id和href实在太过麻烦（因为有很多章节）。请问有没有快速批量方法，可以将正文和尾注的编号连起来？

    回复

    • 如果上标数字和脚注之间有强关联的规则可循，可以通过查找替换功能批量处理，否则没有太好的办法。

      回复

  6. 请教下站长和各位，我按照上面的教程逐条添加了注释，现在实现了文后脚注点击返回文中注释处，但是文中注释的位置点击后会回到本章开头。回看了html里的代码，原来的每一个“…….html#footnote-×”中的“footnote-×”这一部分都变成了“filepos×××××”，推测是电子书的位置。请问这个如何解决？

    回复

      • 没有，只是用calibre编辑了原来没做注释的azw3文件，保存后不做任何转换的动作，再打开预览和导在kindle上，都会出现上面说的情况，原来代码写的是footnote-×，保存后关闭，再打开，同样的位置就变成filepos×××了。刚才看了下，这个是每一章的id，在同一章的注释，都会弹出本章开头的内容

        回复

            • 不好意思，最近两天比较忙，刚才测试了一下你发来的文件，问题的解决方法如下：

              这个问题是你为 <a> 元素的 href 属性添加的值有问题导致的。以第一个脚注为例，你将其放在了 part0037.html 中，设定的 id 属性值是 footnote-1，链接到这个脚注的 <a> 元素放在了 part0009.html 中，其 href 属性应该是 part0037.html#footnote-1，但是你指向了一个不存在的位置 part0009.html#footnote-1，所以 Calibre 自动将其改成了 part0009.html 中找到的第一个 id 属性值。

              解决方法是把所有要链接到脚注的 <a> 元素的 href 属性中的文件名部分都改成 part0037.html，就没问题了。

              回复

              • 哦，可以这么理解么：href属性中的文件名写哪个，取决于脚注的具体内容所在的html文件，而不是每个注释在正文中出现的位置

                回复

                • 是的。和平常使用的链接一样，添加 href 属性值时，先确定要链接到哪个文件（也就是 HTML 文档的路径），再确定片段的位置（也就是该文档中某个元素的 id 属性值），最后用井号 # 把它们连起来。

                  回复

                  • 请问 “片段位置”的代码怎么提取呢 <a href="chapter02.html#footnote-1" rel="noopener nofollow ugc">【1】</a> 这个是不是一个公式，需要footnote-1 这部分的位置代码 怎么获得呢？

                    回复

                    • footnote-1 就是某个元素的 ID 属性的值，一般搜索 id="footnote-1" 就可以找到，除非文档中没有这个 ID。

  7. 请问,epub格式下点击注脚就可以弹出注脚框,很方便,可是转成azw3就跳转到注脚页(但无法跳转回去).请问是哪里的问题啊?可否也保持epub格式下的注脚方式.
    谢谢

    回复

    • 把格式改成这个文章里的样子,现在可以回跳了,但是新问题是:点”注释”之后,在本页面下面弹出注释,可是注释一片空白,需要”前往脚注”

      回复

      • 请问您解决这个注释空白的问题了吗？我遇到的问题是回跳都正常，弹出脚注在电脑上也正常，但是 Kindle 上弹出的是空白框，点前往脚注，才能在文末看到脚注。感谢！

        回复

  8. 请问，我用sigil制作epub电子书，也制作了弹出式注释，手机上用多看app阅读一切都正常，注释也能正常弹出。但是一旦转换成azw3格式在kindle上阅读，第一章的注释怎样点都出不来，第二章以后又都能正常点出来。而且我发现，一旦把目录全清空，就是不生成目录，就都可以正常点出。我还试过一个一个目录加上去，当加到第二章目录时就出现第一章注释不能点出的现象，弄了两天了，还是不行，不知道是什么原因？

    回复

  9. 顺便再提一句，我的固件版本是5.9.4，因为没出现什么问题，所以一直没有升级。目前的最新版本可以竖排弹窗吗？

    回复

    • 上一条回复测试用的设备是 KPW3，固件版本是 5.10.3，脚注是有弹窗的。个人感觉应该和固件版本没有关系，还是建议检查一下脚注的 HTML 代码结构是否和本文说明的相同。

      回复

      • 感谢回复！在原 html 脚注锚点的确多了一句 ，删除后就可以底部弹窗了，非常感谢！另外还想问一下，我将整本书转为了竖排模式（同时替换为竖排标点），但弹窗依然是横排的，此时竖排标点很是很别扭，可否有办法令弹窗也是竖排呢？

        回复

        • 这个应该是没有办法改变的，弹窗的样式是 Kindle 系统控制的，不属于电子书能控制的范畴，

          回复

          • 请问怎样查看一本电子书的html代码 我指的是现成的mobi过azw3 文件 里面有脚注 但是点击脚注无法链接到后面的注释 无法弹出注释 这种可以修改么？不胜感谢

            回复

              • 拆解过之后呢？下面怎样操作才能添加注释？小白一个 期待你的指点 谢谢

                回复

              • 请问具体在哪儿输入代码？
                我拆解的是azw3版本的电纸书，拆解完之后又三个文件夹，分别是：1、HDImages（空白） 2、mobi7（里面含有一个images文件夹，文件夹里是一些字体文件和图书封面） 3、mobi8其中包括（META-INF文件夹、OEBPS文件夹 、mimetype文件和这本书的epub版电纸书。其中META-INF中只包含一个 名为container的文件；OEBPS文件中包含：（1）FONTS文件夹—空的、（2）Images文件夹——其中包含一些文字的图片和封面图片；（3）Styles——其中包含style0001和style0002两个文件；（4）Text——包含80多个后缀为xhtml格式的文件 每个文件中都有一部分电纸书的内容。）
                输入代码之后该怎样把修改过的电纸书还原成一本电纸书？
                期待您的回复

                回复

                • Text 文件夹里面的 XHTML 文件存放的就是电子书内容。对于 AZW3 格式的电子书来说，一个 XHTML 就是一个章节的内容，你可以根据本文提供的方法在相应的 XHTML 文件中添加脚注代码。编辑完成后你需要使用命令行工具 KindleGen 将电子书源码转换成 MOBI 格式电子书，命令如下（KindleGen 的具体使用方法可参考《官方转换工具 Kindle Previewer 和 KindleGen》这篇文章）。

                  kindlegen content.opf

                  如果你对电子书的源文件没有概念，建议使用 Calibre 或 Sigil 直接编辑电子书，这样更方便点。对于 AZW3 格式来说，可以直接用 Calibre 编辑里面的 XHTML 文件，而对于 MOBI 格式来说，可以先用 Calibre 将其转换成 EPUB 格式，再用 Calibre 或 Sigil 编辑里面的 XHTML 文件。注意编辑电子书的时候，一定要切换到源代码视图，不要用可视化视图。

                  回复

            • 把 EPUB 或 AZW3 拖放到 Calibre 书库，然后右键点击该书，在弹出的菜单中点击【编辑书籍】就可以调出编辑界面了。

              回复

  10. 感谢分享！我发现一个问题，使用calibrate中的繁简转化的插件Traditional Simplified Chinese Converter 可以将电子书转化为竖排，竖排文本在kindle点击脚注只能跳转不会弹窗，而同样的html代码在横排时点击就会底部弹窗。有无办法使得竖排时脚注也能弹窗显示呢？

    回复

    • 经测试，竖排也是可以有脚注弹窗的。如果脚注的形式是“跳转”而不是“弹窗”，可能是因为脚注的 HTML 代码有问题，建议按照本文第一部分内容检查脚注的结构是否正确。

      回复

        • 除非上标数字和脚注之间有强关联的规则可循，可以通过查找替换功能批量处理，否则没有太好的办法。

          回复

  11. 在 href 属性中不需要形如 chapter01.html 这样的文本，只需要锚点，Kindle 同样能弹出脚注，这样节省很多功夫。

    回复

  12. 额，这和html的锚点是一样的……我想多了，谢谢了，我打算开始自己修正现有的《鲁迅全集》电子书。祝我好运，坚持到底……

    回复

      • 不好意思，当时看到了邮件，事后忘了，这其实也不好说明白。你可以参考下w3cshool中对锚点的解释和例子
        http://www.w3school.com.cn/html/html_links.asp
        你也可以直接在网上搜“锚点”，也会有很多文章的

        回复