Skip to main content

ActionScript 2.0 Arabic Parsing v1.1

Ahmed Abbas 2010, January

Update: a newer version available here

As per my previous post here, I’ve made some improvements to my method for proper Arabic rendering in a dynamic TextField using ActionScript 2.0.

An ActionSctipt 3.0 version available here

Many thanks to all reviewers, your comments were very helpful bringing this version available, now you can use and test my new parseArabic method ..

Requirements:

  1. Dynamic TextField
  2. HTML Enabled TextField
  3. Pre-Defined TextFormat
  4. Arabic Fonts must include a complete Arabic Presentation Forms-B (glyphs from FE70 to FEFE according to the Unicode Standard 5.2)

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.

Features Not Supported:

  1. Arabic Diacritics.

Fixed Bugs:

  1. Correct Arabic Ligatures with/without embedding fonts
  2. Correct Brackets Directions
  3. Clean Line-Breaks

Here is an example works with this external XML file:


download the above example here

Note:
When you try to select and copy the above text into a static TextField it will display Arabic properly as well, just another benefit of this method, but if you paste the copied text into any other text editor you will see an alien version instead!

23 thoughts to “ActionScript 2.0 Arabic Parsing v1.1”

  4. In order to use custom fonts, basically you need to embed those fonts first, then you define the font name for the TextFormat parameter, for example:

    1. Download and install one of these free fonts, let’s say ae_Dimnah.ttf from the package ae_fonts_2.0.tar.bz2
    2. Put a TextField off-stage, set TextType to Dynamic Text and set Font-Family to Dimnah
    3. Select at least Basic Latin (95 glyphs) and Arabic (1088 glyphs) from the Character Embedding menu)
    4. Now open the Actions Panel and create new TextFormat object, set the font property to the same font name we use: 
      var format:TextFormat = new TextFormat();
format.font = "Dimnah";
    5. Remeber to enable html and embedFonts for your target TextField: 
      output.html = true; // where "output" is the instance name of your target TextField
output.embedFonts = true;
    6. This way you can use paseArabic method with your custom font: 
      import com.xvisage.utils.StringUtils;
var format:TextFormat = new TextFormat();
format.font = "Dimnah";
output.html = true; // where "output" is the instance name of your target TextField
output.embedFonts = true;
output.htmlText = StringUtils.parseArabic("ุจุณู… ุงู„ู„ู‡ ุงู„ุฑุญู…ู† ุงู„ุฑุญูŠู…", output, format);
output.setTextFormat(format);

  8. Sure, all you need to do is to connect and read your Arabic text from MySql and send it back to Flash, for example:

    PHP (getArabic.php):

    $dbhost	= "localhost";
$dbuser	= "USER_NAME";
$dbpass	= "PASSWORD";
$dbname	= "DATABASE_NAME";
$link = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to mysql");
mysql_select_db($dbname);
$query = "SELECT content FROM arabic WHERE id=1""; // assuming that you have a table called `arabic` and we select text from column  `content` at first row
$result = mysql_query($query);
if ($result) {
	$row = mysql_fetch_row($result);
	echo 'arabic='.$row[0];
} else {
	echo 'error='.mysql_error();
}

    ActionScript 2.0:

    import com.xvisage.utils.StringUtils;
