# 多看电子书规范扩展开放计划
## 前言
最近制作epub , 在 ibooks 中测试良好，后来听说需要用多看测试，网上也很多人说多看阅读体验好之类的，把电子书在多看打开…… 嚯，乱七八糟。 难以理解为何互联网时代epub的解析有这么大差别，回想epub3 已经是**2011年发布**的了。
据说多看为了优化电子书阅读体验，做了扩展计划，加入了专有属性，搞笑的是，就连多看官方都没有了对应的文章，显示违法已删除之类的，可能没当回事，后续也不维护了吧。 代码和支持估计还是在的，只有民间流传的版本，各种阅读体验和完整性也够呛，整理出来备用。
至于多看的各种不兼容和处理方法后续文章记录。
## 第一弹
### 一、全屏插图页
全屏插图页扩展在ePub文件的`opf`文件中的`spine`节点下，`spine`节点定义了ePub文件中文章出现的顺序，每一个`itemref`项为一章，我们扩展一个`properties`属性值`duokan-page-fullscreen`，示例如下：
```html
……
```
这样id为`“chapter100” `的章就会按全屏插图页逻辑处理，而相应的html内容应如下所示：
```xml
```
注意，html中应只含有一个img，不需要设置任何样式，程序会自动将图片撑满展示。
### 二、富文本脚注
用户可以通过单击文内脚注的图标，弹出显示脚注内容的窗口。文内注可以支持复杂的内容描述，比如多段落，带有样式的文本等等，具体描述如下：
在需要插入注的位置插入如下代码：
```html
```
在文章的末尾插入如下代码：
```html
```
注和内容之间使用id链接，通过这样的扩展方式，可以将整个章节的所有文内注内容集中在一个有序列表中，这部分内容不会直接在页面上渲染出来，而是通过应用层的交互来呈现。
### 三、交互图
对于交互图，应用层会响应点击放大操作，提供额外的交互体验，具体扩展如下所示：
```html
主标题：大自然
副标题：森林中的树
```
为了保证点击放大之后的图像呈现效果，采用交互模式的图像数据应该保证足够的分辨率。
注意：
1. 主标题和副标题可以不出现；
2. 主标题和副标题可以在img之前出现；
3. 交互图不可以嵌套出现。
----
## 20130930 更新第二弹
### 四、多看字体使用
多看官方客户端可用字体列表：
CSS写法
效果
`font-family: "DK-SONGTI";`
使用多看系统自带宋体。
`font-family: "DK-FANGSONG";`
使用多看系统自带仿宋。
`font-family: "DK-KAITI";`
使用多看系统自带楷体。
`font-family: "DK-HEITI";`
使用多看系统自带黑体。
`font-family: "DK-XIAOBIAOSONG";`
使用多看系统自带小标宋。
`font-family: "DK-XIHEITI";`
使用多看系统自带细黑体。
`font-family: "DK-SERIF";`
使用多看系统自带衬线西文字体。
`font-family: "DK-CODE";`
使用多看系统自带等宽西文字体。
`font-family: "DK-SYMBOL";`
使用多看系统自带符号字体（不常见符号，如音标等）。
示例：
首先在CSS文件中增加下面的样式
```css
p.usekaiti {
font-family: "DK-KAITI";
}
```
然后在xhtml文件中使用
```html
这段文字使用楷体显示
```
这样就ok了。
---
toc: true
comments: false
draft: false
## 20140307 更新第三弹
### 五、多媒体（音频、视频）
由于移动设备的一些特性，html中标准的音频、视频的排版特点并不完全满足我们的需求，因此，需要进行一些“小小”的扩展，才能得到比较完美的展示效果。
音频
在HTML 5规范中，音频采用标准的audio标签，但需要扩展说明其占位图像，示例如下：
```html
```
`duokan-audio`为扩展标签，表明了该`audio`标签为多看扩展类型，`placeholder`用于表示占位图，`activestate`表示活动状态下的占位图，`title`表示标题名。
一般情况下可以指定`audio`采用的CSS样式，在绘制占位图时需要遵循该样式，示例代码如下：
```css
audio.content-speaker {
font-size: 16px;
width: 0.8em;
}
```
`audio`的`controls`属性出现时，表明应用层需要显示控制栏，如果不出现，则无需显示控制栏。
视频
在HTML 5规范中，视频采用标准的video标签，示例如下：
```html
```
`duokan-video`为扩展标签，表明了该video标签为多看扩展类型。
一般情况下可以指定`video`采用的CSS样式，在绘制`poster`时需要遵循该样式，示例代码如下：
```html
video.content-matrix {
width: 320px;
height: 240px;
}
```
`video`的`controls`属性禁止出现。
---
toc: true
comments: false
draft: false
## 20140819 更新第四弹
### 六、画廊模式
画廊模式可以支持在同一个位置显示多张大小一致的图像，用户可以通过滑动等手势切换不同的图像内容。
如下，即为一个拥有三帧画面的画廊（每一个`duokan-image-gallery-cell`声明一个分帧）：
```html
主标题：大自然
副标题：柏树
主标题：大自然
副标题：柳树
主标题：大自然
副标题：杨树
```
注意：
1. 各分帧图片最好保持同样大小；
2. 最好各分帧都存在主标题和副标题；
3. 画廊整体样式应该放在`duokan-image-gallery`所在的`div`上；
---
toc: true
comments: false
draft: false
首次制作多看版图书时，不注意就会发生的悲剧：
1. 图像路径大小写不匹配，导致图像各种不出现，请注意epub规范大小写敏感哦；
2. 富文本注内容使用ul标签，导致注点击无反应，更甚可能死机哦，请注意注内容应该放置在ol标签内；
3. 应该使用半角符号；
4. 一定要注意红色部分属性和内容哦； (已使用 code 替代)