多看电子书规范扩展开放计划
背景介绍
博客有一个月没有更新了，今天更新一篇，不过也是与技术无关的内容，转载一份《多看电子书规范扩展开放计划》，多看是我非常喜欢的一款电子书阅读 APP，主要是电子书制作比较精美，而且还有一套开放的电子书制作标准，供广大书友参照，很多电子书的爱好者也参考这个标准制作了很多不错的电子书，最近在多看阅读的官网论坛上已经搜索不到这份开放的标准了，我也是在网上的二手渠道才找到的，所以记录到自己的博客上，方便自己以后查看。
多看电子书规范扩展开放计划（20140819第四弹）
一、全屏插图页
全屏插图页扩展在 ePub 文件的 opf 文件中的 spine 节点下，spine 节点定义了 ePub 文件中文章出现的顺序，每一个 itemref 项为一章，我们扩展一个 properties 属性值 duokan-page-fullscreen，示例如下：
1 | <spine> |
这样 id 为 chapter100 的章就会按全屏插图页逻辑处理，而相应的 html 内容应如下所示：
1 |
|
注意，html 中应只含有一个 img，不需要设置任何样式，程序会自动将图片撑满展示。
二、富文本脚注
用户可以通过单击文内脚注的图标，弹出显示脚注内容的窗口。文内注可以支持复杂的内容描述，比如多段落，带有样式的文本等等，具体描述如下：
在需要插入注的位置插入如下代码：
1 | <a class="duokan-footnote"href="#df-1"><img src=" ../Images/note.png"/></a> |
在文章的末尾插入如下代码：
1 | <ol class="duokan-footnote-content"> |
注和内容之间使用 id 链接，通过这样的扩展方式，可以将整个章节的所有文内注内容集中在一个有序列表中，这部分内容不会直接在页面上渲染出来，而是通过应用层的交互来呈现。
三、交互图
对于交互图，应用层会响应点击放大操作，提供额外的交互体验，具体扩展如下所示：
1 | <div class="duokan-image-single"> |
为了保证点击放大之后的图像呈现效果，采用交互模式的图像数据应该保证足够的分辨率。
注意：
- 主标题和副标题可以不出现；
- 主标题和副标题可以在
img之前出现； - 交互图不可以嵌套出现。
//========================朴素的分割线========================
// 20130930 更新第二弹
四、多看字体使用
多看官方客户端可用字体列表：
CSS写法：
1 | 效果 |
示例：
首先在CSS文件中增加下面的样式
1 | p.usekaiti { |
然后在xhtml文件中使用
1 | <p class="usekaiti">这段文字使用楷体显示</p> |
这样就 ok 了。
// ========================朴素的分割线========================
// 20140307 更新第三弹
五、多媒体（音频、视频）
由于移动设备的一些特性，html 中标准的音频、视频的排版特点并不完全满足我们的需求，因此，需要进行一些“小小”的扩展，才能得到比较完美的展示效果。
音频
在 HTML 5 规范中，音频采用标准的 audio 标签，但需要扩展说明其占位图像，示例如下：
1 | <audio class="duokan-audio content-speaker" placeholder="speaker.jpg" activestate="active-speaker.jpg" title="军港之夜"> |
duokan-audio 为扩展标签，表明了该 audio 标签为多看扩展类型，placeholder 用于表示占位图，activestate 表示活动状态下的占位图，title 表示标题名。
一般情况下可以指定 audio 采用的 CSS 样式，在绘制占位图时需要遵循该样式，示例代码如下：
1 | audio.content-speaker { |
audio 的 controls 属性出现时，表明应用层需要显示控制栏，如果不出现，则无需显示控制栏。
视频
在 HTML 5 规范中，视频采用标准的 video 标签，示例如下：
1 | <video class="duokan-video content-matrix" poster="matrix.jpg"> |
duokan-video 为扩展标签，表明了该 video 标签为多看扩展类型。
一般情况下可以指定 video 采用的 CSS 样式，在绘制 poster 时需要遵循该样式，示例代码如下：
1 | video.content-matrix { |
video 的 controls 属性禁止出现。
//========================朴素的分割线========================
// 20140819 更新第四弹
六、画廊模式
画廊模式可以支持在同一个位置显示多张大小一致的图像，用户可以通过滑动等手势切换不同的图像内容。
如下，即为一个拥有三帧画面的画廊（每一个 duokan-image-gallery-cell 声明一个分帧）：
1 | <div class="duokan-image-gallery"> |
注意：
- 各分帧图片最好保持同样大小；
- 最好各分帧都存在主标题和副标题；
- 画廊整体样式应该放在
duokan-image-gallery所在的div上。
//========================朴素的分割线========================
注意事项
首次制作多看版图书时，不注意就会发生的悲剧：
- 图像路径大小写不匹配，导致图像各种不出现，请注意
ePub规范大小写敏感； - 富文本注内容使用
ul标签，导致注点击无反应，更甚可能死机哦，请注意注内容应该放置在ol标签内； - 应该使用半角符号；
- 一定要注意红色部分属性和内容。