前言

多看阅读向来以排版精美著称,即使第三方制作的Epub图书,也能提供良好的阅读体验。然而,随着版本的升级,个别“负优化”也随之出现,比如通过AZW3转制的Epub,在旧版多看上,可以不经设置即呈现多字体,甚至个别版本,可以指定正文字体的同时,保持引文楷体。可惜,在新版的多看上,全文只能统一字体了,为了更好的阅读体验,只能对Epub文件按照多看的精排代码,进行改造。

本来多看的官方论坛上,有《多看电子书规范扩展开放计划》系列指南,然而随着MIUI论坛关闭,转向小米社区,多看的指南原帖也烟销云散了。

为了系统梳理一下多看精排书的制作流程,参照保存的《开放系列》帖子,以及“阁内看书”公众号的部分技术文章,形成此文。

本文主要梳理改造现成Epub文件,从零开始做也可以参考。

制作工具

主要使用Sigil工具,原本非常期待多看的Dobby工具,但放出测试版后,虽然确有过人之处,但多年没有后文,估计计划已变,不好期待了。

一、指定字体

引用“阁内看书”大佬的研究如下:

但是对于epub来说,自制书会尽量要求大家使用排版为“无”。因为选了这一项,多看才会根据自制书定义的段落边距来显示正文,不至于让不同读者的排版差太多。

多看对于书城的epub都定义为“图书”,这个epub必须在content.opf中声明多看的信息(有两个关于uuid的地方通常是显示为Book-Id,但多看书城的书会声明为duokan-book-id),epub对多看的声明与否,在多看中的效果是很明显的:

  1. 多看书架上的默认封面不一样(如果epub没有封面的话)
  2. css的一些表现不一样(具体找个时间专门说)
  3. 未声明的书,更换字体时会整体全部换成指定字体(包括标题、引文等)
  4. 声明了的书,更换字体时只会把正文换成指定字体,用户体验会好很多。

不过要实现最后一项,epub不光是要声明duokan-book-id,还需要定义一个元数据,叫做duokan-body-font,如果同时定义了这两个地方,多看就可以只换正文字体。

如果只定义了duokan-book-id,没有定义duokan-body-font,那么多看整体都不能更换字体,我简称为“锁字体”。

所以,将原文件用Sigil打开后,首先找到content.opf文件,将package中的unique-identifier和metadata的id两处,均声明为duokan-book-id

unique-identifier="duokan-book-id"

id="duokan-book-id"

然后,在metadata部分定义duokan-body-font,如果原文件没有相关字段,可以手动添加如下一行:

<meta name="duokan-body-font" content="DK-SONGTI"/>

多看官方客户端可以字体列表:

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”; 使用多看系统自带符号字体(不常见符号,如音标等)。

修改完content.opf文件后,去Styles目录下,对CSS文件进行一定的修改,针对不同的书籍,修改的内容各有重点。此处不详写了,网上有一些精排用字体的现成CSS文件,可以借鉴。

另外,印象中“阁内看书”大佬还曾经说过,多看后来曾升级,只完成ID和BodyFont声明依然无法实现原有的功能,还需要在某处添加duokan-extension.xml文件才行,但原文多番查找未找到,印象中,无法在sigil中添加,即使添加,也无法保存,只能通过压缩工具对Epub进行添加,文件本身似乎是个空文件。

但虽然未找到原文,但在另一篇却找到了最新的说法:

当然,自制书还是可以锁字体,固定默认字体为书宋或者你设定的正文字体的,但这样就不能正文换别的字体了。如果要启用正文换字体,默认字体就是兰亭黑。之前可以通过加入duokan-extension.xml来实现既默认书宋又能换字体,但最新版又不行了,好像必须经过多看的DRM加密,才能既默认书宋又能换字体。

时间为4个月前,不知道现在是否又有变化。

或许为了生存吧,多看对第三方的图书支持越发不好了。当然,可以理解,但依然很遗憾。

二、注释

