Aral Balkan

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:

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.

Comments

• 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!

  by Alan Shaw on 2006-10-05 04:21:24

• 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!

  by Timbo on 2006-09-25 16:44:07

• 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.

  by Dan on 2006-09-25 16:58:15

• 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.

  by aral on 2006-09-25 23:04:02

• will this work even thou i have a Stage.scaleMode = "noScale"; in my swf?

  by jig on 2006-09-26 03:21:51

• 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.

  by Tink on 2006-09-26 09:30:29

• 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

  by Chris Heilmann on 2006-09-26 10:49:42

• 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.

  by Matt on 2006-09-26 11:46:04

• 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?

  by aral on 2006-09-26 11:59:52

• 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.

  by aral on 2006-09-26 12:21:25

• [...] Either you don't have the Flash Player installed or SWFObject wasn't able to detect it. Download the Flash Player. // 0)) { document.getElementById('flashPlayerInfo').innerHTML = "You have Flash player "+ version['major'] +"."+ version['minor'] +"."+ version['rev'] +" installed. Detected by SWFObject."; } // ]]> « Making Flash movies obey browser text size changes [...]

  by Obeying browser text size changes when using noScale at Aral Balkan on 2006-09-26 12:43:16

• jig: I just made a post in response to your question. Check it out.

  by aral on 2006-09-26 12:45:18

• [...] Finally I was not the only one making the connection with Flash. At the same time Nique Merret came up with a more basic solution that just scales the whole Flash div. Easier to use but with no direct control from Flash. And Aral Balkan discusses some issues with the Flash Player intercepting the keyboard commands for text resizing. [...]

  by reefscape.net » Blog Archive » Browser integration: resizing text on 2006-09-26 22:54:43

• [...] Aral Balkan pointed out a workaround which lets Flash handle the text resizing in case it receives the keystrokes. The resizing is then done by switching between different stylesheets. This workaround is now implemented in a new version of the classes. [...]

  by reefscape.net » Blog Archive » resizing text headaches on 2006-09-29 10:26:53

• Just implemented your suggested workaround and it works fine as far as I could test it: updated text resizing

  by Bob Corporaal on 2006-09-29 10:51:00

• [...] At the same time, I noticed that the Flash Player doesn’t work correctly with the browser keyboard shortcuts for the Increase Text Size and Decrease Text Size commands in various browsers. I documented the problem and presented a workaround on Monday, in my post, Making Flash movies obey browser text size changes. [...]

  by Flash Platform text resizing accessibility solutions mature at Aral Balkan on 2006-09-29 12:43:25

• [...] Making Flash movies obey browser text size changes [...]

  by Technikwürze » Technikwürze 51 - Das Comeback von Flash on 2006-12-19 06:27:49

• 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 Flash Player Engineering

  by Paul Betlem on 2007-01-11 17:35:37

• Thanks, Paul. Niqui mentioned that she'd sent you a link. Thank you for taking ownership of this.

  by Aral on 2007-01-11 23:33:09

• 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.

  by Peter on 2007-01-18 17:47:20

• 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

  by christab on 2007-08-04 15:56:40

• wow, that's greate...

  by M.S. Babaei on 2008-02-01 00:40:43

• In Flex4, can we just use the scale effect on the application container to make this work?

  by daniel on 2010-04-26 17:44:55

• Hi, did you see any progress with this I can say it's kind of fine when you have fixed size SWF because div resizng will keep aspect ratio, and StageScaleMode.EXACT_FIT will do the job my problem is that I getting embedding flash size from parameters and that's what is ruining EXACT_FIT old thing but seems still very actual ) thanks

  by MrSteel on 2010-07-09 19:08:55

• i could do with your help, i have a similar problem with my website http://www.roberts-creations.co.uk when i resize the text with Ctrl and +the flash move does resize with it, could you give me a hand implementing your workaround ? Regards Chris

  by Chris Roberts on 2011-04-11 14:28:57

• Valuable information. Lucky me I discovered your website accidentally, and I am surprised why this twist of fate did not happened earlier! I bookmarked it.

  by tonery hp on 2012-12-27 19:16:28