说明
这篇文章简单的介绍一下多看专用电子书的制作技巧，包括已经公开的技巧和未公开的技巧。
通用排版
多看常用电子书的排版如下流程图所示：
流程图
这样做的好处是：
- 兼容性高，在iBooks或者其它电子书软件中也不会排版失真（只是全屏标题页可能无法全屏幕显示而已）；
- 图片标题可以很自由的设计，不需要考虑什么CSS语法；
- 因为图片是专门的一页，没有文本与其同时显示，所以夜间模式也不会显得图片和文本反色不协调。
缺点也还是有的： - 每一章节都需要两张标题图片（后面讲原因），大幅增加了epub的体积；
- 如果标题图片中的文本有错字之类，后期需要花很多功夫改图片；
- 图片中的错字用户无法纠错。
但是总的来说，这是一套最经济的排版方案。
多看中图片的处理
全屏插图页
在epub的opf元数据文件中，找到spine节点，在其下面的itemref代码中加入properties="duokan-page-fullscreen"即可。代码形式如下：
<spine>
<itemref idref="coverpage" properties="duokan-page-fullscreen">
……
</spine>
一般封面页需要加全屏，全屏插图页也需要加全屏。在对应的页面中只需要存在一张图片文件即可，不需要写文本，写了也不会显示出来。
对于不同的屏幕尺寸，多看只针对4:3和16:9两种宽高比做了适配。具体方式是：
需要全屏显示的图片为a.jpg，宽高比为4:3，则再做一张16:9的图片命名为a~slim.jpg放进epub（与a.jpg同一位置），在页面中只需加载a.jpg即可。多看会根据屏幕尺寸自动显示不同宽高比的图片。
- 对于3:2（iPad横置时）或16:10的屏幕尺寸，多看会相应裁剪这些图片，所以图片不要在边缘上留关键信息。
- 假如不按照上述方法处理，例如16:9的图片命名为a.jpg而4:3的图片命名为a~slim.jpg，多看会裁剪图片或上下留黑边。
- 多看的书架显示书的封面均按照4:3显示，如果只有16:9的封面，多看会把图片压扁显示（iOS版可能会按原始宽高比显示书架封面）
上下居中图
这个属性在多看漫画书中用的比较多，当然你也可以用到普通的书里面。语法如下：
<spine>
<itemref idref="chapter01.xhtml" properties="duokan-page-fitwindow">
……
</spine>
同样，对应的html文件只需要一张图片即可，不需要别的文字或者代码，就算写了多看也不会显示出来，而只会将图片上下居中显示。
延伸式全屏图
注意，这个属性是多看4.4以上才有的，最开始是用于s.这本书中，显示的效果是全屏显示一半的报纸，点击按钮之后进入交互的全屏显示，可以放大和旋转。如果是多看的低版本，这个属性无效。
语法如下：
<spine>
<itemref idref="coverpage" properties="duokan-page-fullscreen-spread-left">
……
</spine>
这个代码会全屏显示图片的左半部分，当然你把left改成right也可以，就会显示图片的右半部分。只有这两个属性是有效的。
注意图片只能选择长宽比较大的（横躺的图片），最好是长度的一半正好能显示一个完整的图。
交互图
交互图主要实现用户点击图像后，图像自动全屏显示，在全屏显示时图像可以两指放大和旋转。
实现方法只需要加上duokan-image-single这个类即可。当然在CSS里也可以针对此类自定义样式。
<div class="duokan-image-single">
<img src="../Images/pic.png" alt="" />
<p class="duokan-image-maintitle">主标题</p>
<p class="duokan-image-subtitle">副标题</p>
</div>
这里需要注意以下几点：
- 在应用了交互类的div里面，可以使用多个图片（多看2.x中多图片只能每行显示一张，3.x以上就可以并列显示了），每张图都可以交互，但是如果div中有主副标题的话，只有最后一张图放大后会显示主副标题；
- 图片交互后，会在底部固定显示主副标题，但是不同系统中的实现方式不同。android中，不管主副标题有多少字，交互后都会显示出来（除非标题内容多得超过整个屏幕），而iOS中，主副标题在交互后只能显示两行。所以在做画册之类标题的文本内容极多的电子书时，需要注意这一点。
- 交互图片可以与其它样式混用，如居中显示和设置图片尺寸。
- 如果图片宽高比为portrait（宽比高要窄甚至窄很多），高度超过了屏幕高度时，多看会将图片高度缩小到屏幕高度，但主副标题可能无法显示出来——但如果超出太多，多看就完全不显示这张图了。所以这种情况下需要定义图片高度。
画廊
画廊主要实现在同一位置显示多张图片，通过滑动可以切换图片，节省了epub的排版空间。另外画廊模式的每张图片也可以交互。
实现方法稍微复杂一点，如下：
<div class="duokan-image-gallery">
<div class="duokan-image-gallery-cell">
<img src="images/pic1.png"alt="" />
<p class="duokan-image-maintitle">主标题1</p>
<p class="duokan-image-subtitle">副标题1</p>
</div>
<div class="duokan-image-gallery-cell">
<imgsrc="images/pic2.png" alt="" />
<p class="duokan-image-maintitle">主标题2</p>
<p class="duokan-image-subtitle">副标题2</p>
</div>
<div class="duokan-image-gallery-cell">
<imgsrc="images/pic3.png" alt="" />
<p class="duokan-image-maintitle">主标题3</p>
<p class="duokan-image-subtitle">副标题3</p>
</div>
</div>
注意事项：
- 画廊的大小取决于其内部所有图片中宽高比最小的那个。简单的说，图片尺寸不一样但宽高比一样的话，画廊都可以很完整的显示，但如果有某个图片的宽高比值和其它图片差很多，画廊就会调整大小，使得所有图片都能以cover方式显示（换言之画廊内部不允许出现黑边， 但允许裁剪图片外部）所以画廊的图片最好尺寸一致，如果不一致的话，未交互时切换图片可能会发生图片的裁切，但交互后图片都会完整显示。
- 画廊的居中显示必须对gallery和cell两级属性都设置居中才会有居中效果。
- 同交互图一样，如果画廊高度超过屏幕高度，也会导致标题不显示。
图片尺寸定义
如果不设置图片尺寸，当图片尺寸超过了屏幕的尺寸，多看会将图片自动缩小到屏幕的宽度或高度；图片尺寸小于屏幕的时候则按原图显示。
多看的图片尺寸定义与CSS规范有点区别，主要体现在百分比上面。由于目前移动设备都是视网膜屏幕，我们在pc显示器上所谓的1像素可能在手机上意味着4像素（2x2），不同的电子书软件对此的解释也不一样，所以设定图片尺寸最好用相对尺寸em或者百分比。
多看中，图片宽度的百分比是相对于屏幕的（CSS规范中百分比相对于图片本身的宽度），如果宽度为100%，则图片宽度撑满整个屏幕宽度（不包括出血格），50%则占屏幕一半宽度。所以图片的分辨率要比较高，如果分辨率本身就很低，设置宽度100%就会满屏幕的马赛克。
由于epub是一种流式排版，只有左右顶部是确定位置的，所以多看对于图片的高度百分比CSS规范一样，只是图片自身高度的百分比。
通常制作电子书时只需要设定宽度或高度的一个属性就可以了，否则图像容易失真。
多看的私有语法
行内注释
多看的弹出式注释有两种实现方式。
第一种：
<a class="duokan-footnote" href="#footnote1"><img src=" ../Images/note.png"/></a>
在页面末尾或者专门的注释页写：
<ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="footnote1"><p>注释内容。</p></li>
</ol>
这种方法的好处：
- 兼容别的电子书软件；
- 注释文本复杂的时候可以分行，使用样式甚至插入图片。
第二种：
<a class="duokan-footnote" href="#footnote1" alt="注释内容。"><img src=" ../Images/note.png"/></a>
这种方法不兼容别的电子书软件，也不能使用样式。但好处是校对比较方便。
总的来说还是推荐使用第一种方法。
调用内置字体
| 名称 | 对应字体 |
|---|---|
| "DK-SONGTI" | 宋体 |
| "DK-FANGSONG" | 仿宋 |
| "DK-KAITI" | 楷体 |
| "DK-HEITI" | 黑体 |
| "DK-XIAOBIAOSONG" | 小标宋 |
| "DK-XIHEITI" | 细黑体 |
| "DK-SERIF" | 衬线西文字体 |
| "DK-CODE" | 等宽西文字体 |
| "DK-SYMBOL" | 符号字体（不常见符号，如音标等） |
多看字体包包括兰亭黑、细黑、宋体、小标宋、仿宋、楷体、衬线/非衬线英文字体和符号字体，CSS中的fontfamily写相应的代码即可。
| 名称 | 对应字体 |
|---|---|
| "DK-SONGTI" | 宋体 |
| "DK-FANGSONG" | 仿宋 |
| "DK-KAITI" | 楷体 |
| "DK-HEITI" | 黑体 |
| "DK-XIAOBIAOSONG" | 小标宋 |
| "DK-XIHEITI" | 细黑体 |
| "DK-SERIF" | 衬线西文字体 |
| "DK-CODE" | 等宽西文字体 |
| "DK-SYMBOL" | 符号字体（不常见符号，如音标等） |
另外多看也支持epub内置字体，只需在fontface中定义即可。
音频和视频
多看的音频和视频支持应该是私有的实现，不是epub3规范的语法。
<audio class="duokan-audio content-music" placeholder="music.jpg" activestate="active-music.jpg" title="音乐">
<source src="song.mp3" type="audio/mpeg" />
</audio>
music.jpg是个占位符，点击这个图片之后就会弹出音乐播放控件。也可以指定占位图的样式，可以指定controls属性：
audio.content-music{
font-size: 10px;
width: 0.8em;
}
音乐只支持mp3格式。
视频的语法差不多：
<video class="duokan-video content-movie" poster="movie.jpg">
<source src="movie.mp4" type="video/mp4" />
</video>
视频只支持mp4格式。，指定样式也差不多，但不能指定controls属性：
video.content-movie {
width: 320px;
height: 240px;
}
对象出血格贴边
这是多看内部的一个语法，之前已经讲过了，主要作用就是出血格贴边，语法是：
.head {
duokan-bleed: (top|left|right|bottom|lefttop|topright|lefttopright|leftright);
}
需要注意的是多看的这个语法并不是无条件“贴边”，而是在图片的边贴到出血格位置的前提下才会进行相应的贴边。例如，图片的尺寸非常小，达不到屏幕宽度，由于图片默认左边和顶边都是贴近出血格位置的，则默认top和left属性都会起效；但图片只有设置了靠右对齐时。right属性才会起效；bottom实际上只是贴近下一个段落的顶边，并不是贴近屏幕的底边（因为没有办法让前端元素贴近屏幕底边）；类似的，leftright属性就需要左右边都要贴近出血格才会起效。
- 如果图片本身尺寸很大而不设置100%的宽度，当缩小字号的时候，图片也会跟着缩小，缩小到宽度不足屏幕宽度的时候，就会导致贴边失效。如果设置了100%的宽度，不管字号是多大，图片都会固定贴边，不会影响排版效果。
- 贴边只针对正文元素，如图片或文字都是可以贴边的，但不会处理文字的padding等属性。所以贴边主要还是用于图片，文字贴边只能用于特定的排版设计。
网友评论