var vars:LoadVars = new LoadVars();
vars.sendAndLoad("getArabic.php", vars, "POST");
vars.onLoad = function(done:Boolean) {
	if (done) {
		if (this.error != undefined) {
			trace(this.error);
		} else {
			var format:TextFormat = new TextFormat();
			format.font = "Dimnah";
			output.html = true; // where "output" is the instance name of your target TextField
			output.embedFonts = true;
			output.htmlText = StringUtils.parseArabic(this.arabic, output, format);
			output.setTextFormat(format);
		}
	}
}

    Any time ๐Ÿ˜‰

  9. Thanks so much for this post your really brilliant.

    by the way I noticed a bug with the number ูค and ูฆ when I write them in arabic in the xml and when I replaced them with 4 & 6 it’s worked I’m just telling you because u did a great job and you should know if there is any bug.

    Thanks again ๐Ÿ˜€

  10. i am not into flash at all, so i am very sorry that i didn’t understand what is this all about.
    can you tell me, in layman term, if this is some workaround to get flash objects render Arabic sanely, i mean a patch users do once that affects every object executed, or it is a library for flash developers to include in their projects so that it will be able to display Arabic scripts correctly ?

    if the former, can you explain for dumb user, in details, what to do ?

    many thanks in advance

  11. @Khaled

    Well, it’s not a patch that affects every object, also not quite a library for flash ..
    Basically it’s a String Parsing method (custom AS based function), which analyze and re-order Arabic glyphs in a proper manner with correct rendering on windows, mac and linux, furthermore, it supports custom fonts ..
    Regular TextField in Flash does not understands right-to-left languages, so it can not map custom fonts, no word wrapping and even breaks the string on mac machines ..
    I did not hack into Flash or use third-party techniques to solve this, all I did is simply instruct Flash to render Arabic language manually using ActionScript by finding and replacing Arabic characters with its correct forms from unicode charts, my method has nothing to do with any special features added to ActionScript (since version 1.0) or to Flash Player (since version 5), it’s just a workaround ..
    I left my solution absolutely free and open for anyone who can understand my approach and build similar methods for other right-to-left languages, even update my own for better usage ..
    I hope I’ve helped understanding what this is all about ๐Ÿ™‚

  12. @Rabah

    I think it’s a Font issue, I use unicode charts for Arabic Presentation Forms-B (glyphs from FE70 to FEFE according to the Unicode Standard 5.2), may be this is your issue, can you try one of these fonts and tell me if you still have the same bug? (those fonts has full representation Form-B)
    Thank you for your compliment ๐Ÿ™‚

  13. First of All, Thanks for this great source. However I am facing wrapping problem in full screen mode! It shows starting words of sentence in 2nd line and in case of long test (in full screen) wrapping issue is remain same as happens in flash normally. Any Idea Why it is behave like this.

    FYI: I’m reseting width of my text field for full screen thru AS. However your script works fine normal mode.

  14. hey man, it works perfectly with the database, just one thing.
    1 newline does 3 newlines.

    didn’t really get what was happening in your function, but tried to comment:
    input = input.split(“\n”).join(“”);
    input = input.split(“\r”).join(“”);

    which fixed it but messed everything else!

    so any idea?

  15. ok I managed to find a work around which seems to be working till now

    seems 1 new line in my input produces “\r\n”
    which while being split each becomes a br and results in 2 newlines in flash.

    so I just removed one of the joins and now it works!

    input = input.split(“\r”).join(“”);
    and leave \n alone

  16. Ahmed, I tried to contact you via email. Maybe you are too busy, so I will post my investigations here as comment.

    First of all: Thank you very much for this great AS2 class. I do not know anything about Arabian characters or grammar, but I think I found bugs and possible enhancements:

    1) Fix double line breaks (@Ammar: That could fix your problems)

    Add
    Line input = input.split(“\r\n”).join(“\n”);
    after the comment “// strip hard lines-breaks”

    2) Fix wrong line breaks (Ahmed: I sent you a test fla via email):

    Replace:
    if (temp._width<tag._width-tagFormat.leftMargin-tagFormat.rightMargin) {
    By:
    if (temp._width<tag._width-(tagFormat.leftMargin ? tagFormat.leftMargin : 0)- (tagFormat.rightMargin ? tagFormat.rightMargin : 0)) {

    3) Improve "hasDigitsOrLatin"-loop:

    Add a "break" command when a latinChars was found (just for performance).

    —-

    Two thinks I am confused about:

    1) There are some if-Statements like "if (tag.embedFonts) { …": I do not understand why embedded fonts should be processed in a different way than not-embedded text formats. In my tests with NOT-embedded text formats I replaced all if conditions with true (like "if (true ||tag.embedFonts) {") to handle NOT-embedded text format like the embedded ones (otherwise the algorithm did not work properly for me).

    2) What about upper case letters in the definition:
    var latinChars:String = "abcdefghijklmnopqrstuvwxyz1234567890″?
    The latinChars string is used with indexof and, imho, indexof is case sensitive and I do not see any reason why lower case latin characters should differ from upper case ones.

    Jan

  17. Dear sir,
    I’ve a weak background about scripts…
    The issue I face is I’m a Mac user and the flash player doesn’t support the Arabic words written in flash forms such as YouTube … etc.

    Is this script going to be helpful in this case? and how to use it :$

    best regards ๐Ÿ™‚

    Yousif

  18. @Jan

    Many thanks to you for your contribution, that was very efficient ..
    About the embedFonts condition you find confusing, actually I don’t quite understand why Flash treats embedded fonts differently in terms of character metrics, I found that by try and error, not based on any information regarding Arabic vs. Flash, for example, when I try to detect characters width for wrapping it behaves differently based on embedFonts property, that’s why I do recommend to always embed Arabic Fonts, this way you should get proper Arabic rendering ..
    If you can find me an explanation about embedFonts and Arabic glyphs in Flash it would be great ..
    Thanks again for your updates to this method ๐Ÿ™‚

    @Yousif

    This method definitely renders Arabic characters properly on Mac, but I don’t think you can force the embedded YouTube Flash Player to use this method for Arabic rendering, unless you can find a way to load videos directly from YouTube (without using their player), in this case you can build you own player using this method, only by then you can have proper Arabic rendering in your own player

    @Salman
    @Ammar
    @Jan
    @Yousif

    My apologies for such late reply, it’s true that I have been busy recently ..
    I did my best to cover all your issues in this new version, you’re still welcome to review and comment on this one

  19. I’m a mac user, trying to resolve the arabic text issue of AIR. Tweet Deck & Youtube arabic text.
    How can I use your solution?

  20. @Taher

    Pre-compiled apps like YouTube player or any similar components can not directly integrated with this solution, but ..
    For an instance, you can build your own YouTube Player using their API, in this case you can use this solution for sure ..

  21. Hi there, Thanks for the great work, but i have an issue,When the text is too long text wrapping happens at the start of the sentence not the end of it. How can i fix that.thanks,Amir

  22. Pingback: ActionScript 2.0 Arabic Parsing v1.2 – IxD Consultant | Ahmed Abbas | Blog
  23. Pingback: ActionScript 3.0 Arabic Parsing v1.1 – IxD Consultant | Ahmed Abbas | Blog

Leave a Reply

Your email address will not be published. Required fields are marked *