实现 kindle 原生系统、多看系弹出注释的通用写法
入手 Kindle 后开始自己做 ePub,之前一直用原生系统,使用的弹出注释代码如下:
<p class="P_Footnote" id="ref_footnotebookmark_end_9_1"><span style=" font-size: 0.75em; vertical-align: super;"><a href="#ref_footnotebookmark_start_9_1">①</a></span>注释的内容</p>
逐渐由于制作 ePub 的需要,我开始使用多看系统,这时候原生系统弹出注释代码失效,这样就造成极大的不便——我必须制作两个不同的 ePub 来适应系统切换。多看弹出注释代码如下:
<ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="a_1_1"><a href="#c_1_1">这里是注释</li>
</ol>
于是我开始寻求一种方法,使得弹窗注释能支持原生和多看。上面的两处代码中可以发现,原生系统的弹窗注释基于标签<p>,而多看系统的弹窗注释依赖于<ol>,于是我有一个思路,如果将两个标签嵌套使用,是否就能实现双系统的弹窗呢?
一开始我将<p>嵌套在<li>中,将<p>嵌套在<a>中,代码如下:
<ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="a_1_1">
<p><a href="#c_1_1">这里是注释</a></p>
</li>
</ol>
<!--<p>嵌套在<li>-->
<ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="a_1_1">
<a href="#c_1_1"><p>这里是注释</p></a>
</li>
</ol>
<!--<p>嵌套在<a>-->
然而这两种方法在实际测试中都失效。不过在论坛坛友的指点下,找到了这么一种方法,代码如下:
<ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_1">
<p class="f"><a href="#ref_footnotebookmark_start_1_1">这里是注释</a></p>
</li>
</ol>
P.S. ""这个字串是 Zero-width space ( 零宽度非换行空格 )
P.S.想要批量修改可以使用通配符,如下:
Search:<li class="duokan-footnote-item" id="(.*?)"><a href="#(.*?)">(.*?)</li>
Replace:<li class="duokan-footnote-item" id="\1"><p class="f"><a href="#\2">\3</a></p>
实现 kindle 原生系统、多看系弹出注释的通用写法的更多相关文章
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- PHPCMS系统使用的弹出窗口插件artDialog
来源: http://aui.github.io/artDialog/doc/index.html (官方) http://lab.seaning.com/ http://www.mb5u.com/ ...
- (三)原生JS实现 - 插件 - 弹出层
创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...
- html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果
模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- wpf Popup Win8.0 bug HorizontalOffset 弹出位置偏移
问题描述参考 wpf 客户端[JDAgent桌面助手]开发详解(四) popup控件的win8.0的bug 当开发完程序后,我们在多操作系统测试时候发现:win8.0 系统中 popup 弹出的位置 ...
- 禁用 WebView 放大镜及拷贝粘贴弹出框
文/KyXu(简书作者)原文链接:http://www.jianshu.com/p/40048d9c979a著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 背景:当你的App中有 We ...
- html点击按钮 弹出 多选择窗口级联下拉复选
参考代码 代码示例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前
原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...
随机推荐
- android 二维码生成+扫描
android 二维码生成+扫描 1.在Android应用当中,很多时候都要用到二维码扫描,来避免让用户手动输入的麻烦. Google官方自己推出了一个二维码开源项目:ZXing库. 2.这里简单介绍 ...
- 无责任Windows Azure SDK .NET开发入门篇二[使用Azure AD 进行身份验证]
二.使用Azure AD进行身份验证 之所以将Azure AD 作为开始,是应为基本上我们所有应用都需要进行安全管理.Azure Active Directory (Azure AD) 通过以下方式简 ...
- Javascript模块规范(CommonJS规范&&AMD规范)
Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法 查看 AMD规 ...
- Web网站压力测试工具
使用Microsoft Web Application Stress Tool对web进行压力测试 不错关于压力测试博客: http://blog.sina.com.cn/s/blog_5155e8d ...
- Trapping Messages Sent to an Application
http://www.delphicorner.f9.co.uk/articles/apps7.htm Trapping Messages Sent to an Application I wrote ...
- 测试HAPROXY的文件分流办法
测试HAPROXY的文件分流办法 http://blog.chinaunix.net/uid-20553497-id-3054980.html http://blog.sina.com.cn/s/bl ...
- MySQL数据库能够用随意ip连接訪问的方法
通过CMD命令行改动数据库表的一个字段的值.实现连接,訪问. 第一步.找到MYSQL软件安装所在的bin文件夹. (1)cd\当前文件夹 (2)指定MYSQL安装的bin文件夹 (3)输入 -h lo ...
- 如何在 iOS 8 中使用 Swift 实现本地通知(上)
当你的应用在后台运行时,可以简单地使用本地通知把信息呈现给用户.它可以允许你显示 提醒.播放提示音和数字角标(badge).本地通知可以被以下的事件触发:计划好的时间点或者用户进入和离开某个地理区域. ...
- 好记心不如烂笔头之JQuery学习,第四章
---恢复内容开始--- JQuery中的事件和动画 JQuery中的事件: $(document).ready()该事件和JS中的window.load类似,但是window.load中需要等待所有 ...
- 异常处理之namespace找不到
最近在做控件的时候遇到了这么一个异常 就是说类库中明明就有命名空间,但是在winForm中引用的时候也能正常显示, 可是编译的时候却报 找不到指定的命名空间 这样的异常,头痛了好久,结果看到了winF ...