Monday, February 16, 2009

Displaying Arabic Text in Silverlight

When it comes to typography Arabic has a distinctive rich set of features coming from a long history of calligraphy as the center of Arabic art. If you are interested in more information about Arabic calligraphy, you can check Wikipedia's article about the subject http://en.wikipedia.org/wiki/Islamic_calligraphy.

So let's talk more specific about these features that makes Arabic language so special, and difficult to implement especially in a platform independent platform like Silverlight.

  • The first and most obvious feature is the RTL (Right to Left) or more precisely the Bidirectional nature of Arabic, and other scripts like Urdu, Persian, and Hebrew. RTL languages as the name suggests are written primarily starting from right to left, which presents a challenge to Software platforms designed to render the Latin languages from left to right. In the simplest case the solution to render Arabic text correctly is by reversing the characters order in the string array, but in real RTL text the situation is more complicated than that. First the text needs to be split into separate paragraphs, numbers needs to be preserved in LTR order, if there is Latin text mixed with the RTL text, its order needs to be preserved. Unicode standard has an annex with details for the algorithm of handling bidirectional text including how to handle special Unicode control characters that affects the text rendering. You can find the Annex here http://www.unicode.org/reports/tr9/.
  • Shaping is the second challenge in implementing Arabic support, shaping refers to the fact that Arabic characters are rendered to a different glyph according to its position. So let me explain the difference between characters and glyphs first. Character are an abstract representation of a piece of information, this can be a letter, number, punctuation mark, or a control character. Glyph is the visual representation of characters, a glyph can be a ligature which is a combination of more than one character, or it can represent a single characters, or in the case of control characters, no visual glyph is associated with them. So in Arabic the letter Ha' for example can be represented as one of the following four glyphs based on its position in the word

clip_image001

  • Ligature is another challenge where character sequence like Lam, Alef must be represented as a single glyph. Ligature can greatly improve the aesthetics of a word, the following picture shows a series of characters with ligature on the right, and on the left the same characters without ligature

clip_image002

  • Tashkeel or Harkat refers to special characters that controls how a word is pronounced. The Tashkeel character needs to be placed above or under a character. The following picture shows how the position of the Tashkeel character is adjusted according to the height and depth of the affected character

clip_image003

In this blog post I will talk about different options to display Arabic text in Silverlight, and the pros and cons of each. In a future post I will talk about options for text input, and adding Arabic support to controls like Button, Calendar, and DataGrid.

The simplest method to display Arabic text in Silverlight is to display it as an image. This has the obvious problem of the big size and lack of scalability of the bitmaps, but it may be a good option when you are trying to display an artistic text that can not be displayed using computer glyphs, this link shows an example of such text http://en.wikipedia.org/wiki/File:Mirror_writing2.jpg.

Another option to work around the limitation in Silverlight is by overlaying HTML text over the Silverlight content. This requires the Silverlight plugin to be configured in windowless mode which affects the application performance, also the text will have the limitation of the DHTML experience, but this option may be the way to go if you are using Silverlight 1.0.

The third option is to use the SilverlightRTL library available on CodePlex at http://www.codeplex.com/SilverlightRTL. You can use the TextBlock control included in the library. You will get integrated experience where you can use all the features of Silverlight with the control like Animation, Brushes … etc. The drawback of this approach is that currently optional ligature is not implemented, the only ligature available now is the mandatory Lam-Alef ligature. Also Tashkeel characters is not displayed correctly because Silverlight will display the Tashkeel glyph beside the affected glyph and not over or under it. Arabic-Indic numbers are not supported yet too.

The fourth option is to use the Glyph element, which gives extreme control over how the text will be displayed. It can let you specify the indices of the glyph to be displayed, which can be used to implement optional ligatures. The offset of the glyph can be specified, which can be used to properly display Tashkeel characters. The problem with the Glyph approach is that it is not easy to retrieve the glyph indices for a font, and set the offset manually, one way to achieve that is to print the text as XPS and collect the Glyph element from the .fpage file in the XPS file (XPS files are simply zip files, you can find an fpage file, which is a XAML file representing a page).

The fifth option is to render the text as a path. This gives extreme flexibility in defining the appearance of the text, and you can even animate the path nodes to make the text dance. The drawback of this approach is that to render the text with good quality you will need great number of nodes which will bloat the size of the content, and will overload the rendering engine if there is much text. You can get the path for the text using Vector design application like Illustrator, Expression Blend has a convert text to path feature, but unfortunately it does not work with Arabic text.

In conclusion, there are many options to display Arabic text in Silverlight, each with some advantages and limitations. My recommendation is to use Glyphs when possible, which is mostly feasible with static text, but for text coming dynamically from a DataBase for example SilverlightRTL library may be the best option.

6 comments:

Anonymous said...

Greetings,

is it possible to just 'cheat' and use an Arabic Font as the FontSource - and for RTL, just set the HorizontalAlignment property in a grid or StackPanel from left to right?

Check out http://freearabicfonts.com/

Yasser Makram said...

The Arabic font will be needed to display the glyphs, but you still need to specify apply the Bididrectional algorithm to put the glyphs in the right order, and do the shaping to select the right glyph for the character based on the position. SilverlightRTL library is built for that.

Shahrzad said...

Greetings,
I couldn't use RilverlightRTL.
would you please help how could i use this?
thanks

Yasser Makram said...

I will post an article within few days to explain how to use SilverlightRTL library.

Anonymous said...

First of all I'm not professional like you guys but I do understand one thing the RTL can be supported (Silverlight 3 BiDi)
has simply did it so it's not so hard
Now let me ask why microsoft didn't conseder this issue in thier Silverlight control.

I can't use silverlight now because of this and I hate Ajax so much So I guess that I have to stay there

Fahad said...

Salam,

Great work Yasser.

I am using Silverlight 3.0 and using the advantage of SilverLightRTL Library for the arabic support.

Had some issues earlier but everything is working now so far. Except for one thing related to TextBox.

When we type "123" in textbox. It appears as "132". Similarly "This is a test" appears as "t tse ts isih". Do you have a fix for that?

I already have the latest SilverlightRTL build from the CodePlex site.

Silverlight 4 is not an option. So the solution should be using SilverLightRTL in SilverLight 3.