Problem
Browser supports changing page font size with C+/- and Ctrl+scrolling, but Flex applications are not affected by this. People with failing sight can not use such applications.
Solution
Work with StyleManager and set "fontSize" at runtime.
Detailed explanation
There is a simple way to change font size in the Flex application. This works through styles without any serious restrictions (+ view source). For CSS classes that use greater or smaller font size "fontSizeDelta" style should be specified with the delta for example 2 or -1:
<mx:Style>
.header
{
fontSizeDelta: 3;
}
</mx:Style>
Code that actually changes the font size:
private function applyFontSize(fontSize:Number):void
{
// Loop through all styles and set
// new "fontSize" value based
// on new size and "fontSizeDelta" style
var selectors:Array = StyleManager.selectors;
for each (var selector:String in selectors)
{
var declaration:CSSStyleDeclaration =
StyleManager.getStyleDeclaration(selector);
var delta:Number = declaration.getStyle("fontSizeDelta");
if (delta)
{
declaration.setStyle("fontSize", fontSize + delta);
StyleManager.setStyleDeclaration(selector, declaration,
false);
}
}
// global style is applied to all Flex visual components
var global:CSSStyleDeclaration =
StyleManager.getStyleDeclaration("global");
if (!global)
global = new CSSStyleDeclaration("global");
global.setStyle("fontSize", fontSize);
// update styles only on last change
StyleManager.setStyleDeclaration("global", global, true);
}
private function addedToStageHandler():void
{
stage.addEventListener(KeyboardEvent.KEY_UP, my_keyUpHandler);
}
private function my_keyUpHandler(event:KeyboardEvent):void
{
if (event.ctrlKey)
{
var keyCode:uint = event.keyCode;
// Ctrl +/up
if (keyCode == 107 || keyCode == 187 || keyCode == 38)
fontSize++;
// Ctrl -/down
else if (keyCode == 109 || keyCode == 189 || keyCode == 40)
fontSize--;
}
}
In order to make Ctrl+/- rigth after application starts (without clicking on it to give focus), set focus automatically:
<body scroll='no'
onLoad="document.getElementById('${application}').focus();">
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Report abuse
