作者:Sam
前言
最近我在慕课网发布了两门关于Web阅读应用开发的课程,采用Vue全家桶开发。免费课是入门级课程,初步实现了一个阅读器。实战课是进阶课程,实现了一个高性能的互联网阅读应用。两个项目都采用自适应布局,同时支持PC端和移动端,想要系统提升前端技能的同学不要错过。
免费课《快速入门Web阅读器开发》立即学习
免费课DEMO立即体验
实战课《Vue2.5 实战微信读书 媲美原生App的企业级web书城》立即学习
实战课DEMO立即体验
说明
本教程为系列教程,主要目的是向大家分享如何开发一个功能强大的Web阅读器,技术栈是Vue全家桶。
常见的电子书格式
在上一篇手记中,我介绍了阅读应用的常见功能与阅读器的实现原理,没有读过的同学可以点击这里。在开发阅读器之前,我们先要了解常见的电子书格式,如:txt、PDF、ePub和mobi等,下面简单介绍这些格式:
- txt是纯文件文件,它无法支持多媒体格式,小说类应用中使用较多,但无法满足电子出版物的需求;
- PDF是非常主流的电子书格式,但是在移动端下排版效果不佳,所以移动阅读很少采用PDF格式;
- ePub是目前最主流的电子书格式,电子书内容采用html显示,由css控制样式,不论在PC端还是移动端都有非常好的显示效果,不足之处在于文件容量较大,而且解析时需要解压,会消耗性能,可以借助本地缓存技术来缓解这个问题;
- mobi是亚马逊Kindle的电子书格式,需要在Kindle中阅读。
本教程主要讲解ePub阅读器的开发。
阅读器的开发路径
![阅读器开发路径](http://www.mk2048.com/web_upload/blog_imgs/5/https___user-gold-cdn-xitu-io_2018_10_24_166a416fc4a5adb3_w-408_h-340_f-png_s-52882.gif)
- 解析:获取图书的基本信息、目录信息、章节信息等
- 渲染:在界面上展示电子书内容,支持屏幕尺寸自适应
- 翻页:支持上一页和下一页的翻页操作
- 字号:支持修改文字的字号大小
- 字体:支持修改文字的字体,能够支持CSS3的Web字体
- 主题:支持切换阅读器的背景色和文字颜色
- 进度:支持动态切换阅读器的显示进度
- 目录:支持多级目录展示,点击目录快速跳转到指定章节
- 搜索:支持全文搜索和章节搜索
- 书签:支持将当前的阅读位置保存为书签,并能回溯
- 笔记:支持选中一段文本后加入笔记
- 适配:针对PC端和移动端进行专门的适配处理
上一篇手记为大家粗略展示了阅读器的开发流程,接下来的系列教程我将由浅入深,为大家详细介绍如何开发一个阅读器。
ePub标准
正式开发之前,我们需要了解什么是ePub标准。ePub是Electronic Publication(电子出版物)的缩写,它是IDPF制定的电子出版物标准。
IDPF介绍
- IDPF是一个国际组织,全名是国际数字出版论坛,官网是www.idpf.org,它的使命是致力于电子出版物的推广,ePub就是该组织制定的标准。
- IDPF的董事会有14个席位,收入来源是会员单位的会员费,目前IDPF拥有200多家会员单位,年收入100万美元的公司,每年需支付775美元的会费,以此类推,加入IDPF会员就有机会参与董事会席位竞争或参与电子出版物标准的制定等。
- IDPF的主要工作是制定、完善和推广ePub标准,主要用于解决纸质书的电子化问题,包含分发、管理和加密等等。
ePub标准介绍
ePub标准目前已经推出3.0版本,它包含以下几个部分:
- EPUB Publications:规定了ePub标准的整体规范和基本语义,比如什么是Spine,什么是Manifest。这样做的目的是为了使不同出版社的ePub电子书都按照同一标准生产,以保证不同的阅读器可以正确地解析同一本电子书;
- EPUB Content Documents:规定了ePub的内容标准,如何采用XHTML、 SVG 和 CSS 展示电子书内容;
- EPUB Open Container Format:规定了ePub的封装标准,如何将一组文件打包成一个ePub文件;
- EPUB Media Overlays:规定了文本和音频的同步处理模型,目前大部分ePub电子书中没有涉及该内容。
想要深入研究ePub标准的同学点击这里,官方为我们提供了非常详细的文档。
ePub电子书剖析
下面我们来看看一本ePub电子书的内部结构,测试电子书点击这里下载。
解压
将电子书的后缀名改为zip,之后用解压软件进行解压,可以得到一个文件夹,如下图所示:
![ePub电子书解压](http://www.mk2048.com/web_upload/blog_imgs/5/https___user-gold-cdn-xitu-io_2018_10_24_166a416fc60224cf_w-732_h-302_f-png_s-312650.gif)
container.xml
打开电子书目录,在META-INF目录下有一个container.xml文件,这是电子书的容器文件(Container),阅读器解析ePub电子书就是从这个文件开始的。
![ePub电子书的容器文件](http://www.mk2048.com/web_upload/blog_imgs/5/https___user-gold-cdn-xitu-io_2018_10_24_166a416fc4bb3069_w-612_h-222_f-png_s-25356.gif)
- ePub电子书根路径下必须存在一个META-INF目录
- ePub电子书在META-INF目录下必须包含一个名称为container.xml的文件(注意:名称不能更改,否则会导致解析失败)
- container.xml文件必须不能加密
- container.xml中必须包含rootfiles标签,rootfiles下必须包含一个或多个rootfile标签,其中必须包含一个full-path属性指向电子书的配置文件,配置文件格式为opf(其实也是xml文件)
希望深入研究Container标准的同学可以点击这里,我们打开测试电子书的container.xml,内容如下:
<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
<rootfiles>
<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package xml"/>
</rootfiles>
</container>
通过rootfile的full-path属性我们可以了解到在OEBPS目录下存在一个content.opf文件,我们打开OEBPS目录找到这个文件
![content.opf文件](http://www.mk2048.com/web_upload/blog_imgs/5/https___user-gold-cdn-xitu-io_2018_10_24_166a416fc64163ae_w-810_h-670_f-png_s-158910.gif)
<?xml version="1.0"?>
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" version="2.0">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:title>Agile Processes in Software Engineering and Extreme Programming</dc:title>
<dc:creator>Juan Garbajosa, Xiaofeng Wang and Ademar Aguiar</dc:creator>
<dc:language>En</dc:language>
<dc:rights></dc:rights>
<dc:publisher>Springer International Publishing, Cham</dc:publisher>
<dc:identifier id="bookid">978-3-319-91602-6</dc:identifier>
<meta name="cover" content="A978-3-319-91602-6_CoverFigure_IMG"/>
<meta name="epub-converter-version" content="v3.47"/>
</metadata>
<manifest>
<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx xml"/>
<item id="css1" href="springer_epub.css" media-type="text/css"/>
<item id="A468350_1_En_1_ChapterPart1" href="A468350_1_En_1_ChapterPart1.html"
media-type="application/xhtml xml"/>
<item id="A468350_1_En_1_Chapter" href="A468350_1_En_1_Chapter.html" media-type="application/xhtml xml"/>
<item id="A468350_1_En_5_Fig1_HTML_IMG" href="A468350_1_En_5_Fig1_HTML.gif" media-type="image/gif"/>
...
</manifest>
<spine toc="ncx">
<itemref idref="ACoverHTML"/>
<itemref idref="A468350_1_En_BookFrontmatter_OnlinePDF"/>
<itemref idref="A468350_1_En_1_ChapterPart1"/>
<itemref idref="A468350_1_En_1_Chapter"/>
<itemref idref="A468350_1_En_2_Chapter"/>
<itemref idref="A468350_1_En_3_ChapterPart2"/>
...
</spine>
<guide>
<reference type="cover" title="Cover" href="ACoverHTML.html"/>
<reference type="toc" title="Table of Contents" href="A468350_1_En_BookFrontmatter_OnlinePDF.html#Toc"/>
<reference type="text" title="Cosmic User Story Standard" href="A468350_1_En_1_Chapter.html"/>
</guide>
</package>
ePub标准规定一个opf文件根标签为package,其中必须包含metadata、manifest和spine,guide、bindings和collection属于可选项
- metadata:电子书的出版信息
- manifest:电子书的资源文件路径和id
- spine:电子书的阅读顺序
- guide:导读信息
metadata
metadata遵循DCMES(Dublin Core Metadata Element Set:都柏林核心元素)的规定,DCMES的目的是为了规范电子信息的描述,详细了解DCMES可以点击这里。ePub规定metadata下必须至少包含以下三个元素:
- dc:title - 电子书标题
- dc:language - 语种
- dc:identifier - 电子出版物的唯一标识,通常是ISBN号(International Standard Book Number:国际标准书号,专门为识别图书等文献而设计的国际编号)
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:title>Agile Processes in Software Engineering and Extreme Programming</dc:title>
<dc:language>En</dc:language>
<dc:identifier id="bookid">978-3-319-91602-6</dc:identifier>
</metadata>
manifest
manifest存储了电子书资源文件的详尽列表
<manifest>
<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx xml"/>
<item id="ACoverHTML" href="ACoverHTML.html" media-type="application/xhtml xml"/>
</manifest>
- item - 表示一个资源
- id - 资源在电子书中的唯一标识
- href - 资源的存储路径
- media-type - 资源的媒体类型
spine
提供电子书阅读的顺序
<spine toc="ncx">
<itemref idref="ACoverHTML"/>
<itemref idref="A468350_1_En_BookFrontmatter_OnlinePDF"/>
</spine>
- itemref - 表示一个资源
- idref - 表示资源的id,与manifest中的id对应,实际解析过程中会通过spine的id到manifest中寻找相应的资源,交由阅读器进行展示
ePub标准小结
ePub标准的核心是利用zip技术,将不同类型的文件打包为一个ePub文件,利用xml技术进行配置管理,结合ePub标准的规定将各类资源文件(如html、css、图片、音频和视频)有序地组织起来,从而保证了各类阅读器解析时的一致性。
总结
本文向大家介绍了电子书的常见格式,并详细讲解了ePub标准。理解ePub标准是开发电子书阅读器的一个前提,大家可以动手尝试将本文提供测试电子书解压,然后进行分析,也可以通过互联网通过其他ePub电子书尝试解析,看看它们是否符合ePub标准。