Epub中的弹注

技术交流与词典编修
1

请教对epub弹注有研究的大神，能否在epub正文中完全隐藏那些注解，而使它们仅仅出现在点击弹窗里面？

有些带注释古籍里面的注解虽然可以弹窗，但是还是出现在正文中，总要跳过去也很麻烦。

谢谢！

3

谢谢。以前在 html 中做过把注释藏在超链接的悬停提示里面，可惜 epub 中好像没法显示出来

4

不死心，刚去网上搜到这个，静读天下测试发现居然管用

这里写的更清楚 EPUB弹出窗口式脚注 - DiggLife

具体做法：

  1. 修改 html 文件头

原始：

<html xmlns="http://www.w3.org/1999/xhtml">

修改后：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  1. 在引文段落加上外套和新的tag

原始：

<div id="footnotes">
...
</div>

修改后：

<aside epub:type="footnote">
<div epub:type="footnote" id="footnotes">
...
</div>
</aside>
  1. 原帖中还说要，不明白加在哪里，没有做，但是测试发现也成功了

Put this on the a tag:

 epub:type="noteref"
5

多看上有這種效果android/ ios
kybook3也支持 ios

ePub 3标准的footnote写法如下：

> 1. <a epub:type="noteref" href="#footnote_1">注1</a>
> 2. <a epub:type="noteref" href="#footnote_2">注2</a>
> 3. <a epub:type="noteref" href="#footnote_3">注3</a>

上面是插入到文中的注释序号，epub:type="noteref"来触发弹注。

1. <section epub:type="footnotes">
2. <aside epub:type="footnote" id="footnote_1"><p>这是注释内容
1。</p></aside>
3. <aside epub:type="footnote" id="footnote_2"><p>这是注释内容
2。</p></aside>
4. <aside epub:type="footnote" id="footnote_3"><p>这是注释内容
3。</p></aside>
5. </section>

这是插入到标签前的注释内容，epub:type="footnote"表示脚注的
文字。文件头更改：

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

只有ePub 3标准才可以使用epub:type规则，ePub 2的电子书需要在
标签的命名空间添加xmlns:epub=“OPS Namespace”，才可以让
注释弹注。

1 个赞
6

专业 :+1:

7

@默语者 请教个问题，在弹窗中似乎会忽略注释内容的的所有格式而只显示其文本，至少在静读天下中是这样，不知道是我没测试好、还是epub就是这么规定的、还是阅读app的功能所限？谢谢！

8

静读倒没怎么研究过，多看有自家解析的代码，kindle和ibooks都执行epub标准，目前手机上对epub解析比较好的
android上多看阅读，KOerader
ios上kybook3，国区目前已下架，以前下的还在，ibooks自带的用的比较少，支持epub2.0/3.0标准，还有多看，目前看书看的pdf，djvu格式电子书比较多，kybook3和KOreader是主力。epub类型看小说不错。看学术类型的就错误比较多，缺字错字一大堆，目前来看没有好的选择，校对制作太花精力得不偿失。

9

20190327《ePub指南——从入门到放弃》编著：赤霓（第2版）.epub
https://www.aliyundrive.com/s/Fr1oWBL19Qz
想了解epub方面看看赤霓写的ePub指南

2 个赞
10

有时有点奇怪，静读天下在google市场epub阅读器似乎是排第一的吧，但是很多人都不用。当然，精度天下处理epub有时是按照自己的方式乱来，好在我本身常常也是选择忽略epub本身的css样式，所以也无所谓，主要是静读的设置实在多用过就不能没有，还有TTS。多看是不错，可是卖书的空间不断扩大。学术类型的看epub肯定不行，一塌糊涂。

这本ePub指南太好了，我得仔细看看，谢谢分享！

刚搜到这书的新版本链接 《ePub指南——从入门到放弃》编著：赤霓（第2版） - 知乎 居然错过了这么重要的书，真不应该。感谢 @默语者 ！

11

如果是要在网页中显示弹注，上面只适用ePub阅读器的做法就不行了。

这个网页的弹注在浏览器中也能使用

不知道如何改进前面的弹注方法、以兼顾浏览器和ePub阅读器？

12

问了ChatGPT，最后采用如下HTML+CSS方案：

HTML:

<span class="tipnote"><span class="zhushi">註</span><span class="tipntext" epub:type="noteref">（兆民：众多人民。兆，旧言万亿为兆，极言众多。）</span></span>

CSS:

.tipnote {
    position: relative;
    border-bottom: 1px dotted black;
}

.tipnote .tipntext {
    visibility: hidden;

  /* Position the tipnote */
    position: absolute;
    z-index: 1;
}

.tipnote:hover .tipntext {
    visibility: visible;
    font-family: STKai, "MKai PRC", Kai,"楷体"; 
    font-size: 0.9em;
    white-space: nowrap;
    background-color:#629fd1;
    color: white;
    display: inline-block;
    text-indent: 0;
}

.zhushi {
    vertical-align: super;
    font-size: 0.7em;
    font-weight: bold;
    background-color: #fff;
    color: red;
    border-radius: 6px;
}