Change font size in the whole app with Ctrl+/-

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.


View source

Usage examples

Simplest
  1. 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.

  1. <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:

  1. <body scroll="no" onLoad="document.getElementById('${application}').focus();"/>

Does not work in FireFox and seems that there is no way to fix this.

12 responses to “Change font size in the whole app with Ctrl+/-”

  1. [...] Change font size in the whole app with Ctrl+/- Runtime icons for Flex components [...]

  2. [...] 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 [...]

  3. 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?

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

  5. Any other information I can get for you?

  6. 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 ?

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

  8. In my previous post I meant ‘Ctrl 0′

Leave a Reply