Setting character ranges -- Flex 2

By specifying a range of symbols that compose the face of an embedded font, you reduce the size of an embedded font. Each character in a font must be described; if you remove some of these characters, it reduces the overall size of the description information that Flex must include for each embedded font.

You can set the range of glyphs in the flex-config.xml file or in the font-face declaration in each MXML file. You specify individual characters or ranges of characters using the Unicode values for the characters, and you can set multiple ranges for each font declaration.

If you use a character that is outside of the declared range, Flex displays nothing for that character.

The techniques in this section focus on setting character ranges in Flex applications. However, if you embed a FlashType font in your Flex application, you can restrict the character range in Flash. For more information, see Embedding FlashType fonts.

Subtopics

Setting ranges in font-face declarations

You can set the range of allowable characters in an MXML file by using the unicode-range attribute of the font-face declaration. The following example embeds the Akbar font and defines the range of characters for the font in the <mx:Style> tag:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style> 
        @font-face {
            fontFamily: akbar;
            src: local("akbar");
            unicode-range:
                U+0020-U+0040, /* Punctuation, Numbers and Symbols */
                U+0041-U+005A, /* Upper-Case A-Z */
                U+005B-U+0060, /* Punctuation and Symbols */
                U+0061-U+007A, /* Lower-Case a-z */
                U+007B-U+007E; /* Punctuation and Symbols */
        }
        TextArea { fontFamily: akbar; }
    </mx:Style>
    <mx:TextArea text="This is My Text Area"/>
</mx:Application>

Setting ranges in flex-config.xml

You can specify the language and character range for embedded fonts in the flex-config.xml file by using the <language-range> child tag. This lets you define the range once and use it across multiple @font-face blocks.

The following example creates an englishRange and an otherRange named ranges in the flex-config.xml file:

<fonts>
    <language-range>
        <lang>englishRange</lang>
        <range>U+0020-U+007E</range>
    </language-range>
    <language-range>
        <lang>otherRange</lang>
        <range>U+00??</range>
    </language-range>
</fonts>

In your MXML file, you point to the defined ranges by using the unicode-range attribute of the @font-face declaration, as the following example shows:

@font-face {
    fontFamily: Excelsior; 
    src: local("akbar");
    unicode-range: "englishRange"; 
}

Flex includes a file that lists convenient mappings of the Flash UnicodeTable.xml character ranges for use in the Flex configuration file. For Adobe Flex Data Services, the file is located at flex_app_root/WEB-INF/flex/flash-unicode-table.xml; for Adobe Flex SDK, the file is located at flex_install_dir/frameworks/flash-unicode-table.xml.

<language-range>
    <lang>Latin I</lang>
    <range>U+0020,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183
</range>
</language-range>

To make ranges listed in the flash-unicode-table.xml file available in your Flex applications, copy the ranges from this file and add them to the flex-config.xml files.

Detecting available ranges

You can use the Font class to detect the available characters in a font. You do this with the hasGlyphs() method.

The following example embeds two fonts and restricts the character ranges in them. The first font only includes support for the letters A and B. The second font includes all 128 glyphs in the Basic Latin block.

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="checkCharacterSupport();">
    <mx:Style>
        @font-face{
            font-family:myKiesling;
            src:url("assets/kiesling.ttf");
            /* Limit range to the letters A and B. */
            unicode-range: U+0041-U+0042; 
        }
        @font-face{
            font-family:myKramer;
            src:url("assets/kramer.ttf");
            /* Set range to the 128 characters in the Basic Latin block. */
            unicode-range: U+0041-U+007F;
        }
    </mx:Style>
    <mx:Script><![CDATA[
        public function checkCharacterSupport():void {
            var fontArray:Array = Font.enumerateFonts(false);
            for(var i:int = 0; i < fontArray.length; i++) {
                var thisFont:Font = fontArray[i];
                if (thisFont.hasGlyphs("DHARMA")) {
                    trace(thisFont.fontName +" supports these glyphs");
                } else {
                    trace(thisFont.fontName +" does not support these glyphs");                                          
                }
            }
        }
    ]]></mx:Script>
</mx:Application>

Comments

Dr Rob Saunders said on Jul 18, 2006 at 4:35 PM :

The section on "Setting ranges in flex-config.xml" has an error. The xml
code given is:

<fonts>
<language-range>
<lang>englishRange</lang>
<range>U+0020-U+007E</range>
</language-range>
<language-range>
<lang>otherRange</lang>
<range>U+00??</range>
</language-range>
</fonts>

but this code misses the <languages>...</languages> tags that must go
around the set of <language-range>...</language-range> tags.