Obj-C Programing Tip: Scaling Text Content in a UIWebView -

Obj-C Programing Tip: Scaling Text Content in a UIWebView

Aug 18, 2013

This post describes a way to scale the text content that is presented within a UIWebview of your iOS app. Often times, there is a need to zoom in or zoom out the text content presented within UIWebview container in response to user actions. • Run a simple Javascript on the contents of the webview using the stringByEvaluatingJavaScriptFromString method in order to adjust the size of the text.

NSString *jsForTextSize = [[NSString alloc] initWithFormat:@&quot;document.getElementsByTagName(&#39;body&#39;)[0].style.
webkitTextSizeAdjust= &#39;%d%%&#39;&quot;, updatedFontSize*100/DEFAULTWEBVIEWFONTSIZE];
[self.myWebView stringByEvaluatingJavaScriptFromString:jsForTextSize];

NSString *jsForTextSize = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.

webkitTextSizeAdjust= '%d%%'", updatedFontSize*100/DEFAULTWEBVIEWFONTSIZE];

[self.myWebView stringByEvaluatingJavaScriptFromString:jsForTextSize];

In the JS above, DEFAULTWEBVIEWFONTSIZE refers to the default font size of the text content presented within the web view and updatedFontSize refers to the desired font size. So for example, if DEFAULTWEBVIEWFONTSIZE is 18 and updatedFontSize is 9, then updatedFontSize*100/DEFAULTWEBVIEWFONTSIZE evaluates to 50.

• Next step is to adjust the frame height of the web view so the scaled text content is visible. The simplest way to do this is to have the UIWebView as a subview of a scrollable view (UIScrollView or its subclass ). That way, you can adjust the web view frame height and correspondingly, the content size of the scroll view that encompasses it. Adjusting the web view height is a bit tricky as described below.

The sizeThatFits method on web view returns a size that best fits the content. The problem with this is that when you scale up, the method returns the updated size but if the web view is large enough to display the specified content, then scaling down will not update the frame size but instead, the current frame size is returned.

So first , reset the current frame height of the web view to a small value like 1.

CGRectadjustedFrame = self.myWebView.frame;
   adjustedFrame.size.height= 1;
   self.myWebView.frame= adjustedFrame;

CGRectadjustedFrame = self.myWebView.frame;

adjustedFrame.size.height= 1;

self.myWebView.frame= adjustedFrame;

Now, obtain the frame size that would best fit the content. Since the current frame size is 1, we are scaling up. Update the frame size of the web view with the new frame size.

<span style="font-size: 14px;"><code>   CGSizeframeSize = [self.myWebViewsizeThatFits:CGSizeZero];
    adjustedFrame.size.height= frameSize.height;
    self.myWebView.frame= adjustedFrame;</code></span>

<span style="font-size: 14px;"><code> CGSizeframeSize = [self.myWebViewsizeThatFits:CGSizeZero];

adjustedFrame.size.height= frameSize.height;

self.myWebView.frame= adjustedFrame;</code></span>

Finally, update the content size of the UIScrollView containing the web view to accommodate the scaled content.

<span style="font-size: 14px;">  <code>  CGSizescrollViewSize = self.myScrollView.contentSize;
    scrollViewSize.height= adjustedFrame.size.height+ self.myWebView.frame.origin.y;
    self.myScrollView.contentSize= scrollViewSize;
</code> </span>

<span style="font-size: 14px;"> <code> CGSizescrollViewSize = self.myScrollView.contentSize;

scrollViewSize.height= adjustedFrame.size.height+ self.myWebView.frame.origin.y;

self.myScrollView.contentSize= scrollViewSize;

</code> </span>

You can download a sample project that scales the text content of web view from here. Shown below are some screenshots of the app.

1 comment

Ashok Radadiya

September 30, 2016 at 7:00 am

# 1

please check your objective C demo not load long text to zoom.
it scale when MEMORY Warning issue is appear and application is crash.
pelase help me.

Reply

Trackback e pingback

No trackback or pingback available for this article

On my work, technology and related stuff....