EPUB弹出窗口式脚注

参考原文：EPUB弹出窗口式脚注


网上搜到一些国学典籍的EPUB版，虽有古人的注解，但正文和注解混排在一起，当我只想迅速读正文的时候比较碍眼。于是研究了一下 EPUB3 中有关脚注（footnote）的规格定义，写了一个 Python 脚本把所有混在正文中的脚注全部改写成了弹出窗口样式，在 iBooks 里测试通过，略记一笔。

什么是EPUB弹出窗口式脚注

弹出式脚注是 EPUB3 推出的，简单的说就是正文中加一个链接锚点，对应一个脚注模块，点击链接的时候，脚注内容会直接以弹出窗口的形式显示出来。这样就省去了页面跳转这个步骤，更加方便阅读。

一图胜千言，下图是脚本处理后的《三国志》(这个还是混排版的)在 iPad 版 iBooks 下的效果。（原本是像日文电子书那样的竖排EPUB，我把 CSS 里和竖排相关的定义注释掉了）

如何实现EPUB弹出窗口式脚注

要实现这种效果，有三个注意点。

1.正文中的链接锚点。

<p>
太祖武皇帝，沛國譙人也，姓曹，諱操，字孟德，漢相國參之後。
    <a epub:type="noteref" href="#fn1">
        <sup>1</sup>
    </a>
桓帝世，曹騰為中常侍大長秋，封費亭侯。
......
</p>

2.脚注aside模块

<aside epub:type="footnote" id="fn1">〔曹瞞傳曰：太祖一名吉利，小字阿瞞。王沈魏書曰：其先出於黃帝。當高陽世，陸終之子曰安，是為曹姓。周武王克殷，存先世之後，封曹俠於邾。春秋之世，與於盟會，逮至戰國，為楚所滅。子孫分流，或家於沛。漢高祖之起，曹參以功封平陽侯，世襲爵士，絶而復紹，至今適嗣國於容城。〕
</aside>

　　 在 iBooks 下，如果 epub:type 属性的值为 footnote ，这个 aside 会默认隐藏。只有对应的链接被点击时，其内容才会在弹出窗口中显示。

3.epub 命名空间（namespace）。

上面两处都有一个共同的属性名，epub:type。一般 EPUB 文档都没有定义 epub 这个命名空间，所以满足以上两点之后直接打开会提示 epub 命名空间没有定义。EPUB 定义 namespace 有两种方式，一种是在 CSS 里定义，一种是在内容页的HTML标签里定义。我测试过，iBooks 无法识别 CSS 里定义的 　　namespace，所以我采用了另外一种方式。

<html xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:epub="http://www.idpf.org/2007/ops">

用Python脚本处理EPUB的HTML文档

了解了这些基本概念之后，再来看要处理的对象。原EPUB文档中注解夹杂在正文中，以span标签标记，所以 Python 脚本的基本流程就比较清楚了，这里使用 BeautifulSoup 来解析并更改 HTML 文档树。

  1. 循环读入所有 EPUB 内容文档并解析
  2. 给 html 标签加上 epub 命名空间定义
  3. 获取 p 标签下的 所有span标签
  4. 遍历获取的span标签，取出文本，并以此创建 aside 模块
  5. 清除span标签的内容，更改为链接锚点

原 EPUB 中的 HTML 文档节选 ：

<p>太祖武皇帝，沛國譙人也，姓曹，諱操，字孟德，漢相國參之後。
    <span class="zhushi">
〔曹瞞傳曰：太祖一名吉利，小字阿瞞。王沈魏書曰：其先出於黃帝。當高陽世，陸終之子曰安，是為曹姓。周武王克殷，存先世之後，封曹俠於邾。春秋之世，與於盟會，逮至戰國，為楚所滅。子孫分流，或家於沛。漢高祖之起，曹參以功封平陽侯，世襲爵士，絶而復紹，至今適嗣國於容城。〕
    </span>
