Search code examples
javascriptcsshtmlepub

How to make controlls for epub using HTML 5,JavaScript and CSS?


Ok so we have to implement an online e-reader using HTML5, JS and CSS. So far I have a pretty good understanding of those 3 technologies. What basically needs to happen is that a user picks a book from a gallery of links which takes him to a page to read the book.

Apparently the the epub file should be loaded into memory on the clients computer, unpacked and then displayed on the webpage. Up untill this point I don't have too many problems, what really racks my brain is what comes next.

So all the chapters are divided into seperate xhtml pages aswell as the cover, title page, table of contents which makes creating navigatable dynamic links to them not too hard. But, we also have to provide controls to change the font, colour and navigate between pages. How do I implement this?

Does the JS to do this come in the page that loads the epub files and if so, how do I write JS that changes properties of a page loaded in the page the JS is in?

I can't think of another way to do this except to put a small JS widget on every single chapter, but then the problem of "turning pages" still exists as I do not know where one page starts and the other ends as this isn't specified in the xhtml files.

I'm sorry if I'm unclear or did not provide enough information, although I have worked with JS, HTML5 and CSS alot the whole epub thing is pretty new to me. Any help would be appreciated.


Solution

  • I would check out one of the few open source projects dedicated to epubs on the web to get you started. You seem to be asking many questions so rather than answer specifically, I recommend you look at how some others have tackled the problems.

    First you should check out Readium: http://readium.org/ They have many of the functions you've described (changing the font, picking a book from a library, etc.)

    Next I would look at my personal project https://github.com/fchasen/epub.js

    We do things a little differently but again it be a good place to look at how we've handled some challenges so you can come back with more specific questions.