Providing a long document on the iPad

Question

I am using a document viewer with highlight / annotation capabilities for a custom document format on an iPad. The documents are long (from 100 to 200 pages, if they are printed on paper), and it was difficult for me to find the right approach. Here are the requirements:

1) Basic style with rich text: left / right margin control. Control name, font size, foreground / background color and line spacing. Bold, italics, underline, etc.

2) Selection and selection of arbitrary text areas (not limited to paragraph boundaries, as in Safari / UIWebView).

3) Configuring the Cut / Copy / Paste popup window (UIMenuController) This is one of the main requirements of the application.

My first implementation was based on UIWebView. I just presented the document as HTML with CSS to style the text. But I could not get the text selection behavior that I wanted (across the border of the paragraph), and the UIMenuController could not be configured from the UIWebView.

So, I started working on the javascript approach, pushing the text selection behavior of the device using jQuery to catch touch events and dynamically change the DOM to change the background color of selected text areas. I created a fake UIMenuController control as a hidden DIV, positioning it and hiding it when there was an active selection area.

Not too shabby.

The main problem is that it is SLOOOOOOOW. Scrolling through a document is good and fast, but dynamically changing the DOM is not very fast. In addition, I could not figure out how to recreate the magnifying glass of a magnifying glass, so my fake GUI for selecting text does not look exactly like the native implementation. In addition, I have not yet implemented the communication bridge between the javascript layer and the objective-c layer (where the rest of the application lives), but it has become very complicated.

So, I watched CoreText, but there are a few examples on the Internet. 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 in a UIView. But he has his own problems: he does not implement the text selection behavior, and he is not a UIMenuController, so I do not know how to do this. And, more importantly, he tries to draw the entire document at once, with significant performance degradations for long documents. My documents can contain thousands of paragraphs, and less than 1% of the document is always displayed on the screen.

On the plus side, these documents already contain accurate formatting information. I know the exact position of each line of text, so I don’t need a layout mechanism.

Does anyone know how to implement this view with CoreText? I understand that a full-blown implementation is too complicated for such a question, but I'm looking for a good CoreText example with a few basic requirements:

1) Accurate layout and formatting control (using formatting metrics and text styles that I have already calculated).

2) Free text selection.

3) Configuring the UIMenuController.

4) Effective utilization of resources for off-screen objects.

I would be happy to implement my own processing when text elements scroll off-screen, but does not require re-implementation of UIScrollView?

I am new to iPhone development and still used to Objective-C, but I have been working in other languages ​​for more than ten years (Java, C #, flex / actionscript, etc.), so I feel confident in my ability to do the job if only I better felt the iPhone SDK and common coding patterns for such things. Is it just me, or is the SDK documentation really sucking?

Anyway, thanks for your help!

Answer 1

Are there any semantic components in your document except for each paragraph? If you already have the concept of sections or pages, I would recommend that you display each of them as an independent table. It is very simple to create a table panel that makes you forget that you are really looking at a UITableView. All you have to do is override drawRect: and setSelected: and setHighlighted: and tah dah! No More Cell Separators If You Don't Want Them. In addition, you can do some nifty things using the table as a base. If you defined sections in a UITableView, then you might have a great title that scrolls when you view your document. Another thing you can do is add a “go to section” panel / bookmark menu, and so you don’t have to provide a choice of section borders.

Massive paste blocks for copying will also be very painful in the system. In addition, if you are faced with the problem of providing this content, you may not want to make it too easy for someone to copy it all at once ... (It is impossible to follow this line of thinking without any specific features of your project) .

If you really want to provide copy options, you can add buttons to each logical page or section that immediately selects and copies the entire section for your convenience. (Maybe related to citation?)

I recommend that you look for the UITableViewCell UITableViewDelegate and UITableViewDataSource in the SDK docs as these pages will greatly help if you decide to use this sentence.

Answer 2

Only two random observations:

• Can you create a swap interface? (Unlike "infinite scrolling.") It seems that the swap interface will be much simpler in system resources.

• UIActionBar is a UIMenuController class. The interface is a bit weird as the menu is singleton (wtf?), But I'm sure you won't have a problem finding it out.

Hope this helps.

Answer 3

Here's a potential solution, but I don’t know if he is crazy. Since I'm still so new to iPhone development, it can be a big no-no.

In any case, I had the idea to make each paragraph of the document (the dimensions of which I have already precisely calculated) as a cell in a UITableView. Since UITableView already has mechanisms for disposing cells, I would not have to implement this from scratch, and the document could be arbitrarily long without causing problems with resource consumption.

Of course, I want to get rid of line separators between cells, since I want the user interface to look like a document instead of a table.

Or maybe I could display each page of the document (for example, a regular PDF file, this is the format of a page document) as a table cell and redefine the cell divider graphics to look like a page border ...

But is it possible to get rid of the default behavior in the table and implement text selection in the contents of the table cell instead? Would it be completely impossible to implement a choice of text that crosses the border of a paragraph (between multiple table cells)?

Answer 4

UIWebView is a good choice, but we need another application to preview pages using each font and each style sheet and store information about the conversion to a database table:

chapter_id int primary key,
startlocation int,
end location int,
fontsize int (or stylesheetname string)

Using JavaScript, we can calculate how many words fit into a div without scrolling.

UIWebView is good as it provides rich content and has selection and highlighting behavior.

Hope this helps.