1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)

Update: a newer version available here

As per my previous post here, I have another improved version, my deepest thanks to Jan Jonas who did contribute on this one, you can use and test my new parseArabic method ..

Requirements:

  1. Dynamic TextField
  2. HTML Enabled TextField
  3. Pre-Assigned TextFormat
  4. Arabic Font

Features Supported:

  1. Embedding Fonts (just put a dynamic textfield on-stage and select at least Basic Latin (95 glyphs) and Arabic (1088 glyphs) from the Character Embedding menu).
  2. Arabic Ligatures.
  3. Word Wrapping.
  4. Bi-Directional text.
  5. HTML Text.
  6. Loading External text on run-time.
  7. Windows/Mac/Linux support.
  8. Arabic enabled input fields using actionscript method (createArabicInput) with the help of javascript (arabicinput.js) beta

Properties:

  1. For matching/comparing input string, when referencing original input string use the data property (TextField.data) instead of (TextField.text)

Features Not Supported:

  1. Arabic Diacritics.

Fixed Bugs:

  1. Single Characters.
  2. Single-line TextField with autoSize.
  3. Upper-Case non-arabic characters.
  4. Extra Spacing at the end of each line (fixed by “Jan Jonas”).
  5. Double line-breaks (fixed by “Jan Jonas”).
  6. Empty String input.
  7. All Arabic Fonts are supported (requires embedding)
  8. Improved string processing performance

Here is an example works with this external XML file (with run-time resizing vs. wrapping):


download the above example here

And here is another example for using a work-around approach for solving Arabic Input on Mac/Linux, the approach uses this JavaScript file in conjunction with ActionScript to create transparent HTML controls and place them exactly over our input TextFields inside flash, the method works fine on Firefox, but it needs a lot more modifications for cress-browser compatibility, your contributions are most welcome for sure ..

download arabic input example here




Social Comments

21 Advanced Comments

April 1st, 2010

Great! thats what i called passion of professional programmers. Thanks Ahmed, at last you gave me solution for real time resizing of text field.

I would be great, if there is any possibility to integrate format/style through external CSS. any idea how?



April 2nd, 2010

First, thank you for your support ..
And yes, it’s possible fore sure, like the following:

stop();
import com.xvisage.utils.StringUtils;
import TextField.StyleSheet;
var format:TextFormat;
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function(done:Boolean) {
	if (done) {
		output.htmlText = StringUtils.parseArabic(this.firstChild.firstChild.nodeValue, output);
		output.setTextFormat(format);
		scroll.high = output._height;
		scroll.target = output;
	}
}
var style:StyleSheet = new StyleSheet();
style.onLoad = function(done:Boolean) {
    if (done) {
		var obj:Object = this.getStyle(".arabic"); // get style class to be applied
		format = this.transform(obj); // converts loaded style class to TextFormat object
		output.setTextFormat(format); // required before parsing Arabic text
		xml.load("arabic.xml");
	}
}
style.load("arabic.css");

click here for an example ..

April 7th, 2010

Hi Ahmed,
thanks again for your great work!
Please find my review of version 1.2 in my blog (http://blog.janjonas.net/2010-04-07/actionscript-2-bugfixes-arabic-parsing). I think I found and fixed some bugs.



April 8th, 2010

Thank you Jan for your efforts, you’re really making this perfect ..
I got your point about bi-directional special cases, and you did catch the correct places in the code for resolving it especially without embedding fonts ..
My only note that Arabic ligatures now needs to be fixed when fonts are not embedded, I assume that you didn’t noticed unless you can read Arabic ;)
I will check this issue and will get back to you with a fixed version, thanks again ..

geekgirl
April 9th, 2010

Dear Ahmad,

Do you have an updated version (1.2) for AS3 as well? I really need it, please. This is for adding Arabic support to a very useful (GPL) wordpress plugin, which is very much needed by many including myself :)

I’m not quite savvy with Action Script, though I’ve messed around some with AS2 to AS3 before, but its all forgotten. So I would really appreciate it if you can provide an updated version for AS3 soon, as the 1.1 version has some issues and is seriously lacking compared to some of the improvements made in 1.2. Most importantly, from what I’ve detected so far: the uppercase Latin, very bad when a string is all uppers (gets reversed), Arabic numerals (1234..) get translated to Indian, besides the things Jan found in 1.2, etc.. It seems I may have quite a bit of work to do before actually going to use your code (and releasing it – GPL’ed with due credit) for production.

