Making Flash movies obey browser text size changes

Flash movie obeying 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.

The ability to change the size of text in web pages is a great accessibility feature but what happens when there is a Flash movie or application embedded in the page? By default, nothing at all. Changing the text size in your browser doesn't affect the Flash movie at all. This, of course, is not good. The Flash movie should grow or shrink in proportion to the text size change in the main HTML page so that text in the Flash movie is as easy to read as the text in the main page. Thankfully, Niqui has concocted a very simple way to implement this functionality using a combination of Bobby van der Sluis's UFO (or Geoff Stearns' SWFObject) to embed the SWF using progressive enhancement and JavaScript from Lawrence Carvalho and Christian Heilmann's Text-Resize Detection article from A List Apart.

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.

In testing Niqui's solution and Bob's sample, I noticed that in FireFox on OS X, when the Flash movie is selected, you cannot use the ⌘ = shortcut in FireFox to increase the font size. I assume that the Flash Player is capturing this key combination and not releasing it to the browser (⌘ -, strangely, works.) The immediate workaround that comes to mind is to capture the key combination in Flash and then release it to the browser using ExternalInterface and increase the text size in response to this via JavaScript using a technique similar to the one presented by Bojan Mihelac in his article Power to the people: relative font sizes on A List Apart.

OK, so after writing the last paragraph, I actually went ahead and implemented it.

You can take a look at the result (click in the Flash movie before using the keyboard shortcuts to change the text size) and download the source.

The workaround uses Bojan's solution and isn't trivial to implement. It requires the creation of several style sheets and use of Paul Sowden's style-sheet switcher. Although not perfect, I haven't been able to find a neater solution for changing the text size using JavaScript.

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:

PlatformBrowserFlash player behavior
OS X FireFox 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 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.