Wednesday, February 3, 2010

Indian Language's Font/Lipi in Flex using Text Layout Framework

Any time tried to show some Indian text/lipi in Flex 3., i.e on Flex 3 controls like label, button, combobox etc..

If you want to display a hindi text on a button control, you will write a normal code:

<mx:Button label="पहला आइटम"/>

But it wont work :)

You will get the output as below

you will be greeted with some unexpected square boxes as above..

Adobe "Text Layout Framework" will help us here when we want to show these indian languages or other languages like arabic in Flex 3 controls. This framework is still in its beta stage. For Flex 3 we had to include 'textLayout_conversion.swc' & 'textLayout_core.swc' in libs folder and for Flex 4 these swc's are already included.

You can find more details about "Text Layout Framework" from here

So lets see how to display Indian language text in Flex..

I am showing Hindi & Telugu (as it is my mother tongue) languages in Flex controls, we can also display other languages like tamil, malayalam, kannada, arabic etc but I didn't tried with those as I am not familiar with those languages (but I tried with arabic and succeeded almost although I didn't understand the language)

we had to include 'textLayout_conversion.swc' & 'textLayout_core.swc' in libs folder

The Screen shots of the examples can be seen here

Indian Languages/ any other language on (click on the text for demo example)

Label Control

Button Control

ComboBox Control - Actually, the displaying indian text in ComboBox control some modifications to ComboBox control. For this a custom combobox control is done and the text positionion for some languages is not perfect. You can change the custom component according to your requirements.

You can get the source code of all the above from here and change it according to your requirements.

Feel free to add your comments.