ThinkingCap – plugged in to the head

After implementing i18n on web based applications using PHP the issue of multilingual interface AND content was revisited recently by me in Flex. I am no authority on implementing complex interfaces with support for i18n but I did manage to simplify the issue. Immediate thoughts for the flex application: Label replacement? XML? Real-time translation? Online translators? In this issue I will address some of the concepts and issues one should be aware of when attempting such a project.

The good thing about flex is the unicode support. Amen for that too! However, it does not yet support RTL languages such as Arabic which is a bit of a bummer but if you’re going to steer clear of Arabic, don’t get too comfortable because some Asian languages such as Mandarin don’t fit in too well (only when using embedded fonts).

To begin with, define the dynamic elements of the interface such as labels, instructions, tooltips and buttons which will need translation. Real-time translation will consume bandwidth so be wary and online translators are only good enough for testing the language support on the interface. DO NOT underestimate the power of the human brain when it comes to translation. We didn’t spend years learning grammar at school for no reason afterall.

Once the interface elements have been defined, try to lay out as much of the interface in MXML. Why, isn’t code faster? Sure it is, but try maintaining application state (do not confuse this with view states) with dynamic runtime instances and you’ll find yourself spending way too much time on parsing the component hierarchy. Putting interface elements down in MXML gives you a quick reference to the element thus reducing code and effort in retrieving instances of elements that need to be changed. I used a simple approach for storing translations or language-specific-labels for the elements by putting them in XML. You could get them straight off the DB as well, but remember XML can also be accessed locally (when using the app in a projector). The XML would look something like this:


file: interface.xml
...
<interfaceElements lang="en">
<interfaceElement itemId="btnMenu" label="Menu Button"/>
</interfaceEleemnts>
...

When the need for changing the element’s label arises, simply access it using its ID stored in XML.

this[xmlData.interfaceElements.interfaceElement[i].@itemId].label = xmlData.interfaceElements.interfaceElement[i].@label;

… assuming xmlData is the XML Object in which the xml data from the interface.xml file has been read and the code appears within a loop. So here with a single loop and minimal code we have managed to change the labels on the entire interface, well atleast what was put down as MXML.

What more now? Remember to specify the encoding your XML file as UTF-8 for unicode support. This way characters other than the latin character set can be inserted directly into XML.

The support for Asian languages seems to work somewhat weirdly in Flex 3. Not sure how it was in Flex 2. I’ve found through reading around the net that displaying some of the Unicode characters is OS dependent such that if the system font you specified does not contain that particular glyph, the flash player will attempt to use a font from the system that supports that character. Well bad luck if you’re using embedded Arial with nice anti-aliasing because the characters won’t show up at all. You could however use a Unicode capable font and specify the range of Unicode characters that you would like to embed. Unfortunately for me I need to use the Arial font face and Arial Unicode by Microsoft should work but I have not yet been able to do so. I get compiler errors when trying to embed glyphs from Arial Unicode MS even though the font file is intact.

Ofcourse there will be better solutions and easier ways to “automate” this especially if you were into MVC pholosophy but for a simple application, this should suffice.

P.S. any leads on using Asian language chars with embedded fonts be appreciated. I’ll continue looking around in the meantime.