Epub.js is a JavaScript library for rendering ePub documents in the browser, across many devices.
Epub.js provides an interface for common ebook functions (such as rendering, persistence and pagination) without the need to develop a dedicated application or plugin. Importantly, it has an incredibly permissive Free BSD license.
Try it while reading Moby Dick
The EPUB standard is a widely used and easily convertible format. Many books are currently in this format, and it is convertible to many other formats (such as PDF, Mobi and iBooks).
An unzipped ePUB3 is a collection of HTML5 files, CSS, images and other media – just like any other website. However, it enforces a schema of book components, which allows us to render a book and its parts based on a controlled vocabulary.
More specifically, the ePUB schema standardizes the table of contents, provides a manifest that enables the caching of the entire book, and separates the storage of the content from how it’s displayed.
Get the minified code from the build folder:
<script src="../build/epub.min.js"></script>
If you plan on using compressed (zipped) epubs (any .epub file) include the minified version of zip.js
Also make sure to set EPUBJS.filePath
to the directory containing inflate.js
<!-- Zip JS -->
<script src="/build/libs/zip.min.js"></script>
<script>
EPUBJS.filePath = "../build/libs/";
</script>
Setup a element to render to:
<div onclick="Book.prevPage();">‹</div>
<div id="area"></div>
<div onclick="Book.nextPage();">›</div>
Create the new ePub, and then render it to that element:
<script>
var Book = ePub("url/to/book/");
Book.renderTo("area");
</script>
See the Documentation to view events and methods for getting the books contents.
The Examples are likely the best place to learn how to use the library.
-
v2 splits the render method from the layout and renderer. Currently only iframe rendering is supported, but this change will allow for new render methods in the future. See the breaking changes to the renderer here.
-
Work-in-progress pagination support using EPUB page-lists. See a usage example.
renderer:pageChanged
has changed torenderer:locationChanged
and abook:pageChanged
event was added to pass pagination events. -
Moved Demo Reader to
/reader/
and the source to/reader_src/
. -
Updated CFI handling to support text offsets. CFIs return wrapped like:
"epubcfi(/6/12[xepigraph_001]!4/2/28/2/1:0)"
. Ranges to be added soon. -
Added support for EPUB properties. This can be overridden in the settings and default to
{spread: 'reflowable', layout: 'auto', orientation: 'auto'}
-
Updated Documentation
-
Many more Tests
install node.js
install the project dependences with npm
npm install
then you can run the reader locally with the command
node server.js
- dev.html will pull from the source files and should be used during development.
- index.html will use the minified production libraries in the build/ folder.
- Single
- Basic
- Contained Epub
- Promises
- Fixed Width & Height
- Custom Element
- MathML with MathJAX
- Annotations with Hypothes.is
- Pagination
Once you start a server you can run the QUnit tests at https://localhost:8080/tests/
You can download the test books from https://github.com/futurepress/books by running:
git submodule update --init --recursive
Then you can pull the latest with:
git submodule foreach git pull origin master
Builds are concatenated and minified using gruntjs
To generate a new build run
grunt
Similar to a plugins, Epub.js implements events that can be "hooked" into. Thus you can interact with and manipulate the contents of the book.
Examples of this functionality is loading videos from YouTube links before displaying a chapters contents or implementing annotation.
Hooks require a event to latch onto and a callback for when they are finished.
Example hook:
EPUBJS.Hooks.register("beforeChapterDisplay").example = function(callback, renderer){
var elements = render.doc.querySelectorAll('[video]'),
items = Array.prototype.slice.call(elements);
items.forEach(function(item){
//-- do something with the video item
}
if(callback) callback();
}
Epub.js Developer Mailing List
IRC Server: freenode.net Channel: #epub.js
Follow us on twitter: @Epubjs
EPUB is a registered trademark of the IDPF.