桓帝世，曹騰為中常侍大長秋，封費亭侯。
......
</p>
时间： 2024-09-29 08:51:25

EPUB弹出窗口式脚注的相关文章

EBS OAF开发中实现参数式弹出窗口

(版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 概览 参数式弹出窗口和嵌入式弹出窗口不一样,它拥有独立的区域,并不嵌入到使用页面中,它里面的内容根据需要来获取和生成,它拥有自己的AM和页面状态,对popup页面事件的处理也不一样.两种弹出式窗口都只在下面四种组件所支持,既不能改变大小也不可移动. 1.        Text(messageStyledText) 2.        Image 3.        Link 4.     

JS弹出窗口代码大全(详细整理)

1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码代码如下: <html> <body 'http://www.jb51.net','脚本之家','channelmode');"

Android Demo---实现从底部弹出窗口

在前面的博文中,小编简单的介绍了如何制作圆角的按钮以及圆角的图片,伴着键盘和手指之间的舞步,迎来新的问题,不知道小伙伴有没有这样的经历,以App为例,点击头像的时候,会从底部弹出一个窗口,有从相册中选择.拍照.取消的字样,点击相应的按钮,完成相应的操作,在小编做项目的过程中遇到类似的问题,小编经过一番捣鼓,终于搞定了ing,今天这篇博文博文,小编简单的介绍一下,如何点击头像,实现从底部弹出窗口的故事,这个故事实现的是弹出滑动窗口,主要是使用了一些设置Activity的样式来实现弹出效果和滑动效果

Java Selenium (十二) 操作弹出窗口 &amp; 智能等待页面加载完成 &amp; 处理 Iframe 中的元素

一.操作弹出窗口   原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles(); 来获取到所有弹出浏览器的句柄, 然后遍历, 使用swithcto.window(newwindow_handle)方法. 就可以定位到新的窗口. 测试页面的HTML <html> <head> <title>常见web ui元素操作, 及API使用</title> <script type

步步为营_Android开发课[26]_用户界面之PopupWindow(弹出窗口)

Focus on technology, enjoy life!-- QQ:804212028 浏览链接:http://blog.csdn.net/y18334702058/article/details/44624305 主题:用户界面之PopupWindow(弹出窗口) - PopupWindow和AlertDialog的区别: AlertDialog是非阻塞式的:AlertDialog弹出时,后台还可以做事情. PopupWindow是阻塞式的:在PopupWindow退出前,只允许我们操

软件测试---弹出窗口

视频地址(第五课时):https://pan.baidu.com/s/1gfLVC2n  alert 弹出窗口 Alert Should Be Present Get Alert Message  confirm 弹出窗口 Choose Cancel On Next Confirmation Choose Ok On Next Confirmation Confirm Action AutoIt Libary

JS中，根据div数值判断弹出窗口

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 50px; height: 50px; margin: 20px; float: left; border: 1px solid orange; } </style>

jsp网页弹出窗口的多种办法

http://blog.csdn.net/huangfoxjava/article/details/2973033 登录|注册     huangfoxjava的专栏 目录视图 摘要视图 订阅 关于jsp网页弹出窗口[很多种方法......] 分类: JSP2008-09-24 14:22 5799人阅读 评论(0) 收藏 举报 jspjavascript框架html脚本浏览器 各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript

android弹出窗口的实现（PopupWindow）

最近看到新浪微博顶部栏的微博分组效果很炫,从网上查了一些资料明白原来是用PopupWindow实现的,今天自己也写了一个例子实现了这种效果,希望对大家有帮助. PopupWindow就是弹出窗口的意思,类似windows下面的开始按钮.PopupWindow可以实现浮层效果,而且可以自定义显示位置,出现和退出时的动画. 首先定义新浪微博的顶部栏,title_two_button.xml和main.xml [html] view plaincopyprint? <?xml version="