Dynamically sizing a UIWebView based on it's content font size

Question

I have some text that needs to be displayed in my app. The text contains links that need to be interactive. I have tried a few solutions for making tappable links in UITextViews and UILabels.

1. UITextView links

   • UITextView provides data detectors that pick up on URLs and make them tappable.
   • Unusable to me because the link will only open externally in Safari, there is no way to take control and do what I want with the link.

2. UILabel links using "Fancy Labels" (http://furbo.org/2008/10/07/fancy-uilabels/)

   • Almost the perfect solution, providing detection of links and a way for the user to see and tap them inline and giving me complete control over what to do with a link when it's pressed.
   • Currently unusable because the implementation uses UIButtons to overlay the links and they don't wrap with the text on long links.

Finally I settled on using a webview. I pass the text into the webview and construct a basic HTML wrapper around it and everything is hunky-dory. This is the same approach that Twitter for iPhone (aka Tweetie) uses.

The only problem I have now is that if the text is too long, the webview clips the overflow and scrolls to view the clipped text. Secondly if the text is too short, then there is a big area of wasted space below the webview.

Unlike Tweetie, I have more content beneath the webview, and I want to avoid the scrolling overflow or the wasted space. The webview is a subview of a scroll view anyway so the content of the entire page can grow without its subviews needing to scroll.

Is there any way I can dynamically resize the webview so that it's just the right height based on it's content?

I've tried many things so far, nothing seems to be a solid solution:

• sizeToFit does nothing (or more likely, just sets the size to what the current frame is anyway).
• sizeThatFits: returns its current size anyway.
• NSString's sizeWithFont:constrainedToSize: isn't feasible because UIWebView and UIFont have different representations of what size 18 is.
  • Just to elaborate on this point. In my testing, I've found that a webView with a scaleFactor of 1.0 and scalesPageToFit set to NO and a font size for the entire page set to 13.5pt (in CSS) renders text that is the same size as a UILabel with a UIFont of size 18. If anyone can explain that me I'd be grateful.
• Also, in the webView I'm using the CSS property word-wrap: break-word; in order to prevent the webView from scrolling horizontally with long words or URLs. Because of this, the wrapping behaviour between the webView and UILineBreakModeWordWrap differ completely. Even using UILineBreakModeCharacterWrap doesn't produce the same results.

Either there's no way to do this, or I'm being dumb and missing something simple. If anyone could provide some insight, I'd be very grateful. Thanks.

Answer 1

I found a solution to my problem at http://www.iphonedevsdk.com/forum/iphone-sdk-development/1388-getting-actual-content-size-uiwebview.html

I'm not convinced that it's the best solution, but it's working. If anyone has any better ideas I'll be glad to hear them.

I ended up running that javascript on my webView in webViewDidFinishLoad:. I have a single div element wrapping my content called body, so my code looks like:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *string = [_webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"body\").offsetHeight;"];
    CGFloat height = [string floatValue] + 8;
    CGRect frame = [_webView frame];
    frame.size.height = height;
    [_webView setFrame:frame];

    if ([[self delegate] respondsToSelector:@selector(webViewController:webViewDidResize:)])
    {
        [[self delegate] webViewController:self webViewDidResize:frame.size];
    }
}

I had to pad the height slightly as the original value didn't take into account the margin sizes, etc.

After I get the height, I make a call back to my delegate that the webview did resize so the layout can be done.