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.
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:
| Platform | Browser | Flash player behavior |
|---|---|---|
| OS X | FireFox 1.5.0.6 | 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 1.5.0.7 | 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.
The Making Flash movies obey browser text size changes article by Aral Balkan, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial 2.0 UK: England License.
Subscribe to my blog
Gabriela Portilla
Clark Wilkins
Bob
Erik Hansen
duvar kağıtları
Timbo
You know, I’m really getting interested in the possibilities of javascript and flash since Robert Taylor’s excellent presentation on “Browser Power” at FlashForward. This is a great example. Thanks!
September 25th, 2006 at 5:44 pmDan
Would it not be better to just change the size of the text within the Flash movie? That way it wouldn’t destroy your page layout.
September 25th, 2006 at 5:58 pmaral
Hey Dan,
Take a look at the sample that Bob has (linked from my post, above.) It does just that.
Scaling the whole movie is a simple solution that doesn’t require any special code in the SWF and is thus easy to use. Ease of use is essential for developer adoption. It’s a little something that you can add to your Flash application or movie to make it more accessible with almost no effort.
September 26th, 2006 at 12:04 amjig
will this work even thou i have a
September 26th, 2006 at 4:21 amStage.scaleMode = “noScale”;
in my swf?
Tink
Not sure what Bob’s method is, but couldn’t u just create one static class that your register all TextFields with that you want to resize. Once it picks up the event from js, it just resizes all fields registered in that class.
September 26th, 2006 at 10:30 amChris Heilmann
Paul Sowden’s CSS switcher is a bad choice, as it depends on scripting to offer different styles. A more bullet-proof choice is UDASSS http://24ways.org/advent/introducing-udasss
September 26th, 2006 at 11:49 amMatt
I don’t think this is an issue for content developers quite frankly - it’s an issue for browser developers. Check out a flash movie in Opera and use Opera’s zoom control to change document size - THAT’S what Firefox and IE should be doing.
September 26th, 2006 at 12:46 pmaral
Hi Chris. I just looked at UDASSS and it works with server-side technology. This workaround won’t work in any case if JavaScript is disabled. And it is really a workaround. The issue has to be solved by either the Flash Player team or the browser manufacturers (depending on where the issue is.) Wouldn’t adding server-side code to the workaround make it even scarier for developers to implement it?
September 26th, 2006 at 12:59 pmaral
Matt: I’m not impressed with Opera’s scale functions at all. The keyboard shortcuts are not working for me (version 9.0.2). ⌘ = doesn’t work at all and ⌘ - makes the page tiny. (I have the same problem with Opera 9.0.2 under Windows). Using the menu controls *does* work.
To test, I tried Opera’s zoom controls on the Flex Style Explorer and they don’t have any effect whatsoever on the SWF.
I think Opera is trying to be too clever with this feature. Personally, I would prefer zoom-like features at the Operating System level. In the browser, I find the ability to change the text size to be an essential feature that I use quite often.
Next, I tried it on one of my Flex 2 Quick Start Tutorials — the one on Validating Data — which has a mix of HTML and Flex content on it. Again no effect on the SWF files. The Flex applications on that page are set to an absolute width/height. Using Opera’s zoom controls on a page like my blog does scale up simple Flash movies like the SWF of my avatar. So, basically, even if browsers implemented the sort of zoom feature that Opera has, it wouldn’t affect every SWF out there.
I do agree with you, however, that browser manufacturers should expose more accessibility information to plugins so that plugins can respond easily to the preferences that users specify for a page. However, at the end of the day, the onus is still on developers to make sure that they embed their SWF files correctly so that they scale properly in response to the user’s text size preferences.
September 26th, 2006 at 1:21 pmaral
jig: I just made a post in response to your question. Check it out.
September 26th, 2006 at 1:45 pmBob Corporaal
Just implemented your suggested workaround and it works fine as far as I could test it: updated text resizing
September 29th, 2006 at 11:51 amAlan Shaw
Aral: I’m using Opera, FireFox, and Maxthon every day, and only Opera does anything sane with resizing. Firefox zooms only the text, and Maxthon (an IE derivative) sometimes just shifts the content left or right! I’m only at Opera 9.00; is 9.02 that different?
> ⌘ = doesn’t work at all
What is that character before the =? For me, it appears as a thick vertical bar in Opera and as a question mark in Firefox! The 10% zoom in and out shortcuts are just and - in Opera.
I have to agree with Matt. Zoom is not just for text. I sure hope that the HTML engine in Apollo will be Opera’s!
October 5th, 2006 at 5:21 amPaul Betlem
Aral,
Niqui pointed me to the key capture issue that was described here. Thanks for defining the problem with such specificity - it helps a lot.
I’ll ask an engineer on the Flash Player team to investigate the source of the problem so we can address it.
— Paul
January 11th, 2007 at 6:35 pmFlash Player Engineering
Aral
Thanks, Paul. Niqui mentioned that she’d sent you a link. Thank you for taking ownership of this.
January 12th, 2007 at 12:33 amPeter
This may be related to some of the problems you mentioned above, but in Firefox 2.0.0.1 it looks like it doesn’t inherit size changes from previous pages. If I increase my text size (apple plus on mac) and then visit your test page the flash movie is at it’s original size. Increasing and decreasing from there starts to scale the movie but it gets out of proportion. It is still interesting however.
January 18th, 2007 at 6:47 pmchristab
Can anyone help me? Is it possible to make flash player not work for mac users? I was on tnt.tv and their shows online don’t work for mac users even though it is a flash file. Why would progammers do this? I know it is a flash file because you control click the file and it says it is a flash9 file but still will not work in safari or foxfire. This is very confusing to me. Please let me know if their is a work around. thanks
August 4th, 2007 at 4:56 pmM.S. Babaei
wow, that’s greate…
February 1st, 2008 at 1:40 am