Changing the font size in a Flex app using the browser's built in controls

A week or so ago, I blogged about the text size buttons on the Adobe Inspire site. I started to feel guilty about criticizing the site. So I set out to investigate how that all works. The easiest way to do it, in my opinion, is to load a compiled CSS file at runtime that overrides the font size of the components or styleNames as necessary. I don't think it makes sense to do anything programatic that would make all fonts bigger since there may be cases where some text is sufficiently big as is. So, this way the control stays completely in the hands of the designer.

So, what I came up with was fairly simple: A component with a few buttons that when clicked load the correct stylesheet. This is probably good enough for most purposes. But what if a user is already familar with changing the font size using the browser's text zoom option? It would be nice to be able to hook into that. The following example does just that.

How does it work?

Using an example I found on www.alistapart.com, I was able to detect changes to the font size made through the browser in Javascript. At this point, the trick was to get that into the Flex app. The Flex Ajax Bridge makes that possible. Putting it all together does exactly what I wanted. 

This a proof of concept so the code could certainly be cleaned up. Feel free to make changes to the example for your own purposes. If you improve upon it, please post a comment with an example (and hopefully the source) here.

Here is what I know needs to be fixed:

• For some reason this doesn't seem to work in Google's Chrome browser
  
• When focus is in the Flex app, the keyboard shortcuts that normally work in Firefox (CTRL + and CTRL -) don't work because the keyboard events are "trapped" in Flash Player
• I have only verified that this works in IE and FF on Vista

Application | Source