Specifying custom named unicode ranges in Flex

We’ve looked at general font embedding and unicode ranges before in previous examples (see “Embedding and animating fonts in a Flex application” and “Specifying certain unicode-ranges for embedded fonts”), but this example will show you how you can embed a named range of unicode characters into an application by editing your flex-config.xml file and specifying unicode ranges.

Full code after the jump.

OK, so the first question you may have is: “Sounds great, but why would I want to embed a font in my Flex application?”. Reasonable question, and I’m glad you asked. Well, perhaps you want to rotate some text, or set the alpha on some text so it is semi-transparent. In order to do either of these things you need to embed a font face into your Flex application. But as you may expect, embedding fonts and additional assets make your SWF file sizes bigger, so you should be aware of a few small details before you go embedding a number of fonts in your applications.

Lets start off with a simple example. Consider the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/24/specifying-custom-named-unicode-ranges-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:Label text="The quick brown fox jumped over the lazy dog."
            fontFamily="Base02Embedded"
            fontSize="16"
            rotation="15"
            truncateToFit="false" />

</mx:Application>

This code defines a @font-face style in an <mx:Style /> block. Note that it only specifies a src attribute and fontFamily style. What the code is doing is embedding the whole available unicode range for the Base02 font.

If you export a release (non-debugging) version of the previous example, the SWF is 272,788 bytes (approximagely 266 KB). By comparison, if you didn’t embed a font into your application, the SWF size would only be 152,415 bytes (approximately 148 KB, or 55% of the embedded font example SWF file size).

So, what can we do if we want to embed a font, but not increase the size of our SWF file significantly? Correct, you can specify unicode ranges! Note that we have a few options:

1) The following unicode range specifies the whole range of uppercase, lowercase, symbols and punctuation:

unicode-range: U+0021-U+007B;

2) The following unicode range specifies all uppercase, lowercase characters as well as numbers:

unicode-range:
    U+0030-U+0039, /* 0-9 */
    U+0041-U+0051, /* Uppercase A-Z */
    U+0052-U+007A; /* Lowercase a-z */

3) The following unicode range specifies only the letters used in the string being displayed:

unicode-range:
    U+0054-U+0054, /* T */
    U+0061-U+007A, /* a-z */
    U+002E-U+002E; /* . (period) */

So now that we have a slightly better understanding of font embedding and unicode ranges, lets look at setting up our own custom ranges so we can specify unicode ranges by name instead of slightly cryptic unicode numbers.

First, locate your flex-config.xml XML document in your particular Flex SDK framework directory of choice. It should be located in your particular Flex SDK’s /frameworks/ directory. If you are using Flex Builder 3 standalone on Windows, that path would probably look something like the following:
C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flex-config.xml

Open up the XML file in your XML editor of choice. If you consider yourself a somewhat unlucky person, you may want to make a backup of the file before editing it. Scroll down until you find a section under <fonts>, then, locate the child node <languages>. You can see that there is currently a single language-range specified, although it is currently commented out. By default, the XML we’re interested in should look like this:

<languages>
    <language-range>
        <lang>englishRange</lang>
        <range>U+0020-U+007E</range>
    </language-range>
</languages>

Note that it specifies a <language-range /> node with the custom name “englishRange” and a unicode range of U+0020 through U+007E. To use this range, simply uncomment the XML node, and save the file. Note, you may need to clean or recompile your project in Flex Builder. At this point, you can do something like the following in Flex Builder:

<mx:Style>
    @font-face {
        src: local("Base 02");
        fontFamily: Base02Embedded;
        unicode-range: englishRange; /* was: U+0020-U+007E */
    }
</mx:Style>

As you can see, using a named custom unicode-range is a lot simpler, easier to remember, and a lot more reusable.

Similar to defining unicode ranges in your <mx:Script /> blocks, you can specify multiple ranges in your flex-config.xml file by separating the ranges with commas, as seen in the following snippet:

<language-range>
    <lang>UpperLower</lang>
    <range>U+0020, U+0041-U+005A, U+0061-U+007A</range>
</language-range>

This code embeds the space character (U+0020), uppercase characters (U+0041 to U+005A), and lowecase characters (U+0061 to U+007A). Then, to use the new range in your Flex applications, you can use the following snippet:

<mx:Style>
    @font-face {
        src: local("Base 02");
        fontFamily: Base02Embedded;
        unicode-range: UpperLower;
    }
</mx:Style>

If you want to specify multiple custom unicode ranges, simply add more children to the <languages /> node in the flex-config.xml file, as seen in the following snippet:

<languages>
    <language-range>
        <lang>englishRange</lang>
        <range>U+0020-U+0026, U+0027-U+007E</range>
    </language-range>
    <language-range>
        <lang>Uppercase</lang>
        <range>U+0020,U+0041-U+005A</range>
    </language-range>
    <language-range>
        <lang>Lowercase</lang>
        <range>U+0020,U+0061-U+007A</range>
    </language-range>
    <language-range>
        <lang>Numerals</lang>
        <range>U+0030-U+0039,U+002E</range>
    </language-range>
    <language-range>
        <lang>Punctuation</lang>
        <range>U+0020-U+002F,U+003A-U+0040,U+005B-U+0060,U+007B-U+007E</range>
    </language-range>
    <language-range>
        <lang>Basic Latin</lang>
        <range>U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E</range>
    </language-range>
</languages>

You may have noticed that last language-range, “Basic Latin”, had a space in the name. In order to use the custom unicode range in your Flex application, simply wrap the name in double-quotes, as seen in the following snippet:

unicode-range: "Basic Latin";

There you have it, using named unicode ranges in your Flex applications. For a few samples of common unicode ranges, check out the flash-unicode-table.xml XML file in the same directory as your flex-config.xml file. If you are using Flex Builder 3 standalone on Windows, that path would probably look something like the following:
C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flash-unicode-table.xml

One last word of advice. Since your flex-config.xml file is unique to each installed SDK, you may need to make the same changes to both your Flex 2.0.1 SDK builds and Flex 3 builds if you switch between SDKs regularly. Also, if you download nightly builds from the Flex 3 SDK nightly builds download page on the Adobe Labs site, you may need to back up your flex-config.xml file before overwriting the currently installed SDK directory.

Happy Flexing!