Sunday, November 29, 2009

Silverlight 4 Native Arabic Support Deep Dive

Finally Silverlight received native RTL support in its fourth release. In this post I will take a deep look into the basic and advanced features of the Arabic typography and how Silverlight 4 supports them.
1- Basic Bi-directional ordering and shaping
The Arabic language is written from right to left and each character is represented by a different glyph according to its position in a sentence. Basic tests show that Silverlight 4 correctly performs Arabic bi-directional ordering and shaping. The following screenshot shows Arabic text rendered in SIlverlight 4

2- Mixed Text
In Arabic rendering the situation gets a little bit more complex when Arabic text is mixed with English text. Silverlight 4 will not render mixed text correctly unless the FlowDirection property is set to RightToLeft. The following screenshot shows the rendering of mixed text with the FlowDirection set to RightToLeft and LeftToRight

3- Arabic Diacritics (Tashkeel):
Arabic Diacritics are special glyphs placed over or under a character that affects the pronunciation and the meaning of a word. When rendering Tashkeel with the built-in Arial font, the Tashkeel glyphs are trimmed off tall characters like AlefThe following screenshot shows this behavior
After closer investigation, it turned out that the font was the issue not the rendering engine. The following screenshot shows the same text rendered using Decotype’s Naskh font

4- Optional Ligatures
Some fonts has special glyphs for specific character sequences to enhance the visual look. I was very pleased to find out that the rendering engine supports optional ligatures. The following screenshot shows a sentence rendered in Silverlight 4 using Naskh font with optional ligature
5- Arabic Indic Numbers
In eastern Arab world, the Arabic-Indic numbers is used for representing numeric glyphs. I am not sure if it is not supported or I am missing a setting to enable this feature.

6- Calendar
Since Silverlight 2 and the built-in Calendar control uses the application culture to render month names, this caused the text to be unreadable in Silverlight 2 and 3 but it is now fixed in Silverlight 4. The following screenshot shows a calendar control with the culture set to ar-EG. The numbers here are western Arabic numerals, while it should have been Arabic-Indic.

Unfortunately there is a bug with the Calendar control as result of the control using the local calendar for date calculation, which is the Hijri calendar in the case of Saudi culture, but the Georgian calendar was used for displaying data. Instead of fixing this issue, the control disables the date localization in case of Saudi culture. I hope this issue is fixed by Silverlight 4 release. The following screenshot shows the rendering of a Calendar control with the culture set to ar-SA

7- Word Wrapping and Text Trimming
Word wrapping seems to work fine with Arabic text, but unfortunately the new Text Trimming feature of Silverlight 4 does not work correctly. The following screenshot show how Silverlight 4 renders trimmed text and the wrong position of the elipsis

8- Designer Support
Unfortunately the situation gets very ugly here, Blend 4 Preview does not support FlowDirection at all. Visual Studio 10 supports FlowDirection settings but very buggy. Grid columns resizing behaves oddly when FLowDirection is RightToLeft, and controls are rendered in the wrong position. The following screenshot shows a TextBlock with margin set to 0, but rendered using a negative margin

It is very exciting to finally have RTL support in Silverlight 4. The text rendering engine is descent, but the built-in fonts has poor support for Arabic typography. There are some issues includign the support for Arabic-Indic numbers, but the biggest issue is lack of designer support which will make developing Arabic Silverlight applications a real pain. I hope that we will get designer support soon. This post was a basic test of RTL features, I need to perform more tests with the new RichText, printing, working out of browser, performance, mac OS X rendering … etc. So stay tuned for a follow-up post soon.


hwsoderlund said...

Nice to finally see som real life testing of the RTL support. Hopefully things will be improved for RTM. Thank you for this article. Now I can finally give our customers facts instead of educated guesses.


Mark Boulter (Microsoft) said...

Have you tried the RTL support in the WPF designer in VS 2010? I'd be interested in your feedback on that.
(markbou, Microsoft)