- Don't Break the Browser
- Not the Browser Wars Again!
- Working the Workaround
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Working the Workaround
As was mentioned previously, getting the text size in the browser is not a trivial task because it is not offered in any way by the browser. Through some investigation, you'll find that you can trick the browser into giving you that information by using Flash MX's Screen object and being creative with JavaScript.
Internet Explorer, for example, lets you get the dimensions of DIV elements on the screen using the offsetHeight property. If you put text in a DIV, set your text size to Largest, and check the offsetHeight property of that DIV, you will notice that it returns a different height! Netscape Navigator and Mozilla offer similar access to the DIV's height, but through the slightly more complex getComputedStyle() function.
In Opera, JavaScript could not return any new information about the size of the DIV element when the text size was changed. However, Opera actually changes the size of everything on the page, including Flash movies. So if the page was zoomed 200%, the Flash movie dimensions would also be zoomed by that percentage. Using the Flash MX Screen object, you can determine the new size of the Flash movie.
Ultimately, through trial and error, we discovered that JavaScript needs to continuously check to see that the height of the DIV does not change. If it does, the Flash movie is drawn at the specific height of the DIV. The Flash movie uses the Screen object again to get the new height of the movie and sends that value to the main movie using the LocalConnection object. This method works for Internet Explorer 5 and up, Netscape 6 and up, and Mozilla 1 on both Windows and Macs.
For Opera on both Windows machines and Macs, it does not change just the text size, but it also scales the entire page to the specified percent. In this case, the Flash movie does all the work using the Screen object to determine the new percentage that the screen has been zoomed.
With a little more investigation, we were able to put together a list of design guidelines for our text-sizing workaround:
JavaScript must be used to determine whether the text size setting has changed. If it has, this must be communicated to the Flash movie.
JavaScript cannot be used to communicate directly to the Flash movie on the Web page because not all browsers support this communication. (As of the Flash MX release, Internet Explorer on Windows and Netscape 6.0 and above using the new r40 version of the Flash player are the only browsers to handle this, as advertised by Macromedia.)
Initially, a hidden frame was to be used to house the text size getter because it will need to make use of some generic elements on the page (such as a DIV). Unfortunately, because of an optimization to the Flash player (or a bug), if a Flash movie is run in a hidden frame, the Stage object (which is used to determine the height of the DIV on the page) returns null values for its height. So, for the Stage object to return the proper values, the Flash movie needs to be visible onscreen—at least 1 pixel of it, anyway. The Flash movie will use the LocalConnection object in Flash MX to communicate to your main Flash movie.
Because actual text point sizes are different across browsers and platforms, the percentage that the text has been scaled rather than a specific text point size is passed to the main Flash movie. This percentage can then be used in the main Flash movie to calculate the point size of text or to scale movie clips and text fields to a new size.
Now that the design guidelines are set, it's time talk about the JavaScript!