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.

19 comments:

  1. Thanks Praveen for your blog and the information. I tried setting this on my flex builder but got some "abc bytecode decoding failed" error and "Type was not found or not a compile time constraint : TextLine" . Flex builder version I am using version 3.0 ( Build 3.0.194161) . I downloaded flex SDK 3.2 and configured with Flex builder and It started working . Issue is resolved.

    But did you try setting the fotnsize ? I tried the following but still I see small letters. Any idea on this ? Documentation says including textLayout_edit.swc file also in path. I added that but no use .






    Once again Thanks for your help

    ReplyDelete
  2. Just a note . I added telugu ANU script and tried the release build size 96 KB( using runtime shared libraries ) and for the same message in unicode the file is 148 . around 50 KB more for Unicode . :) :( .

    ReplyDelete
  3. Installed Flex Builder 4 ( named as Flash builder 4) and tried Unicode , It is working perfect .

    Regards

    ReplyDelete
  4. thanks for sharing info with pics

    ReplyDelete
  5. @Khammam

    "Type was not found or not a compile time constraint : TextLine"

    We require Flash Player version 10.0 or more then that to work with this. To rectify the above error

    1)In Flex Navigator right click on Project
    2)Click on 'Properties'
    3)Goto 'Flex Compiler'
    4)Change the 'Required Flash Player Version' to 10.0.0 or more (and make sure you installed that flash player)

    ReplyDelete
  6. @Khammam
    Thanks for sharing the info regarding the ANU script & unicode in Flashbuilder 4..

    I didn't explored much regarding the Flex 4. Actually displaying Unicode Text is only a minor part of 'Flex Layout Framework' and it is used to display the text in many different forms in Flash player. Just google it for more info.. Its very intresting :)

    ReplyDelete
  7. Hi,

    I am able to show the text in hindi but not able to write a text in hindi.
    i am able to do copy and paste but not able to write.
    I am facing the problem with hindi only .working perfectly fine with other language.
    please help me out, i am facing this problem from 1 month.
    Thanks
    Monika

    ReplyDelete
  8. Hi praveen,

    As you mentioned in the blog, i am able to give the label name in hindi.That means i am able to display text in Hindi but if i am creating one textArea and then i try to type a text in Hindi in that textArea, that time i am not able to type in Hindi in the running application. it will appear as a '?'.Other than Hindi i am able to write text in any languages inside the textArea.
    As for example -
    if i do it will appear same in the screen.
    But when i say
    and then i try to type a text in Hindi in the running application that time character will appear in '?'.
    i tried with TextArea, RichTextEditor and all but not able to solve this prob.
    Please help me out.

    ReplyDelete
  9. As for example -
    mx:Button lable="रक्रि्रि्"
    if i do it will appear same in the screen.
    But when i say
    mx:textArea text=""
    and then i try to type a text in Hindi in the running application that time character will appear in '?'.

    ReplyDelete
  10. @Monica

    According to my knowledge we can't write non-english text directly in Flex 3 controls like TextInput. Either we had to use custom fonts or had to integrate TLF (Text Layout Framework) with these TextInput controls.

    ReplyDelete
  11. Thanks praveen for your reply.
    But i found one online example for Text Layout Framework in google.here is the link -
    http://labs.adobe.com/technologies/textlayout/
    when you click on the next arrow button there is one slide come by name is "New York City"
    in that there are tow ovel shape control present, there i tried to write text in Hindi but there also i am not able to write.
    when you go thru all the slide at the last slide when you chosse language as a Hindi the text will appear in Hindi and there is one more button Full list represent the supported writing script.
    Can you pls go with that link and suggest me if you have nay solution.
    Because after tried with that link for TLF i found that Hindi writting is not possible with flex.We can display the text but not able to write.
    Please try at you end.

    ReplyDelete
  12. Thanks Great Functionality :)

    ReplyDelete
  13. Hi

    I am new to Flex 4.6,

    I trying to display HTML formatted Tamil Rss Feed in RichEditableText

    Font is not rendering properly , i breaking my head for the past 2 weeks.


    Code below




    Plz HElp.

    ReplyDelete
  14. hi praveen

    nice tuturial
    I tried the above example with kannada script, but in label or button buttom(matra) letters are not showing, can u plz help me out how to solve the problem.
    ಹಲೋ ವರ್ಲ್ಡ್
    in above scirpt letter the bottom letter is not showing.

    ReplyDelete
  15. Hello, I am using flash builder 4.5 to developed iOs application. I have a task to show text in Hindi as well. I have tried several ways I didn't get success. Then I came to know about your blog but still it's not working for me....

    Can anyone help to accomplish this task?

    Thanx in advance

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. thanks for this tutorial
    this tutorial help me to show arabic language in Flex 3 in Label , button and comboBox , i want to show arabic laguage in dataGrid .. can someone help me to do this work ??

    ReplyDelete
  18. I am using Flex 4.6 and Anmol Hindi Font.In output I am able to display in Hindi only if I type in English. Ex: "Hlo" will get displayed in Hindi. But how to type and display Hindi language in program itself. The way you have named Buttons. mx:Button lable="रक्रि्रि्". Like this I am not able to do. I am writing like mx:Button lable="Rakriri". Pls Help

    ReplyDelete
  19. I can copy those characters and can display but can't type and display in Hindi in Code

    ReplyDelete