多看电子书制作技巧

说明

这篇文章简单的介绍一下多看专用电子书的制作技巧,包括已经公开的技巧和未公开的技巧。

通用排版

多看常用电子书的排版如下流程图所示:


流程图

这样做的好处是:

  1. 兼容性高,在iBooks或者其它电子书软件中也不会排版失真(只是全屏标题页可能无法全屏幕显示而已);
  2. 图片标题可以很自由的设计,不需要考虑什么CSS语法;
  3. 因为图片是专门的一页,没有文本与其同时显示,所以夜间模式也不会显得图片和文本反色不协调。
    缺点也还是有的:
  4. 每一章节都需要两张标题图片(后面讲原因),大幅增加了epub的体积;
  5. 如果标题图片中的文本有错字之类,后期需要花很多功夫改图片;
  6. 图片中的错字用户无法纠错。
    但是总的来说,这是一套最经济的排版方案。

多看中图片的处理

全屏插图页

在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即可。多看会根据屏幕尺寸自动显示不同宽高比的图片。

  1. 对于3:2(iPad横置时)或16:10的屏幕尺寸,多看会相应裁剪这些图片,所以图片不要在边缘上留关键信息。
  2. 假如不按照上述方法处理,例如16:9的图片命名为a.jpg而4:3的图片命名为a~slim.jpg,多看会裁剪图片或上下留黑边。
  3. 多看的书架显示书的封面均按照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>

这里需要注意以下几点:

  1. 在应用了交互类的div里面,可以使用多个图片(多看2.x中多图片只能每行显示一张,3.x以上就可以并列显示了),每张图都可以交互,但是如果div中有主副标题的话,只有最后一张图放大后会显示主副标题;
  2. 图片交互后,会在底部固定显示主副标题,但是不同系统中的实现方式不同。android中,不管主副标题有多少字,交互后都会显示出来(除非标题内容多得超过整个屏幕),而iOS中,主副标题在交互后只能显示两行。所以在做画册之类标题的文本内容极多的电子书时,需要注意这一点。
  3. 交互图片可以与其它样式混用,如居中显示和设置图片尺寸。
  4. 如果图片宽高比为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>

注意事项:

  1. 画廊的大小取决于其内部所有图片中宽高比最小的那个。简单的说,图片尺寸不一样但宽高比一样的话,画廊都可以很完整的显示,但如果有某个图片的宽高比值和其它图片差很多,画廊就会调整大小,使得所有图片都能以cover方式显示(换言之画廊内部不允许出现黑边, 但允许裁剪图片外部)所以画廊的图片最好尺寸一致,如果不一致的话,未交互时切换图片可能会发生图片的裁切,但交互后图片都会完整显示。
  2. 画廊的居中显示必须对gallery和cell两级属性都设置居中才会有居中效果。
  3. 同交互图一样,如果画廊高度超过屏幕高度,也会导致标题不显示。

图片尺寸定义

如果不设置图片尺寸,当图片尺寸超过了屏幕的尺寸,多看会将图片自动缩小到屏幕的宽度或高度;图片尺寸小于屏幕的时候则按原图显示。
多看的图片尺寸定义与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>

这种方法的好处:

  1. 兼容别的电子书软件;
  2. 注释文本复杂的时候可以分行,使用样式甚至插入图片。

第二种:

<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属性就需要左右边都要贴近出血格才会起效。

  1. 如果图片本身尺寸很大而不设置100%的宽度,当缩小字号的时候,图片也会跟着缩小,缩小到宽度不足屏幕宽度的时候,就会导致贴边失效。如果设置了100%的宽度,不管字号是多大,图片都会固定贴边,不会影响排版效果。
  2. 贴边只针对正文元素,如图片或文字都是可以贴边的,但不会处理文字的padding等属性。所以贴边主要还是用于图片,文字贴边只能用于特定的排版设计。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,551评论 4 58
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 故乡这个东西,在你第一次离开它的时候就不存在了。换句话说,它已经死了。你每回忆一次它的音容笑貌,都是在祭奠它的死亡...
    林夕格阅读 196评论 0 0
  • 最近天气转冷,医院来了不少被“捂坏”的就诊宝宝。一天早上,张女士抱着宝宝办理住院手续,小宝身上裹着包被,穿着厚厚的...
    李子_d1b6阅读 991评论 0 3
  • 我在上海自然博物馆,酒店组织的实习生活动,逛了一圈发现和别人走散了,现在一个人坐在休息的椅子上看着人家到处拍照。...
    寂静里安然阅读 164评论 0 0