How to create multi-column text layout for iPad?

Question

Hello,

I'm looking for a way to create kind-of an article reader which would have 2-3 columns of text which could occasionally wrap about some image. Just like it's done in "New York Times" or "Wall Street Journal" and other iPad applications.

Also, that text should be paged and every page should have UITableView at it's side (just like in "Wall Street Journal" app). But that looks like an easy part.

What would be the best approach to do such thing? Use UIWebView with CSS3 multi-columns (seems easiest, but will it work properly) or there is another obvious way I don't know about (and google doesn't help either)?

Edit: One more thing, if it is possible use UIWebView with CSS3, then how about calculating required UIWebView width to "columnize" it properly? As I've experienced in the past text height calculations are painful and now we would have to deal with some wrapped images too.

Answer 1

If you’re doing it with CSS, then try -webkit-column-count:n, it might help. Otherwise, since iPad has iOS 3.2 which brings Core Text, that might also help.

However it seems that column-count arranges a block of text so that it is laid out with a certain number of columns, while its height can grow beyond the bounds of the screen (page).