8

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?

Kampai
  • 22,848
  • 21
  • 95
  • 95
Chris
  • 884
  • 1
  • 11
  • 30

3 Answers3

3

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.

Stefan Arentz
  • 34,311
  • 8
  • 67
  • 88
  • This is very interesting, and definitely helpful. The follow-up questions are then: if CSS "columnizes" the whole chapter, is there a way to access and edit column content via DOM, in order to dynamically change page numbers, etc? Additionally, how do you restrict the user from freely scrolling horizontally through the view, so that they are "locked" into looking at one page at a time? – Chris Nov 17 '10 at 20:13
  • Also, CSS3 columns seem to act strangely when you want a larger column width (say, about the size of an iPad window). What's your solution? Made a separate question here:http://stackoverflow.com/questions/4217936/css3-columns-and-uiwebview – Chris Nov 18 '10 at 18:02
  • that's a really interesting approach. Could you handle EPUB's built-in columns using that approach or would that then break the 'pagination' trick? – Nic Gibson Nov 24 '10 at 13:49
  • Epub has no built-in columns afaik. You are supposed to use a simpified subset of HTML and CSS. And columns are not part of that. – Stefan Arentz Nov 25 '10 at 17:40
1

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

Uddhava dasa
  • 11
  • 1
  • This is pretty swanky. I checked out the svn and got it running with a couple different .epubs. Problem is, when I get the files into Xcode and have the UIWebView load index.html the whole thing falls apart. only the info tag content is visible and there's no styling. – Chris Nov 19 '10 at 20:03
  • Another option is to use the smooth scroll functions in Motools, Jquery, etc. Render your webpage in multiple columns, and then browse to hash tags. There a nice demo in the Jquery website of scrolling to any content on a webpage. – Uddhava dasa Dec 09 '10 at 03:02
0

Use UITextView with PageviewController . (specify your doubts in it , if any )

Karan Alangat
  • 2,154
  • 4
  • 25
  • 56