Text formatting options for localization

Text formatting becomes an important consideration when you work with localized applications. Some languages require a certain font type to display text properly (for example, switching from a sans-serif font to a serif font to display Greek text properly). Other languages require a font that includes the range of Unicode characters for the target language (for example, turning on East Asian fonts in your operating system and looking for a suitable font to type and display Chinese text). You may also find that adjusting font size, style, embedding, etc., may improve the look of the text when switching between multiple languages.

Text formatting using ActionScript 3.0

You can format text in ActionScript 3.0 using the TextFormat object, HTML markup, or ActionScript's internal syntax for CSS. While these features are powerful when used inside of the Flash runtime environment, their true power in regards to localization is that the HTML markup and CSS can be supplied (plugged-in, essentially) from a web-standard external source. That means that content developers can supply text as needed and format it per the language without having to edit the Flash source file.

Tip: The strength of being able to write HTML markup and CSS directly in ActionScript is that it provides a quick and easy way for prototyping during development. For example, many separate style sheets can be written in a single page in ActionScript.

While there are many dynamic uses for the TextFormat object, I focus on CSS and HTML markup for the purposes of this article. These two approaches provide formatting options that require little or no additional coding for implementation.

Text formatting using HTML markup

Dynamic text fields in Flash allow for HTML formatted text display as an option. While only subsets of the HTML tags are supported, there's a lot you can do with this basic and easy-to-use feature. You can create text fields either visually in the Flash authoring tool or dynamically using ActionScript. You may also turn on the html property of the text field visually through the Property inspector while a text field is selected, or by using ActionScript.

Generally you will be supplying localized text to a text field using ActionScript because the text content will be supplied at runtime from an external source. The supported set of HTML tags can be used in a standard text file format or in an XML text node using a CDATA tag.

Example of HTML formatting in a standard text file:

&english=<font size="14">Hello, my name is <b>Dan</b></font>&

Example of an XML file including HTML formatting using a CDATA tag:

<lang><english>
<![CDATA[<font size="14">Hello, my name is <b>Dan</b></font>]]>
</english></lang>

Tip: When you supply HTML formatting inside an XML text node, wrap the text in a CDATA tag to avoid errors with illegal characters. This approach works well and can be seen in the sample files, but may be considered old-school when compared to the XLIFF format used by the Flash Strings panel. See the Flash CS3 Help pages (or Flash LiveDocs) for more information on the XLIFF format.

The previous examples show the content that will be imported into Flash using ActionScript and then assigned to a text field with its html property turned on.

For more information on which HTML tags are supported, see the following section in the Flash CS3 Help pages (or Flash LiveDocs): Learning ActionScript 2.0 in Adobe Flash > Working with Text and Strings > Using HTML-formatted text > About supported HTML tags.

Text formatting using CSS

Building on the concept of HTML formatting, you can utilize the power of standard CSS definitions to format text, text states, and text variations per language. A standard CSS file can be imported and assigned to a text field's styleSheet property to apply externally controlled formatting. Once the style sheet has been applied to a text field, you can use paragraph and span tags to assign custom style classes to fields at any point during runtime. Also, CSS definitions can be used to redefine supported HTML tags so that the HTML markup affects the text field formatting in a specific way.

Once you've defined your style sheets for each section of the application and for each language, you need a way to assign the appropriate CSS file to the text field displaying the associated language. Because the localized text is supplied dynamically at runtime, it makes sense that the server would supply the path to a style sheet at the same time. This technique works well for maximum flexibility when on-the-fly changes to the language may need to occur.

The following is an example of an XML file including HTML formatting and a style sheet path as an attribute:

<lang><english format="css/en_1.css">
<![CDATA[<p class="normalText">Hello, my name is 
<span class="emphasizedText">Dan</span></p>]]></english></lang>

Caution: The main issue to avoid while importing CSS paths at the same time as importing the localized text is the issue of timing. You have to load and initialize the style sheet before the text field can apply the styles and display the text as intended. To avoid timing issues, you should load the style sheets prior to their use, or else the text field should wait to display the text until after the load/complete event of the StyleSheet has fired.

If the timing of loading the style sheet and text at the same time does not work for you, your best bet is to load the style sheet first and then supply a reference to it in the localized XML data source. See the sample files for a working example configured in this way.

For more information on working with CSS formatting and which CSS tags are supported, see the following section in the Flash CS3 Help pages (or Flash LiveDocs): ActionScript 3.0 Languages and Components Reference > All Classes > StyleSheet class.

Tip: While using standard style properties for text formatting is the norm in Flash, you can also define nonstandard styles that can be interpreted by ActionScript. Doing so allows you to create some interesting effects by controlling the drawing API through style sheets, controlling component settings and animations through style sheets, and whatever else you can dream up.

Further text formatting options in ActionScript

Note that Flash Player 8 and later support fine-tuned text settings for anti-aliasing and improved font control. In addition, there are many possibilities for scriptable text formatting using the TextFormat object. See the Flash Help pages for more information on working with the TextFormat and TextRenderer classes.

Page 3 of 5

Previous Page

Next Page