What is the best way to handle English and Chinese in a Flex application?

Question

I have a requirement to be able to provide a flex component in English and several asian languages. I have looked at the flex documentation and it seems that I have to build several swf's, which feels wrong.

Does anyone know of a straightforward and practical way of bundling string resources in different languages and handling the fonts?

Answer 1

We use Flex for the client part of our application and support I18N via ResourceBundles.

Answer 2

In Flex 2.01 the language has to be built into the SWF - you can't change it at runtime. In Flex 3 you can switch language at runtime.

http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization

Answer 3

I guess you know the basics of how to localize a Flex application, but if you would like to know more there's a good and thorough description here: Runtime Localization.

In Flex 3 you have three options on how to solve your problem:

1. compile all languages into the SWF and switch language at runtime
2. compile a separate SWF for each language
3. compile no, or a default, language into the SWF and load additional languages at runtime

The first option is probably the most common, the least complex and doesn't have many drawbacks. The other two can be used if you have special needs, like having to keep down the size of the SWF at all cost, or need to load all strings from a database at runtime.

To implement the first option you create a resource bundle for each language (basically a number of .properties files that lives in a directory named after the locale, for example en_US for US English or sv_SE for Swedish). In the code you refer to strings by calling the resource manager:

<Label text="{resourceManager.getString('mybundle', 'mystring")'}/>

That will retrieve a string called "mystring" in the resource bundle compiled from "mybundle.properties" in the current locale.

To make sure each locale is actually compiled into the application you add -locale=en_US,sv_SE to the compiler flags (but change the en_US,sv_SE part to the languages you have resource bundles for). You also need to add the location of the directories to the source path: -source-path+=locale/{locale} (the "{locale}" part will automatically be replaced by the values of the -locale flag).

Now you have compiled all your languages into the SWF and can change languages at runtime. The way to do that is to modify the localeChain property of the resource manager:

resourceManager.localeChain = ["sv_SE", "en_US"];

With the settings shown above the resource manager will first look in the Swedish resource bundle, and secondly in the one for US English. You can set another order at any time, and doing so will change all texts in the application then and there.

I encourage you to read the description I referred to above, it explains this in greater detail, and most likely in a more understandable way. It also explains how to do some preparations you need to do before you can compile applications with locales other than en_US.

The other problem you have is with fonts. That one is trickier. The best thing would be to have a font that had the full Unicode range of characters, that way you would only need to embed that and any text could be displayed. However, that means that your options are a bit more limited. I know that there is at least one version of Aria in Windows that has an enourmous number of characters, and on the Mac there is a Helvetica (I think, or it might be Lucida Grande, or both) that also has most of the ones you need to display many asian languages.

Embedding all languages into the same SWF usually does very little to increase the file size, because text is very lightweight, but fonts are definitely not. Embedding a the whole Unicode version of Arial can increase the file size of a SWF by several megabyte, which kind of sucks for web applications. Depending on the situation you may have to compile one SWF per language, just because the font data would otherwise make the SWF unwieldy.

Answer 4

An important step left out above is to run the command:

copylocale.exe en_US sv_SE

from the bin folder of the sdk. This is in the article though.

Answer 5

Beware of fonts. System fonts aren't the prettiest but Asian fonts are too large to embed. We resorted to embedding Latin fonts for English and switching to system fonts for Chinese.

Be careful about rotating system fonts - your text will disappear. I think Flash 10 might have fixed this.

Also, be very careful with the font string you specify for Chinese.

Most OSes have nifty fall-back logic - if you specify Trebuchet and try to render a Chinese character, your OS might decide to use some Asian font instead. Flash seems to mess up this fall-back logic and switch between two or more Asian fonts dynamically. We had cases where mousing over a text block would switch the font.

To fix this, specify a font which includes all the characters you need (without falling back to some other font). You will need to test this across OSes, etc.