Making Flash movies obey browser text size changes
John Dowdell discusses the Top Anti-Flash Cliches, a topic I revisit regularly under the guise of "Flash Myths". Of course, accessibility makes the list (specifically, the perception that Flash lacks any sort of support for it.) How timely, then, to see Niqui Merret post a very simple example that demonstrates how to scale a Flash Movie in response to text size changes in the browser.
If you use relative sizing for the text in your web pages (and you should), users can increase or decrease the text size to meet their personal visual requirements (FireFox: View → Text Size → Increase/Decrease). This is, of course, an essential accessibility requirement for users with poor eye-sight. Beyond that, however, it also benefits users with 20/20 vision who are in conditions of reduced readability due to environmental factors. I do most of my work on the road on my notebook computer and regularly find that increasing the font size makes sites easier to read when there is a lot of glare. The same goes if it's late and my eyes are tired.
Niqui's method scales the whole Flash movie in proportion to the font size change in the browser. This is a simple and effective method that doesn't require any changes to the Flash movie or any special architectural considerations. It is a method that will work with any existing Flash movie. As such, it is easy to implement and I suggest that we popularize it. As a first step, I would love to see UFO and SWFObject implement support for it.
The next step is to create a solution that provides developers with more control over responding to browser text size changes. This can be achieved by passing the text change event to Flash by using ExternalInterface. This way, Flash developers can listen for the event (say BrowserTextSizeIncrease and BrowserTextSizeDecrease) and respond to it. The major use case for this is to change only the size of the fonts in a Flash movie in response to browser text size changes (without scaling the whole interface or any images that might be in it.) Bob Corporaal is working on just a such a solution and will apparently be releasing the source for it soon.
OK, so after writing the last paragraph, I actually went ahead and implemented it.
It also appears that the behavior of the Flash Player with regard to this issue varies depending on the platform and browser that it is running on. Here is a brief summary:
|Platform||Browser||Flash player behavior|
|OS X||FireFox 126.96.36.199||Captures ⌘ =|
|OS X||Firefox 2rc1||Captures ⌘ =|
|OS X||Safari||Doesn't capture either|
|OS X||Camino 1.0.2||Doesn't capture either|
|OS X||Opera 9||Captures ⌘ = and ⌘ -|
|Win XP||FireFox 188.8.131.52||Captures ⌘ = and ⌘ -|
|Win XP||IE 6||Captures ⌘ = and ⌘ -|
|Win XP||Opera 9||Captures ⌘ = and ⌘ -|
Update: I updated the above table with information for Camino and Firfox 2rc1, supplied by Bob Corporaal.
Note: Opera 9.0.2, especially on Windows, appears to have some issues with the text size keyboard shortcuts in general. Specifically, I can't use the + or Command/Ctrl + keys to increase the zoom level after reducing it.
The good news is that the workaround works on all of the above browsers/platforms. On Opera 9.0.2 under Windows, the Flash movie appears to lose focus after a resize and so you have to click on it again before using the keyboard shortcut. On Opera under OS X, I actually prefer the CSS-based scaling as opposed to the default zoom behavior in Opera.
The bad news is that the workaround isn't perfect. Specifically, mixing this workaround with the browser's default text size change feature can result in undesired behavior. For example, if you increase the font size all the way using the workaround (with the Flash movie in focus), then decrease the font size using the regular browser text change commands (with the main HTML file in focus) and then return to the Flash movie to increase the font size again, it will not work since the style sheet with the largest font size will already be selected with its text size reduced through the browser controls.
I'm going to talk with the Flash Player team at Adobe about this issue. I'm not currently sure whether they are aware of the problem (but knowing them, they probably are, so a solution may already be in the works.) In the meanwhile, this workaround will allow users to increase the text size of Flash movies that have focus using keyboard shortcuts.