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

Posts Tagged ‘dynamic text’

No comments

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 comment

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.
 

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.

 

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.

 

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

 

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