IxD Consultant ActionScript, Flash, Flex, AIR and Python

Interaction Design (IxD) is poised to become one of the main liberal arts of the twenty-first century.
Malcolm McCullough
1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.33 out of 5)

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!

12 Comments

ahmed zahran
January 26th, 2010

100 100 ya 3am el 7ag allah yenawar



xVisage
January 26th, 2010

thanks a bunch ;)

January 29th, 2010

Hi, Thanks for such a nice post. If i have to change arabic font then how can do it.



xVisage
January 29th, 2010

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);
Walid Said
February 1st, 2010

good work.



xVisage
February 1st, 2010

thank you

February 16th, 2010

Man I LOVE YOU!!
You’re the best … now I can load arabic text from a database.

Cheers :D



xVisage
February 17th, 2010

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 ;)

March 1st, 2010

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 :D

Khaled Khalil
March 8th, 2010

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



xVisage
March 9th, 2010

@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 :)



xVisage
March 10th, 2010

@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 :)

Leave a Comment

To submit your comment, click the image below where it asks you to... Clickcha - The One-click Captcha