Ereader-Style Pagination

Question

I am grabbing text data from XML files, and want it to display in book page-like format inside a UIWebView on iPad. The XML files are coming out of a .epub, and each one contains a single chapter of a book, divided up only by p tags.

I want to dynamically paginate these files into book-like pages based on the size of the UIWebView, which is a full iPad screen, as well as by user-selected font size. I am currently loading a blank html page with related css into a UIWebView, grabbing paragraphs based on number of characters as Strings from the XML, and printing these into the html using StringByEvaluatingJavaScriptFromString and the innerHTML property.

Obviously, doing this by number of characters creates improperly spaced, oddly formatted pages, but I'm not sure how else to "paginate" the text.

What I am looking to do is something akin to the app "eReader" on iPad:http://www.ereader.com/. They seem to be breaking a single file up into pages dynamically, and loading it into UIWebViews. How is this done?

Answer 1

Most EPUB readers that are based on UIWebView simply use CSS3 Columns to paginate the document.

You can see this in action at http://www.quirksmode.org/css/multicolumn.html

The basic idea is that you 'columnize' the document and then scroll horizontally through it to show a specific page.

Having done this for one popular (Canadian) eReader application on the iPhone and iPad, I can tell you that the technique works but that it is far from ideal.

Answer 2

The code is already made. It is called epubjs. It is Javascript only epub reader.