Rendering a Long Document on iPad

Posted by benjismith on Stack Overflow See other posts from Stack Overflow or by benjismith
Published on 2010-06-13T18:35:09Z Indexed on 2010/06/13 18:42 UTC
Read the original article Hit count: 312

Filed under:
|
|
|

I'm implementing a document viewer with highlighting/annotation capabilities for a custom document format on iPad. The documents are kind of long (100 to 200 pages, if printed on paper) and I've had a hard time finding the right approach. Here are the requirments:

1) Basic rich-text styling: control of left/right margins. Control of font name, size, foreground/background color, and line spacing. Bold, italics, underline, etc.

2) Selection and highlighting of arbitrary text regions (not limited to paragraph boundaries, like in Safari/UIWebView).

3) Customization of the Cut/Copy/Paste popup (what is that thing called anyhow? UIActionBar?) This is one of the essential requirements of the app.

My first implementation was based on UIWebView. I just rendered the document as HTML with CSS for text styling. But I couldn't get the kind of text selection behavior I wanted (across paragraph boundaries) and the UIActionBar can't be customized from within UIWebView.

So I started working on a javascript approach, faking the device text-selection behavior using JQuery to trap touch events and dynamically modifying the DOM to change the background color of selected regions of text. I built a fake UIActionBar control as a hidden DIV, positioning it and unhiding it whenever there was an active selection region.

Not too shabby.

The main problem is that it's SLOOOOOOOW. Scrolling through the document is nice and quick, but dynamically changing the DOM is not very snappy. Plus, I couldn't figure out how to recreate the magnifier loupe, so my fake text-selection GUI doesn't look quite the same as the native implementation. Also, I haven't yet implemented the communication bridge between the javascript layer and the objective-c layer (where the rest of the app lives), but it was shaping up to be a huge hassle.

So I've been looking at CoreText, but there are precious few examples on the web. I spent a little time with this simple little demo:

http://github.com/jonasschnelli/I7CoreTextExample/

It shows how to use CoreText to draw an NSAttributedText string into a UIView. But it has its own problems: It doesn't implement text-selection behavior, and it doesn't present a UIActionBar, so I don't have any idea how to make that happen. And, more importantly, it tries to draw the entire document all at once, with significant performance degradations for long documents. My documents can have thousands of paragraphs, and less than 1% of the document is ever on screen at a time.

On the plus side, these documents already contain precise formatting information. I know the exact page-position of every line of text, so I don't need a layout engine.

Does anyone know how to implement this sort of view using CoreText? I understand that a full-fledged implementation is overkill for a question like this, but I'm looking for a good CoreText example with a few basic requirements:

1) Precise layout & formatting control (using the formatting metrics and text styles I've already calculated).

2) Arbitrary selection of text.

3) Customization of the UIActionBar.

4) Efficient recycling of resources for off-screen objects.

I'd be happy to implement my own recycling when text elements scroll off-screen, but wouldn't that require re-implementing UIScrollView?

I'm brand-new to iPhone development, and still getting used to Objective-C, but I've been working in other languages (Java, C#, flex/actionscript, etc) for more than ten years, so I feel confident in my ability to get the work done, if only I had a better feel for the iPhone SDK and the common coding patterns for stuff like this. Is it just me, or does the SDK documentation really suck?

Anyhow, thanks for your help!

© Stack Overflow or respective owner

Related posts about iphone

Related posts about objective-c