Browser supports changing page font size with Ctrl+/- and Ctrl+scrolling, but Flex applications are not affected by this. People with failing sight can not use such applications.
Solution for Flex 4
Work with StyleManager and set fontSize style at runtime. Here is FontSizeManager.as [plain] that does all the job.
Usage examples
Simplest
-
new FontSizeManager();
Now pressing Ctrl+ will increase font size in the whole application (if it is not set manually, see “Known issues” later).
Bigger or smaller
If some component need to have font size 2 pixels bigger then others, set it’s styleName to "fontSizeDelta2". The same
"fontSizeDelta-3" will make font size 3 pixels less then usual.
-
<s:label text="I'm 2 pixels bigger" styleName="fontSizeDelta2"/>
Own CSS declarations
Use “fontSizeDelta” style property to make FontSizeManager
inject corresponding fontSize in style at runtime:
.header
{
fontSizeDelta: 2;
}
Known issues
Note: FontSizeManager can not affect styles and components
that have fixed fontSize:
.popupText
{
fontSize: 11px;
}
<s:Label text="I'm always 11px" styleName="popupText"/>
<s:Label text="Me too" fontSize="11"/>
Giving focus to the application on startup
In order to make Ctrl+/- work right after application starts (without clicking on it to give focus), set focus automatically:
-
<body scroll="no" onLoad="document.getElementById('${application}').focus();"/>
Does not work in FireFox and seems that there is no way to fix this.
[...] Change font size in the whole app with Ctrl+/- Runtime icons for Flex components [...]
[...] uploaded a font size changer based on Maxim Kachurovskiy’s component that one can use to change the font size of Flex applications since the browser’s [...]
I tried to use the font changer, but it didn’t work for me. Obviously I missed a step somewhere.
I copied the source and put it in my class directory. I imported that class into the main mxml.
I changed my main mxml by adding a script block:
What else was I suppose to do?
Can’t see your script block since there seem to be some angle brackets.
Since I can’t post code, I’ll try to describe it.
“init” is called at line 95 – it has the fontsize variable instantiated at line 58. Above it are the variable and the import for the class.
Next in the error chain is initialize() in the FontSizeManager class at line 126.
Next is line 224: setFontSizeToStyles() in the FSM class.
Next is line 254: declaration.setStyle(“fontSize”, getFontSizeForDelta(delta));
Then it goes to system stuff and times out.
Flashbuilder 4.0.1 build 277662. SDK 4.1.
Any other information I can get for you?
Dear Jerry, sorry that you didn’t hear back from me about this issue. Will check it right now.
Jerry,
Just checked all this out under Flex 4.1. It works in basic test project.
Project: http://kachurovskiy.com/f/ria/10/fontSizeManager/FontSizeTestApp.html
Source: http://kachurovskiy.com/f/ria/10/fontSizeManager/srcview/index.html
If you got some issues please reproduce it on test project, package it into FXP (File -> Export Flash Builder Project) and send me a link to that package.
You can also paste code to http://pastebin.com/ and place a link here.
Thank you!
Thank you for a useful post. In complex applications, there may be hundreds of UI components that originate the keyboard or mouse events. It’s hard to ensure that they will all behave properly, i.e. not interfere with the global handler. With this in mind:
- shouldn’t the global event listener be registered for the capture phase rather than the (default) bubble phase ?
- shouldn’t the event propagation be stopped in the global event handler ?
Hi Christophe,
Thank you for using this FontSizeManager. Your suggestions are quite reasonable.
Another issue I am thinking about right now is how to improve the component performance? When you’ve got a lot of stuff on the screen it takes several seconds to change the font size. If you’ve got any suggestions on this, please let us here know. Thank you!
Maxim,
There is no trick or particular technique available to accelerate setStyle other than limiting the number of components in the application.
Regarding the keyboard shortcut, it may be nice to add support for ‘ 0′ which under some browsers, brings the font back to default font.
Cheers
In my previous post I meant ‘Ctrl 0′