Still must say, very brilliant work! But that does not give your work its worth. I’m really glad I found your blog.

جزاك الله كل خير و زادك اللهم علماً

ياسمين

geekgirl
April 9th, 2010

ok i ported just the major part (except the createArabicInput function
works well from quick test :)

will post later

geekgirl
April 10th, 2010

Some more issues with the AS2 Arabic Parsing v1.2:

[*] In Ahmad’s original v1.2, and also Jan’s patched v1.2:
– If the line in arabic.xml BEGINS with Latin, followed by Arabic, then whatever else, only the string starting from the first Arabic character is shown.
For instance, put the following line in your arabic.xml:
Some English Here اللغة العربية some more english و كمان شوية عربي
Then run the swf, you will only see:
اللغة العربية some more english و كمان شوية عربي

This was not an issue in v1.1 (only appeared in v1.2)

[*] In Jan’s patched v1.2:
– Regarding the Bug#2 fix: it doesn’t seem to have been thoroughly tested.
The parenthesis are displayed only as expected when there’s at least 1 Arabic character, followed by at least 1 space, as the very first thing between parenthesis.
For instance, the following will all display as expected:
(عربي English text here)
(ع English text here)
But, the following will not display as expected:
(English Text Only in parenthesis)
will rather display like so:
English Text Only in parenthesis()
i.e. if there’s not at least 1 Arabic char followed by a space as the very first thing between parenthesis, the parenthesis will appear to be empty, immediately following the end of the text that was inside it.

Need to test more later

April 11th, 2010

Hi,

I am using ur example but i need AS3 script coz flash all is AS3
i getting error in StringUtils.as line 97 – 1016 base class final

can u fix error for Flash CS3 so i can use AS3?
Thanks

April 12th, 2010

Geekgirl: I think I just fixed the first bug you have mentioned (latin words at the beginning are ignored):

Before
“while (i<chars.length) {"
add
"i=0;"

After
"var latinWords:Array = []"
add
"var firstArabic:Number = -1;"

Before
"// maintain saved words order
latinWords.push("");"
add
"if (firstArabic 0) {
for (i=0; i<firstArabic; i++) {
words.push(words.shift());
latinWords.push(latinWords.shift());
}
}

While fixing this bug, I think I found another one: If the string ends with a latin word, this word is rendered at the beginning and not at the end of the string. Since I cannot read Arabic, this is only a speculation I got when I observe how the cursor walks through the characters/words in my editor :).

As soon as I have the time, I will give you more details and publish a new patched version.
Jan

April 12th, 2010

Geekgirl: Regarding the problem with the parenthesis you have mentioned: I cannot reproduce your problems. If I parse the Text:
(English Text Only in parenthesis)
The output look like:
)English Text Only in parenthesis(

Of course, this is not correct, but the output different the output you have posted. Could you share the xml-file you have used?

I also found some other parenthesis problems but did not have the time to analyze them in detail. I will keep you up to date.

Ahmed: As far as I understand the algorithm, it reverses all parenthesis for proper right-to-left rendering and does not consider whether the parenthesis embrace Latin or Arabic characters. In my example above, I think, this causes the problem. I’m not sure, if this approach (reversing all brackets) will work for all cases. What do you think?

geekgirl
April 16th, 2010

Guten Tag, Jan :)

As requested, I have briefly detailed the problem, with attached screenshot and the arabic.xml file used, for further clarity.
Also included in the ss and the xml, another bug explanation I just realized by chance; in the situation where a space is erroneously missing (in the input) after a non-kernable character like ة or ـة at a word-ending, such as the word:
العربية
or
الألمانية
That character will get lost in the output, and the word that had it as its ending will get kerned to the next word. messy :P
This will probably be quite difficult for you to fix as you can’t read Arabic, so hopefully either me or Ahmad will manage to fix this (and possibly other related issues).

You can see it all (Screenshot & XML) here:
http://sites.google.com/site/geekgirljas/flash_parse_arabic