多看的弹出注释,曾经几乎独出一家,我当年便是被其独特的注释拉入坑的。官方称之为“富文本脚注”。

正文点击注释处,为图片文件,先分享个常用的注释图文件 注释图,把这个文件放到Images目录下。

需要插入注释的位置代码:

<a class="duokan-footnote" href="#df-1"><img src=" ../Images/note.png"/></a>

在同章的末尾插入代码:

<ol class="duokan-footnote-content">
    <li class="duokan-footnote-item" id="df-1"><p>这是一个注释文本。</p></li>
</ol> 

注释和内容间通过id进行链接。

AZW3转制的EPUB,则是通过互相引用锚来实现注释的来回跳转。简示如下:

<a id="df-2"></a><a href="#df-1">[1]</a>
<a id="df-1"></a><a href="#df-2">[1]</a> 注释内容

如果需要改成多看的弹出注释,可以借助批量替换、正则表达式实现转换。具体的表达式,也需要根据文件本身的代码进行设计。关键在于借助原有的ID,实现注释和内容的链接。

自己为了改善阅读体验,基本只会做一、二两个部分的工作,后面的内容,基本上照抄了多看旧帖和《多看电子书制作技巧》,以备需要时查阅使用。

三、图片

1.全屏图片

全屏插图页扩展在ePub文件的opf文件中的spine节点下,spine节点定义了ePub文件中文章出现的顺序,每一个itemref项为一章,多看扩展一个properties属性值duokan-page-fullscreen,示例如下:

<spine>
    <itemref idref="chapter100" properties="duokan-page-fullscreen">
    ……
</spine>

这样id为“chapter100”的章就会按全屏插图页逻辑处理,而相应的html内容应如下所示:

<?xml version="1.0" encoding="utf-8"standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  css"rel="stylesheet" type="text/css" />
</head>

<body>
  <p><img src="../Images/sanguoyanyi.png"/></p>
</body>
</html>

注意,html中应只含有一个img,不需要设置任何样式,程序会自动将图片撑满展示。

可以通过全屏插图页做封面。

<spine>
    <itemref idref="coverpage" properties="duokan-page-fullscreen">
    ……
</spine>

2.交互图

交互图为点击后会自动放大的图片,提供了更好的交互体验。代码如下:

<div class="duokan-image-single">
    <img src="../Images/tree.png"alt="" />
    <p class="duokan-image-maintitle">主标题:大自然</p>
    <p class="duokan-image-subtitle">副标题:森林中的树</p>
</div>

为了保证点击放大之后的图像呈现效果,采用交互模式的图像数据应该保证足够的分辨率。

注意:

  1. 主标题和副标题可以不出现;
  2. 主标题和副标题可以在img之前出现;
  3. 交互图不可以嵌套出现。

3.画廊模式

画廊模式可以支持在同一个位置显示多张大小一致的图像,用户可以通过滑动等手势切换不同的图像内容。

如下,即为一个拥有三帧画面的画廊(每一个duokan-image-gallery-cell声明一个分帧):

<div class="duokan-image-gallery">
    <div class="duokan-image-gallery-cell">
        <img src="images/tree1.png"alt="" />
        <p class="duokan-image-maintitle">主标题:大自然</p>
        <p class="duokan-image-subtitle">副标题:柏树</p>
    </div>
    <div class="duokan-image-gallery-cell">
        <imgsrc="images/tree2.png" alt="" />
        <p class="duokan-image-maintitle">主标题:大自然</p>
        <p class="duokan-image-subtitle">副标题:柳树</p>
    </div>
    <div class="duokan-image-gallery-cell">
        <imgsrc="images/tree3.png" alt="" />
        <p class="duokan-image-maintitle">主标题:大自然</p>
        <p class="duokan-image-subtitle">副标题:杨树</p>
    </div>
</div>

注意:

  1. 各分帧图片最好保持同样大小;
  2. 最好各分帧都存在主标题和副标题;
  3. 画廊整体样式应该放在duokan-image-gallery所在的div上。

