Saturday, November 28, 2009

Silverlight 4 : Crossing Language barriers aka BiDiRTL

I have already talked about launch of Silverlight 4 Beta in my last article. We all jumped on new Silverlight 4 Beta bits and I am sure you all must be ready to build next generation web applications.

Silverlight 4 ( We all know its in Beta, so I will not use the word “Beta” again) like its older versions from version 2,3, Supports multiple languages,confused? I am talking about C#,VB.NET,IronRuby etc. which can be use to develop Silverlight applications.

But this post is not about those languages, This post is about the language which we use to communicate. A great news for people who speak “Arabic” language. Silverlight 4 not only helps you to render your content but also now you can right it the way you want, mean to say, you have now “FlowDirection” attribute with which you can write your Arabic Text from Right to Left (A buzz word for above is BiDiRTL support). All you need is just set the FlowDirection attribute and you are done ! Don’t believe what I am saying? Ok, see this :

Bidi1 More clear you can see :


I do not speak Arabic,but I got it translated via “Bing Translator” (You are free to blame Translator if some mistakes are there :) )

Source Code ? Too Simple ! :


As you can see, For this Arabic language, I am not taking any help of Culture Class,Globalization-Localization or any other resource or xml, Simply I have copied the text and pasted in my designer.

For my Arabic friends, If you guys want to shift your complete portal into Silverlight with Arabic support, you can set “FlowDirection” attribute as “RightToLeft” to your UserControl directly, if you want some part as LeftToRight or RightToLeft then offcourse you can override anywhere by reseting FlowDirection attribute. So all you need is Language skill and FlowDirection attribute as and when required. There are so many languages in world which are different in tone and different when it comes to writing, Script I mean to say. I spend my 2 years in college to learn Japanese (“Sankyu” level they say), I find it bit difficult to write especially “Kanji”, I given try for Japanese with this methodology and it worked like charm !


A humble request to Microsoft :

A Complex Japanese script renders well in Silverlight 4 Beta RichTextArea control, but when tried, It fails to render any Indian language like Devnagari Scripts, We know that it does not support Devnagari script like Arabic or Japanese but please consider this as “Feedback” and really looking ahead for Hindi and other India Languages support for Silverlight in future. Attempt made to render but it fails like this :

Bidi4 You can see that it easily renders Katakana and Hiragana,Also render Arabic well, but when Devnagari Script is pasted,It just shows those alien blocks :(

Out of 1 billion Internet population in India, around 66% of people used to with Hindi and Devnagari script (approx)


Well, coming back to our discussion, So till the time you must have realize that there is nothing special skill require to implement this feature of Silverlight 4, Now its your call to use it wisely in your business applications. you can initially try with sample POCs or implementing this into your static content web pages. A must try out feature.

How can I keep my mouth shut without shouting about data binding and that too with my all time favorite DataGrid Control ? I finally given a try to push this feature in DataGrid, Believe me, Results are more than expected ! It rocks !! All you need is declare a class with some properties and just bind it like we do normally in our loaded += event like this :

public class sigheads
           [Required(ErrorMessage = "Field Cannot be left Blank")]
           public string FirstName { get; set; }
           [Range(0, 999, ErrorMessage = "Invalid Age")]
           public int Age { get; set; }
           [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Invalid E-Mail ID")]
           public string Email { get; set; }
           public string Job { get; set; }

Now write one method GetSIGHeads() like this :

public List<sigheads> GetSIGHeads()
           List<sigheads> sglst = new List<sigheads>();

           sglst.Add(new sigheads() { FirstName = "فيكرام", Age = 27, Email = "", Job = "مطور برمجيات" });
           sglst.Add(new sigheads() { FirstName = "أنيل", Age = 40, Email = "", Job = "إدارة المشروع" });
           sglst.Add(new sigheads() { FirstName = "حيدر", Age = 28, Email = "", Job = "نائب الرئيس" });
           sglst.Add(new sigheads() { FirstName = "أحمد", Age = 27, Email = "", Job = "مدير قاعدة البيانات" });
           return sglst;

Point to make a note : I have hardcoded some values to my properties, In real situation, Data will be coming from Database (I am talking to few experts for this scenario especially in Silverlight, So may be in my coming articles, I could drop more light on the same)

Next step is bind this to grid and hit F5 and run for glass of Beer since you are going to see desired output on your screen :)


Happy ? I can see a bright smile on your face already ! :)

So I hope you like this article, As I told you, initially we will understand the concepts and features of these new bits and then we will hit hard as usual.

Moral of the Story : Arabic and other few languages now can easily get rendered inside your webpage,kudos to Team Silverlight for giving this feature, a milestone I should say.

Your valuable feedback is most welcome, Also, due to day to day boring life of 8hrs work, sometime it is not possible to do lot of research, so if anyone given try for Indian language and worked for them with these Silverlight 4 bits, do let me know, I will love to learn from you.



vikas said...

Good Article, I am hopeful on Microsoft to give support for Hindi Language.


Vikram Pendse said...

@Vikas : Indic tool is recently launched by Microsoft for your text input in regional language, However there is no official information available for support of Hindi in Silverlight (I know this is painful for all of us :( )..but right now it only offically supported for Arabic and Hebrew