RTL languages and the Text Layout Framework

So this is the positive post about the Text Layout Framework that I was talking about earlier. For the current project I am working on I have the joy (read the sarcasm here) to be doing it in 9 languages and if that wasn’t fun enough one of those is Hebrew which is a right to left language. To be frank this kinda make the project really hard but not because of technical reasons, it makes it hard just to put the text at the right place… Anyway I digress, the thing when working with right to left languages is that there is not that much information on it or what you will find is really dated and not relevant anymore. Well it is that way with TLF in general too, so finding information on the subject is really tedious. Actually I didn’t find anything useful on the web and I had to figure things out on my own; that is why I am writing this post. Has I mentioned on the previous post, there are 3 ways to make text using the TLF: TLFTextfield, TextBlock or TextFlow. I will go through all of those and explain how to display RTL language correctly.

TLFTextfield

I find that this is the easiest way to display text using the Text Layout Framework. It is easy because it pretty much works the same as the good old Textfield. A colleague told me that the CSS part of it wasn’t really working and from the documentation it seems to be still in beta. To display a right to left language like Arabic, Hebrew or Persian, this seems like the way to go. Easily enough, it has a property called direction that you can just set to “rtl” and there you go, your text will display properly.

TextBlock

If you think you are going to be doing a version of your site/application for a RTL language, do not use TextBlock. That’s a shame cause this method of displaying text seems to give better looking text, but I was never able to get my Hebrew text displaying properly. It is weird because if you look at the documentation there seems to be a way to do it, using the bidiLevel property and setting it to an odd number (I have no idea why, this seems very unobvious to me). But I tried it and it doesn’t work. The problem arise when you have LTR text inside a RTL paragraph, so let’s say a english word inside a Arabic paragraph. This will greatly confuse the text engine and your text won’t display properly sometimes showing very differently than it the xml it has been taken from (if you pull your text from xml). So in this case, use TLFTextfield.

TextFlow

I am not a big fan of TextFlow, it seems more complicated for nothing, but I guess that if you want to display columns and more complex text that is the way to go. But has in the case of the TLFTextfield, it seems pretty easy to use RTL languages and TextFlow. So basically in your TextFlow markup you can do something like that <flow:p direction=”rtl”>my persian content</flow:p>. Easy enough, I haven’t tried it, but I have read that it works.

So there you have it, how I finally got it to work properly. Had I known before I would have built my site differently, I was using TextBlock everywhere, so now I check if the language is Hebrew and use TLFTextfield in that case. Also note that working with right to left text using tools that don’t really support it is really hard and confusing, the editor gets confused and selecting text becomes hell as it goes a bit for right then to the left and then right again. Be prepared for some trouble… Anyway I hope this saved some a bit.

, , , , , , , , ,

  1. #1 by Adrian Parr - April 7th, 2011 at 05:56

    TLFTextfield is the easiest way to go (if you are creating assets using the Flash IDE), however I’ve found that if you drag an instance of the TLFTextfield on to the stage at authortime you can’t then dymanically change it’s direction at runtime. You can only alter it’s direction at runtime if the TLFTextfield was created/instantiated using AS3. Very annoying!!

  2. #2 by juju - April 12th, 2011 at 12:16

    i don’t if you encountered this during your searches, but Paul Taylor has released months ago TinyTLF:

    http://guyinthechair.com/tag/tinytlf/

    experiments looks very impressives

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.