4.上下居中图

这个属性在多看漫画书中用的比较多,当然你也可以用到普通的书里面。语法如下:

<spine>
    <itemref idref="chapter01.xhtml" properties="duokan-page-fitwindow">
    ……
</spine>

同样,对应的html文件只需要一张图片即可,不需要别的文字或者代码,就算写了多看也不会显示出来,而只会将图片上下居中显示。

5.延伸式全屏图

注意,这个属性是多看4.4以上才有的,最开始是用于s.这本书中,显示的效果是全屏显示一半的报纸,点击按钮之后进入交互的全屏显示,可以放大和旋转。如果是多看的低版本,这个属性无效。
语法如下:

<spine>
    <itemref idref="coverpage" properties="duokan-page-fullscreen-spread-left">
    ……
</spine>

这个代码会全屏显示图片的左半部分,当然你把left改成right也可以,就会显示图片的右半部分。只有这两个属性是有效的。

注意图片只能选择长宽比较大的(横躺的图片),最好是长度的一半正好能显示一个完整的图。

四、多媒体

1.音频

在HTML 5规范中,音频采用标准的audio标签,但需要扩展说明其占位图像,示例如下:

<audio class="duokan-audio content-speaker" placeholder="speaker.jpg" activestate="active-speaker.jpg" title="军港之夜">
    <source src="song.mp3" type="audio/mpeg" />
</audio>

duokan-audio为扩展标签,表明了该audio标签为多看扩展类型,placeholder用于表示占位图,activestate表示活动状态下的占位图,title表示标题名。

一般情况下可以指定audio采用的CSS样式,在绘制占位图时需要遵循该样式,示例代码如下:

audio.content-speaker {
    font-size: 16px;
    width: 0.8em;
}

audio的controls属性出现时,表明应用层需要显示控制栏,如果不出现,则无需显示控制栏。

2.视频

在HTML 5规范中,视频采用标准的video标签,示例如下:

<video class="duokan-video content-matrix" poster="matrix.jpg">
    <source src="matrix.mp4" type="video/mp4" />
</video>

duokan-video为扩展标签,表明了该video标签为多看扩展类型。

一般情况下可以指定video采用的CSS样式,在绘制poster时需要遵循该样式,示例代码如下:

video.content-matrix {
    width: 320px;
    height: 240px;
}

video的controls属性禁止出现。

五、对象出血贴边

.head {
    duokan-bleed: (top|left|right|bottom|lefttop|topright|lefttopright|leftright);
}

需要注意的是多看的这个语法并不是无条件“贴边”,而是在图片的边贴到出血格位置的前提下才会进行相应的贴边。例如,图片的尺寸非常小,达不到屏幕宽度,由于图片默认左边和顶边都是贴近出血格位置的,则默认top和left属性都会起效;但图片只有设置了靠右对齐时。right属性才会起效;bottom实际上只是贴近下一个段落的顶边,并不是贴近屏幕的底边(因为没有办法让前端元素贴近屏幕底边);类似的,leftright属性就需要左右边都要贴近出血格才会起效。

  1. 如果图片本身尺寸很大而不设置100%的宽度,当缩小字号的时候,图片也会跟着缩小,缩小到宽度不足屏幕宽度的时候,就会导致贴边失效。如果设置了100%的宽度,不管字号是多大,图片都会固定贴边,不会影响排版效果。
  2. 贴边只针对正文元素,如图片或文字都是可以贴边的,但不会处理文字的padding等属性。所以贴边主要还是用于图片,文字贴边只能用于特定的排版设计。

六、结语

小书屋的站长,最近宣判了。许多电子书的分享网站不免狐悲,各做打算,像HiPDA干脆将Eink版的附件功能给关掉了。

从鼓励产出的角度,自然应有之义。不过,总是怀念低成本获取知识和资源的时代。

希望能够在左右之间,找到个双全的平衡点吧。