Regarding the problem with the parenthesis which you were not able to reproduce, I know the why you couldn’t reproduce it :)
When your xml file
contains nothing but latin text. For example, as you have tried, having only that line in the xml file:
(English Text Only in parenthesis)
The output indeed will look like this:
)English Text Only in parenthesis(
But that’s only the case when the xml file has only that above line, and no Arabic text in the line or even in the XML file.
The behavior changes completely however when there’s Arabic in the same line, or even in a preceding line (followed by a newline char), as you can see from the screenshot and example xml I mentioned above.

Last but not least, I have not tested your proposed fix yet, but will try to do so ASAP and reply back with results.

Finally, a question for either you Jan, or Ahmad:

regarding line 107:
[code]
tag.data = input; // referencing original input string to use for matching/comparing instead of (TextField.text)
[/code]

I had a problem figuring out what the alternative of this would be for AS3, and I had bunch of issues with it, so I ended up giving up and just doing this instead (for AS3):
[code]
tag.appendText(input);
[/code]

It works for me(tm), but I’m not sure if this is the best way to do it. Any ideas?

Also I was pretty clueless about porting the 3 line function createArabicInput. Any help in that regard would be appreciated.

You can download the last AS3 version I made (on the 10th of April), here:
http://sites.google.com/site/geekgirljas/flash_parse_arabic/StringUtils-1.2-as3.as?attredirects=0&d=1

Mit freundlichen Grüßen :)
Jas



April 17th, 2010

@Jan
@geekgirl

I think the bi-directional issue brought the algorithm to a fairly complicated status, I am working on different work-around to handle bi-directional wrapping with proper Arabic direction and possible HTML tags as well ..
The new approach should reduce performance, I will share that with you in AS2/AS3 within the next few days ..
Many thanks to you both for your thorough reviews for bringing this to perfection ..

geekgirl
April 18th, 2010

Ahmad,

That sounds very promising. I shall hold my horses for now and wait -eagerly- to see what your new implementation :)

All the best

geekgirl
April 18th, 2010

… what your new implementation has to offer.

Too excited, can you tell? :p lol

April 26th, 2010

I’ve published my new patched version here http://blog.janjonas.net/2010-04-26/actionscript-2-bugfixes-arabic-parsing-part2 (this version includes the fix for Latin characters at the beginning of the string).

Geekgril: The line
tag.data = input;
has no impact on the algorithm. You could delete the line and everything should work as before. Saving the input to the property “data” enables you to refer the original input string with myTextField.data (myTextField.text contains the string that is modified by the parser to be rendered from right to left).

Avi
May 4th, 2010

Tanwin is not rendering properly.
Can you let me know the solution for that as well.

Bharati
May 11th, 2010

Hi Ahmed.

Gre8 work. I am working on a project which has 9 languages and all are from LTR except Arabic. So, I tried your code. However, it’s not supporting html tags such as “”, etc. Could you please help me on this.

==============
<![CDATA[ارجو التمعن في قراءة المعلومات المدونة بالاسفل قبل الشروع في بدء الاختبار:ان هذا الاختبار قد صمم خصيصا لكي يساعدنا على ايجاد المستوى اللغوي الصحيح لك و بالتالي الفصل الدراسي التابع لذلك المستوى.سيتطلب منك الجواب على اسئلة متواجدة في ما بين واحد الى اربعة مجموعات من الاسئلة.هنالك 25 سؤالا في كل مجموعة، و كل سؤال له 4 احتمالات باجابة صحيحة واحدة فقط.الوقت المحدد هو45 دقيقة كحد اقصى لاجتياز الاختبار (مجموع الاسئلة هو 100 سؤال عند الاجابة على جميع الاسئلة).في اللحظة التي تقوم بها بالانتهاء من سؤال ما و اختيار الخيار المناسب فانك لن تستطيع الرجوع و تغيير الاجابة.تستطيع الان الشروع في بدء الامتحان بالنقر على زر ابدأ أو start بالاسفل.]]>

====================
It would be gre8 if you can help me on this. Keep it up and good luck.

Bharati



May 23rd, 2010

@Avi

Unfortunately, Arabic Diacritics is not supported in this solution



May 23rd, 2010

@Bharati
@AK

I just tested that with this new version, you’re still welcome to review and comment on this one

Jochen
July 28th, 2010

Thanks for the software examples. But both zips are infected with viruses (Trojans).



July 28th, 2010

@Jochen

Well, you seem to be the first person who claims about viruses, let me assure you that there are none (tested with Symantec Endpoint Protection 11.0) ..
Why don’t you try this newer version, you’re still welcome to post your review ..