Giter VIP home page Giter VIP logo

epub.js's Introduction

Epub.js

FuturePress Views

Epub.js is a javascript library for rendering ePub's in the browser, across many devices.

Epub.js provides common ebook functions (such as persistence and pagination) without the need to develop a dedicated application or plugin.

Unlike an application, our HTML / Javascript reader can be hosted anywhere and can be easily customized using javascript, such as changing the interface or adding annotation functionality.

Try it while reading Moby Dick

Why EPUB

Why EPUB

ePUB is a widely used and easily convertible format. Many books are currently in this format and it is used as the base for many proprietary formats (such as Mobi and iBooks). We have chosen the ePUB standard because it brings us as close as possible to our “Books on the Web” vision, while enforcing a standard which enables the development of more advanced reader functionality.

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.

Getting Started

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 minfied 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/", { restore: true });
	Book.renderTo("area");
</script>

See the Documentation to view events and methods for getting the books contents.

However, the Examples are currently the best place to learn how to use the library.

Recent Updates

  • Started Documentation

  • ePub("book.epub", options) returns a new EPUBJS.Book(options),

  • EPUBJS.Book now only takes a options object, set bookPath with ePub("path/to/book/") or new EPUBJS.Book({ bookPath : "path/to/book/"})

  • Examples

  • Tests

Running Locally

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 dist/ folder.

Building for Distribution

Builds are concatenated and minified using gruntjs

To generate a new build run

grunt

Persistence / Offline Storage

The eBook reader uses persistence to cache the files from an epub for offline viewing, stores information about the book, and remembers what chapter the user was on. Being able to read a book when internet isn’t available, and remembering your place in the book is crucial to making our reader website work as an application and fulfill users expectations of how a eBook should function.

Currently, there is not a great cross browser solution for dynamic file storage. Chrome supports the Filesystem API, Firefox/IE support indexedDB, and Safari/Safari Mobile support Web SQL.

The reader detects the storage capabilities of the browser and picks the best available option. When internet is available, the entire book is loaded into storage. When possible, Web Workers is used to handle loading and saving the files, so as not to interfere with the reading experience.

The browser tells the reader when there is Internet connectivity, and by listening to those events, it automatically switches to using the stored files. Users can also manually switch to offline mode in the interface.

Hooks

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:

EPBUJS.Hooks.register("beforeChapterDisplay").example = function(callback, render){
    
    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();
		
}

Additional Resources

Follow us on twitter: @Epubjs

Other

EPUB is a registered trademark of the IDPF.

epub.js's People

Contributors

fchasen avatar krushton avatar

Watchers

Vijayamaharaj avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.