14

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.

LeftyX
  • 34,522
  • 20
  • 128
  • 188
Jack
  • 6,843
  • 18
  • 53
  • 102

2 Answers2

21

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!

Nathan Tuggy
  • 2,239
  • 27
  • 28
  • 36
  • Thanks about explanation and your update, it is perhaps the more simple and reliable EPUB-online interface! I show below an "Readium inspired" and specialized version for scientific papers. Compare online demos: [Readium demo](http://readium.github.io/readium-viewer-demo1/) and [PubReader demo](http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3547968/?report=reader). – Peter Krauss Jul 13 '13 at 12:48
4

For scientific papers (journal articles), there are a "best solution" to simulating EPUB reader at browser. It can use XML (JATS) or XHTML (from EPUB) content. The PubReader use features and functions that are available in HTML5 and CSS3.

With CSS and Javascript it implements the formatting, paging, navigation, and text reflowing. The entire article is loaded into the browser as a single HTML page, and handles paging, etc. locally. See:

PS: PubReader is similar to the @torazaburo suggestion, the EPUB-Readium browser interface.

Peter Krauss
  • 11,340
  • 17
  • 129
  • 247
  • PubReader has by far the simplest and smartest implementation to display html content with client-side pagination – benuuts Jan 21 '20 at 13:57