Monday, March 16, 2009

Flex Right to Left – for the Hebrew man

here is some cowboy programming for handling the text direction in flex. i found that the simplest way is to extend the text UI component (i.e. mx:TextArea or mx:TextInput) with my own class with some instrumentation.

amazingly enough, selecting the right font family is all it takes to have the UI component type the correct order in words. the font i used was Ariel.



this.setStyle("textAlign","right");
this.setStyle("fontFamily","Arial");

it gets a little bit trickier when setting or retrieving the text from the component, so I've added a set and get methods, that crudely check for the first character. if its Hebrew, i flip the order of words.

the setter and getter look like this:



public function getText():String{
return LanguageUtil.getLocalazedText(this.text);
}

public function setText(s:String):void{
this.text = LanguageUtil.getLocalazedText(s);
}

the language utility I'm using is actually the following method:



public static function getLocalazedText(message:String) :String {
var c:int = message.charCodeAt(0);
if(c>1487 && c<1515){
var resArray:Array = message.split(" ");
var resLine:String = "";
for(var i:int = resArray.length; i>0; i--){
if(i != resArray.length){
resLine += " ";
}
resLine += resArray[i-1].toString();
}
return resLine
}else{
return message;
}
}

i haven't tested this on Mac yet. but for windows it seems to be ok.

hee haw

9 comments:

  1. it was lately brought to my attention that this little thing is just as good for handling right to left in Arabic. the only difference would of course be the range of characters for identifying the language.

    ReplyDelete
  2. Hi

    Thank you for this interesting post.

    Will this work with other components, like the grid (including the grid column names)?

    ReplyDelete
  3. Hi, you are welcome.

    I haven't tried it on anything other that TextInput but i'll be happty to know if it works for you.

    ReplyDelete
  4. I want to know how to layout flex components that work from right, top or left with their respective sides as base?

    ReplyDelete
  5. Thanks man...you saved me a lot of time.

    ReplyDelete
  6. Thanks Gilad, this is truly smart!

    ReplyDelete
  7. hi Gilad - thanks for this code. Very helpful.
    How do you solve the cursor position which in my case stays at the same position (0). Meaning that while you type Hebrew chars, the cursor is on the right position and the chars are pushed RTL properly.
    thanks
    charlie

    ReplyDelete
  8. Q: "How do you solve the cursor position which in my case stays at the same position (0)."

    A: You need to create a custom UI which extends, for example, the RichTextEditor.mxml,
    and manipulate the getTextStyles() function by changing:
    lastCaretIndex = textArea.getTextField().caretIndex;

    ReplyDelete
  9. RTL seems fine in case of alphabets. If you take arabic, for example, there is a difference in the way the characters get appended in the text box for alphabets and numbers. You can explore with a virtual online keyboard for arabic and you'll know. what could be the solution to this issue?

    ReplyDelete

Please do not post spam on this blog, Spam sites will be reported to google.
thank you kindly.