Follow

Font Resizing for iOS

The font resizing tool can be customised with specific increments and upper and lower font sizes.

In the DocumentViewController.m find this method;

- (IBAction)cycleFontSize:(id)sender {
  [documentManager clearRenderState];
  [pageControl cycleFontSizeFrom:1.0 to:1.25 inStepsOf:0.125];
  [pageControl saveFontSizeToUserDefaults];
  [Analytics logChromeEvent:@"FontSize"];
}

The cycleFontSizeFrom: x to: y digits map to the percentage font-size on the html body element - when x = 1.0, font-size=“100%”. TheinStepsOf parameter defines the size of the increments, and therefore how many increments there will be, until the largest font size is reached and the cycle returns to the smallest font-size. The font size is applied by running some javascript that applies the required size whenever a page is loaded.

The default javascript does this:

document.body.style.fontSize = (%f*100) + '%%' 

If you want more control than this over the font resizing, you can write some javascript that will be used instead of the default script. Insert a line similar to this in the viewDidLoad method file in DocumentViewController.m. This example adds the class 'large' to the body tag if the size is greater than 1. Otherwise it removes it.

[pageControl setFontSizeScriptString:@"document.body.className = document.body.className.replace(/ large/g, '') + (%f > 1 ? ' large' : '');"];

For this example, you would probably have 2 steps in cycleFontSize - 1 for standard, and 2 for large:

[pageControl cycleFontSizeFrom:1.0 to:2.0 inStepsOf:1.0];

and your CSS would apply the desired larger for style when the “large” class was applied the body of the page.

Variations in Pugpig Versions

The font sizing method has been updated with the Pugpig framework updates. These are the highlights;

Updating from v 1.5 to 1.6

In 1.5 the font resize was based on increasing the webkitTextSizeAdjust, unfortunately this technique doesn't work on Android devices, so from version 1.6 onward, the default method for changing the font size uses the fontSize style instead. 

Updating from v 1.6 to 1.7

No change

Updating from 1.7 to 1.8

The font-sizing script now applies the font-size change to the HTML element rather than the body, this means you are able to use REMs as well as EMs in your mark-up.

You can read about writing compatible HTML

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk