Posts Tagged ‘dynamic text’
Supporting Dynamic Text in your iOS apps
I recently gave a talk on Dynamic Fonts at Cocoaheads meeting. You can download the presentation and sample code from here.
iOS7 introduced a cool feature called Dynamic Fonts. What it essentially allows you to do is to set your preferred reading text size in Settings (General or Accessibility) app of your phone and voilà, all apps that support dynamic type automatically adjust to display text content according to the preferred size setting
In this post, I’ll go over what you would need to do to support dynamic type within your apps so that yours will be one of the cool apps that reacts to the preferred text size change!
UITextKit, Text Styles and Font Descriptors
iOS7 introduced UITextKit – a powerful framework that allows you to support rich text content, layouts and without the complexities of drawing it with Core Text or having to use UIWebView.
An important component of UITextKit is TextStyles. Text Styles describe an intended use of a font .
The table below shows the list of supported text styles and the font descriptors that define them for the case when we set the preferred text size slider settings to the center.
|
Text Styles
|
Font Descriptor
|
|
UIFontTextStyleHeadline
(headings) |
NSCTFontUIUsageAttribute = UICTFontTextStyleHeadline;
NSFontNameAttribute = ".AppleSystemUIHeadline"; NSFontSizeAttribute = 17 |
|
UIFontTextStyleSubheadline (more…)
|
|
1 2 3 |
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.
|
1 2 3 |
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.
|
1 2 3 |
<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.
|
1 2 3 4 |
<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.
.png)
