Skip to main content

Open-Source Arabic Parsing v1.7

Update: a newer version available here

Couple of bugs has been fixed.

An Arabic parsing script for proper Arabic readability on Flash Player 8 and 9 without the use of Adobe Text Layout Framework, runs on the client-side with no need to migrating older projects for Flash Player 10 ..

You can integrate my parser into your library as open-source under GNU GPL license.

ActionSctipt 2.0 version available here
ActionSctipt 3.0 version available here

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

Features Not Supported:

  1. Arabic Diacritics (not necessarily for reading Arabic language in general, arabs are using diacritics mostly for writing Quran, and in that case diacritics are not the only missing feature, there’re many other ligatures cases in Arabic used for Quran writing).

Fixed Bugs:

  1. Proper chevron brackets.
  2. Proper single Arabic characters at both line ends of a text block.

Also you can use this online tool to copy proper Arabic into any Adobe software that does not support Arabic, like Flash, Fireworks, … , etc

For the font embedding and reducing file size, you can use shared fonts, and port those from a different server, follow this guide ..

Open-Source Arabic Parsing v1.6

Update: a newer version available here

An Arabic parsing script for proper Arabic readability on Flash Player 8 and 9 without the use of Adobe Text Layout Framework, runs on the client-side with no need to migrating older projects for Flash Player 10 ..

You can integrate my parser into your library as open-source under GNU GPL license.

ActionSctipt 2.0 version available here
ActionSctipt 3.0 version available here

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

Features Not Supported:

  1. Arabic Diacritics (not necessarily for reading Arabic language in general, arabs are using diacritics mostly for writing Quran, and in that case diacritics are not the only missing feature, there’re many other ligatures cases in Arabic used for Quran writing).

Fixed Bugs:

  1. Proper numeric sequence.
  2. Proper chevron brackets.

Also you can use this online tool to copy proper Arabic into any Adobe software that does not support Arabic, like Flash, Fireworks, … , etc

Arabic Web Fonts on iOS [RESOLVED]

As per my previous post here about using custom Arabic web fonts for Safari on iOS, finally I had the solution, and guess what ?! it’s using TrueType fonts !!

It seems like iOS has an issue with glyph lookup names for Arabic various ligatures when using custom TTF as @font-face in CSS, so I figured why not using my parser I used for Flash Player and ActionScript to manually perform that procedure for the iOS as well ?!, the funny thing that it worked nicely !!

You can check this example on your iPad ..

Arabic Web Fonts on iOS

Note: your iPad must have iOS version 4.2 or higher ..

If you do not have your fonts in TrueType format, I recommend using FontForge to generate a working TTF version ..

CSS & Arabic Custom Fonts on iOS

This one almost got me crazy !
I had to use custom Arabic fonts for one of my clients who requires a special version from his Flash website that works the same way on iPad ..
Of course the problem is that iOS do not support Flash Player, and it seems it never will ..

Fortunately, this project can be transformed to AJAX using jQuery, there’s no special features that works only on Flash Player, or at least that’s what I thought!

First issue I have crossed is using custom Arabic fonts, I did my search and I found the absolute fact about iOS ..

iOS supports only SVG as web fonts using CSS, and it requires a unique ID passed to each font!

Ok, I can live with that, I found this wonderful tool for converting my OTF/TTF fonts to SVG with unique ID, it works just fine, but ..
The problem pops-up for Arabic fonts as usual ! that service has an expert feature for entering a unicode range to be included in the output font, so I figured that since it does not seem to support Arabic language directly, I can just enter the Arabic unicode ranges required, in this case only 2 ranges are necessary for Arabic ligatures (0600-06FF,FE70-FEFE) ..
But it did not work properly, many glyphs are missing for some mysterious reason !

I gave it a bit more time for digging about this issue, and I found this JAVA command line tool that converts TTF to SVG, first test result was another failure !
At this point I was going to give up, but i just couldn’t !! and voilà, I caught the cockroach !
That ttf2svg tool won’t map any Arabic glyphs unless you define a decimal range for it, so I used the following command for Arabic only fonts:

java -jar batik-ttf2svg.jar foo.ttf -l 1536 -h 65278 -id foo -o foo.svg

And this one for Arabic/Latin fonts:

java -jar batik-ttf2svg.jar foo.ttf -l 0 -h 65278 -id foo -o foo.svg

The key is converting the hexadecimal ranges for Arabic glyphs to decimal values and pass it to that command, and since I have multiple ranges required for Arabic glyphs and that tool doesn’t let me pass multiple ranges, I just used first value from first range and last value from last range ..
That’s why when having Arabic only font you need to start with 1536, but when having Arabic/Latin font you need to start with 0 ..

One other way, more advanced one, is using FontForge, I had to edit the output SVG manually to set the UniqueID

<font id="XXXXXX"  horiz-adv-x="XXXX" >

And I had to add (xmlns=”https://www.w3.org/2000/svg” version=”1.1″) to the svg tag on top

<svg xmlns="https://www.w3.org/2000/svg" version="1.1">

The result is similar to the JAVA tool, something still wrong, many letters are misplaced and scrambled with the wrong glyphs, others remain missing !

You can check this example on your iPad, if you are Arabic speaker, you’ll get what I mean ..

I hope this helps someone out there who stuck at this issue when developing a compatible iOS website with custom Arabic fonts ..
I will keep digging about this, either I can find a work around or Apple simply releases an iOS update that renders Arabic SVG fonts properly ..

By the way, that article about Apple improving iOS support for web fonts even in TrueType, it never worked for me !

Update: final solution available here

UX Strategy Simplified

Today I had an interesting question, what is my UX Strategy?

My answer was something about parallel work streams and synchronizing UX with development, sounds like a good idea at the moment ..
After doing my homework, I think I have more accurate answer to that ..
In fact, it wasn’t quite correct trying to think of a strategy in a single statement, if there is no identified actions it would be more like a discipline then a strategy ..

“A strategy is a set of coordinated, orchestrated, planned actions, or tactics, which will take you along a journey to reach a desired future state, over an established period of time. Design objectives are conditions or outcomes that a project must meet, often of tactical nature. User experience (UX) strategy shouldn’t therefore be confused with design objectives.” Renato Feijó – Johnny Holland Magazine

There’re many UX strategies, I had to read tons of words just to figure that out!
After all, I find the following more straightforward and compelling UX Strategy:

  1. User Stories: frame the problem space without identifying the solution.
  2. Key Scenarios: combining user stories to expose enough detail about the nature of the project.
  3. User Pathways: walkthrough process represented by post-its.
  4. Interactive Prototypes: visualizing pathways into paper prototypes and mock-ups.
  5. Wireframes: modeling user interfaces in preparation for the actual designs.

For more Agile UX Strategy, here is an article by Austin Govella

References:

User Stories: a strategic design tool
Emerging a User Experience Strategy