Cordova/Phonegap eBook reader for Web and Mobile with Epub.js plugin

Welcome!!

In this post I’ll present you the Epub.js plugin.

With this plugin, you are able to create ebook readers for web, nodejs and mobile apps using Phonegap and Cordova. I’m working in a epub reader for Android with Cordova, and this lib is perfect, so, if you need anything like this, you really must to try it.

Epub.js:

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.

Tutorial - How to use Epub.js

Let’s start. Download Epub.js here, take a look in their documentation, but It’s so simple, everything that you need is here.

Add the Epub.js to your source:

  <script src="lib/epub.min.js"></script>

Now, create the next and prev buttons:

  <div onclick="Book.prevPage()"></div>
  <div onclick="Book.nextPage()"></div>

You can create your css and customize these divs as you prefer.

Your book will be rendered inside a div, so create it:

  <div id="area"></div>

And finally, you just need to render the book inside the div. So, run the script:

<script>
  var Book = ePub('path/to/book/');
  Book.renderTo('area');//div id
</script>

It’s done!! As you can see, this plugin is completely simple and useful. With theses commands, you are able to create a powerful reader.

How to use Epub.js with Cordova / Phonegap

If you are going to work with mobile devices, you can use the same code above, but some Android devices can present some bugs. To fix it, add the same script:

<script>
  EPUBJS.Render.Iframe.prototype.setLeft = function(leftPos){
    this.document.documentElement.style.WebkitTransform = 'translate("-" + leftPos +"px", 0)';
  };
</script>

With this script, Epub.js runs on Android, with no problems.

That’s it!! With this plugin, you are able to create complex apps easily. You can find some examples here and the documentation here.

Thanks for reading, take a look in the blog to find more tutorials. If you need to ask something, just comment here!!

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Developing Android Background Services

### Welcome!In this post, I'll show you how to develop background services on Android Studio. We'll see two type of services: `Service` a...… Continue reading