Thursday, October 30, 2008

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


4 comments:

Logan said...

It doesn't work in Safari on the Mac either. FF & Opera on the Mac change the current base font size (in pixels) label value (though inconsistently, hitting Cmd+ or Cmd- doesn't always work, and when it does, the ordering is weird (19,16,17,19,18,20, etc.). The text in the app never changes size, only the pixel size label.

Rob McKeown said...

Thanks for the update. Like I said it is more of a proof of concept. I'm sure it could be made to work on mac browsers. Unfortunately, I don't have a mac to test it out on.

Anonymous said...

Do you like playing in the game which you need to use maple mesos, when you do not have mesos, you must borrow cheap mesos from friends, or you buy maplestory mesos. If you get maple story mesos, you can continue this game.

Marc Dennert said...

Hey Rob, I'm the developer for Inspire. Just wanted to let you know I'm working on correcting the font size changing issues on the site today actually. More of the same headlines, comments, etc. will respect the size controls. Your settings will also be remembered across sessions.

Eventually, I would love to have the browser controls work on the text size, but in fact, many browsers are moving away from text size controls and just zooming the whole page.

Thanks for your feedback on the site and glad you like it overall.