Question

Is it possible to display epub format books in web browser using pure HTML5, CSS and Jquery? Could anybody please suggest how do I do this? I have to also make this responsive to be able to make it work on iPad. I know that but I don’t know how do I read the epub using HTML and Javascript.

The epub may contain some mathematical functions and I need to display them properly too.

Answer 1

Is it possible to display epub format books in web browser using pure HTML5, CSS and jQuery?

Yes, it is possible.

Why do you want to write an epub reader? There are already many out there.

In any case, your question is a specific form of the generic question, is is possible to write an an ebook reader for epubs? Obviously, yes it is, may have been written. If you can write it in one language or for one platform, you can write it in or for another.

But actually, you don’t even need to write a reader, since epubs are just little websites in a can. Unzip the epub file somewhere on your server, and navigate the browser to one of the pages. Voila, you’re reading. You want a table of contents? Navigate to the toc.xhtml or equivalent file and there you go.

What about moving from one page to the next? You’ll need to know what order the pages are supposed to be displayed in. Write a small server component which parses the file normally called content.opf, and based on the order of the files in the manifest element, emit some HTML which has a forward and back button and an iframe to show the content. While you’re at it, parse out the title and other interesting metadata. All this is essentially what epubjs does.

But I intuit from your question that you want to do this entirely on the client/browser side. Well, that too has already been done, in the form of Readium, which you should take a look at. Use your favorite JS unzipping library (warning, can be slow) to unzip the epub file, and write a bit of JS to parse the metadata and throw up the pages, again most likely in iframes with some chrome around them.

But what if you want paginated output, which people have come to expect from ebook readers? This is where things start to get hairy, and is probably a good place to step back and ask yourself once again why you’re doing this. Anyway, if you decide you really want paginated display, then you’re going to need to figure out some combination of logic involving windowing, framing, clipping, offsetting, and/or using “regions” to help you here. Some ebook readers just punt here, and say, what’s wrong with scrolled/unpaginated output anyway?

But ebook readers do many other things. For instance, most would allow you to change line spacing, or margins, or font sizes. How do these user settings interact with the styling in the book’s CSS files? Some readers take the approach of parsing the CSS (there are libraries for that too) and rewrite it to get the results you or your user wants.

Prefer an app instead of a browser app? Wrap the whole shebang in PhoneGap.

You’re going to have to worry about many, many other things to make a competent reader. Just off the top of my head, that includes displaying the “guide” or “landmarks” some books specify, remembering reading location and user options from session to session, and probably providing some kind of bookshelf functionality.

Although some client-side ebook readers do use jQuery, keep in mind that since epubs are HTML5/CSS2.5/JS, the content itself can only be reliably displayed by a modern browser. But if you have a modern browser, you don’t need 90% of the hair in jQuery which is designed for cross-browser compatibility. You’d be better off with more lightweight components, such as Backbone and/or Underscore. You probably don’t even need a selector library, since you’ll have querySelector.

Good luck!