如何在纯HTML5 / CSS / Jquery中显示epub格式书

时间:2013-01-28 12:58:33

标签: javascript jquery html css epub

是否可以使用纯HTML5,CSS和Jquery在Web浏览器中显示epub格式的书籍?有人可以建议我该怎么办?我还必须使其响应能够使其在iPad上运行。我知道,但我不知道如何使用HTML和Javascript阅读epub。

epub可能包含一些数学函数,我也需要正确显示它们。

3 个答案:

答案 0 :(得分:18)

  

是否可以使用纯HTML5,CSS和jQuery在Web浏览器中显示epub格式的图书?

是的,这是可能的。

为什么要编写epub阅读器?那里已经有很多了。

无论如何,你的问题是一般问题的一个特定形式,是否有可能为epubs写一个电子书阅读器?显然,是的,可能是写的。如果您可以用一种语言或一个平台编写它,则可以将其写入或用于其他语言。

但实际上,你甚至不需要写一个读者,因为epubs只是一个罐子里的小网站。将epub文件解压缩到服务器上的某个位置,然后将浏览器导航到其中一个页面。瞧,你正在读书。你想要一个目录?导航到toc.xhtml或等效文件,然后就可以了。

从一个页面移动到另一个页面怎么样?您需要知道页面应该显示的顺序。编写一个小型服务器组件来解析通常称为content.opf的文件,并根据清单元素中文件的顺序,发出一些HTML它有一个前进和后退按钮和一个iframe来显示内容。在您了解它的同时,解析标题和其他有趣的元数据。所有这些基本上都是epubjs所做的。

但是我想知道你想在客户端/浏览器端完全做到这一点。嗯,这也是以Readium的形式完成的,你应该看看。使用你最喜欢的JS解压缩库(警告,可能很慢)来解压缩epub文件,并编写一些JS来解析元数据并抛出页面,再次很可能是在iframe周围有一些chrome。

但是,如果你想要分页输出,人们对电子书阅读器的期望呢?这就是事情开始变得多毛的地方,并且可能是一个退后一步并再次问自己为什么要这样做的好地方。无论如何,如果你确定你真的想要分页显示,那么你需要找出一些逻辑组合,涉及窗口,框架,裁剪,偏移和/或使用"区域"在这里帮助你一些电子书阅读器只是在这里说,并说,滚动/取消输出的输出有什么问题?

但电子书阅读器做了很多其他事情。例如,大多数允许您更改行间距或边距或字体大小。这些用户设置如何与书籍CSS文件中的样式相互作用?一些读者采用解析CSS的方法(也有库),并重写它以获得您或您的用户想要的结果。

首选应用而不是浏览器应用?将整个shebang包裹在PhoneGap中。

你将不得不担心许多其他事情要成为一个称职的读者。就在我的头顶,这包括显示"指南"或者"地标"一些书籍指定,记住从会话到会话的阅读位置和用户选项,并可能提供某种书架功能。

虽然一些客户端电子书阅读器确实使用jQuery,但请记住,由于epub是HTML5 / CSS2.5 / JS,因此内容本身只能通过现代浏览器可靠地显示。但是如果你有一个现代浏览器,你不需要jQuery中90%的头发,这是专为跨浏览器兼容性而设计的。使用更多轻量级组件(例如Backbone和/或Underscore)会更好。您可能甚至不需要选择器库,因为您将拥有querySelector。

祝你好运!

答案 1 :(得分:2)

对于科学论文(期刊文章), 在浏览器上模拟EPUB阅读器 有“最佳解决方案”。它可以使用XML(JATS)或XHTML(来自EPUB)内容。 PubReader 使用HTML5和CSS3中提供的功能和功能。

使用CSS和Javascript实现格式化,分页,导航和文本回流。 整篇文章作为单个HTML页面加载到浏览器中,并在本地处理分页等。 见:

PS:PubReader类似于@torazaburo的建议,EPUB-Readium browser interface

答案 2 :(得分:0)

在GitHub上查看this project。这是一个javascript epub阅读器。它有点老了,但它会按你的要求做。