Silverlight 1.1 Hebrew and Arabic Language Support

• Download QuickStart - 36.22 KB
• Download source - 128.66 KB
• Download source and binaries from CodePlex (latest version)

Presenting - Silverlight 1.1 Hebrew and Arabic Language Support

Since I've started working on Silverlight projects in Israel, I've got one constant request from every customer - "We need Hebrew support!".

So, we developed a Silverlight component that enables just that - Hebrew & Arabic Right-to-left & Align-to-right support.

• The CodePlex project page
• Online demo and lab
• A webcast showing everything done in this article

As we can all see - English text is aligned to the left and is written Left-to-Right (LTR).
But Hebrew and Arabic are written aligned to the right and are written Right-To-Left (RTL).

So let's look at the "Hello World!" samples In Blend:

(You can see that all texts are aligned-to-left and are formatted by the OS and not by Silverlight.)

However, when running the Silverlight 1.1 application in the browser, we get this:

What??? The texts are all jumbled!
Even if you don't know how to read Hebrew & Arabic - you can see that the two examples don't look the same.

Now let's see the Texts render properly using our new Silverlight 1.1 Hebrew & Arabic Language support:

We'll sum up the comparison we just did:

And without our Hebrew & Arabic support, we get this weird cross Hebrew and Arabic and English syntax:

Instructions and Feature Overview

1. Setting up the RTL Extender
2. RTL and auto align the whole page

Advanced Features

1. RTL selected TextBlocks
2. RTL TextBlocks on selected Canvases
3. Excluding TextBlocks and Canvases from being RTLed
4. Disabling the RTLExtender
5. Auto align feature explained
6. Forcing aligning to right on all TextBlocks
7. Never animate an RTLed TextBlock � animate only the parent Canvas
8. Never Rotate an RTLed TextBlock � rotate only the parent Canvas
9. RTL a TextBlock by using C# code
10. Programmatically use RTLed TextBlocks
11. Changing the TextBlock TextWrapping property from the Default.

Setting Up the RTL Extender

1. Download binaries from here and extract the DLL (JustinAngelNet.SilverlightRTL.DLL).

   

2. Create a new "Expression Blend Orcas" project in Expression Blend 2 September preview.

   

   

3. Add a reference to JustinAngelNet.SilverlighRTL.dll. (from JustinAngelNet.SilverlightRTL.zip)

   

4. Open the Expression Blend Asset library and choose RTLExtender. (Asset Library -> Custom Controls -> RTLExtender).

   

   

   

5. Place it anywhere on the form (doesn't matter where or what size)

   

   

RTL the Whole Page

1. Once the RTLExtender has been added to the form, all TextBlocks will be Right-to-left and aligned to the right.
2. Simply add a TextBlock to the page, write some content in it.

   

3. Run the sample.

   

RTL Specific TextBlock/s

1. Add another TextBlock to our page with Hebrew/Arabic.

   

2. Give it a name.

   

3. Choose the RTLExtender properties.

   

   

4. In TargetTextBlocksName write the ID of the TextBlock.

   

5. Tbx1 should be the only TextBlock this RTLExtender RTL's.

   

6. You can specify multiple specific TextBlocks like this:

   

RTL only TextBlocks on a Specific Canvas

1. Add one more TextBlock to the page (that's three by now), and group two of them to a Canvas.

   

2. Name the Canvas.

   

   

3. Set TargetCanvasesName to our Canvas/es.

   

4. Only the TextBlocks nested somewhere on this Canvas/es will be RTLed.

   

Excluding TextBlocks/Canvases from being RTLed

1. Let's say we want to RTL the entire form besides some Canvas/es or TextBlock/s. We can exclude TextBlocks by using the ExcludedTextBlocksName:

   

2. And it will be the only one of the form not RTLed:

   

3. Same goes if we want to exclude specific Canvas/es.

   

4. And the two Textblocks on myCanvas won't be RTLed, but all others on the page will.

   

Disabling the RTLExtender

1. Well, this is pretty straight forward. Marking "Disabled" will cause the RTLExtender to not RTL anything.

   

2. And the result:

   

Auto Aligning Feature

1. Add a new TextBlock to the Page and write one sentence that starts in Hebrew/Arabic, press Enter and one sentence that starts in English.

   

   

2. I'll add a rectangle on the TextBlock's borders just so you see this feature better.

   

3. Run the sample and you can see that all sentences starting with an RTLed language are aligned to the right and others are still aligned to the left.

   

4. Same feature with more text:

   

   • First sentence � starts with Hebrew -> Aligned to right.
   • Second Sentence � starts with English -> Aligned to left.
   • Third sentence � Starts with Hebrew -> Aligned to right.
   • Fourth sentence � Starts with English -> Aligned to left.

   

Force Align to Right on all Sentences (Not Based on First Character)

1. Set the ForceAllParagraphsAsRTL to true.

   

2. Run the sample, and all paragraphs are aligned to right.

   

Animating an RTLed TextBlock � Only on Parent Canvas

All animations on TextBlocks that will be RTLed must be on the Parent Canvas or RTLExtender will throw an exception.

1. Create a new storyboard that starts when the page loads up.

   

   

2. Select a TextBlock that will be RTLed, and animate it somehow (let's rotate it):

   

3. Run the sample � nothing happens.

   

4. Open the test project in Visual Studio and run it from there.

   

5. So we got an error message in Visual Studio 2008 Beta2, telling us that we can't place ANY animations directly on the TextBlock.
   We should group the TextBlock into a Canvas.

   

6. Change the animations to point to the Canvas instead of the actual Textblock.

   

   Becomes:

   

7. Rerun the sample and it will RTL correctly.

   

Transform Rotate RTLed TextBlock � Only on Parent Canvas

No RotateTransform is allowed on the TextBlock that will be RTLed or RTLExtender will throw an exception.

1. Let's take a TextBlock and rotate it.

   

2. If we run the sample through Expression Blend we get non RTLed text:

   

3. If we run the sample through Visual Studio, we get the following exception:

   

4. Let's place the TextBlock inside a Parent Canvas and rotate it instead.

   

   

5. And when we run the Sample we get RTLed code:

   

Programmatic Access � RTL TextBlocks by Code

1. We can use the RTLExtender to RTL specific TextBlocks programmatically. (let's say TextBlocks on included TargetTextBlocksName or those dynamically created at runtime).

   

2. And as we can see, it's not RTLed on the page:

   

3. We'll get a reference of the RTLExtender (or create a new one) and call the RTLTextBlock method.

   

   

4. And when we run this code the text is RTLed:

   

Programmatic Access � Using an RTLed TextBlock

1. Let's run this code:

   

   

2. After a TextBlock has been RTLed, it is no longer on the XAML page.

   

   

3. That's because it's been split into many various TextBlocks and removed from the parent children collection.

   

4. We can get a collection of TextBlocks that replace our original TextBlocks like this:

   

   

5. And when we run the sample:

   

Wrapping a TextBlock

1. Let's add a TextBlock to our page.

   

   

2. Now let's change this snuggly fitting TextBlock to have less width and more height (no breaklines were added mind you).

   

3. The text will automatically be wrapped by the RTLExtender.

   

4. We can set the TextBlock to TextWrapping.NoWrap and it will be handled by the normal Silverlight NoWrap engine:

   

   

5. We can set TextWrapping.WrapWithOverflow and it will extend slightly beyond the bounds of the TextBlock.

   

   

Questions, Follow-up and Suggestions

Bugs

You will find bugs in this project.
Seriously, I'm not that smart that I can rebuild both Hebrew & Arabic RTL and align-to-right support in 10 hours.

Please go to the project's Codeplex page here and SilverlightRTL Create a new Issue.
Write what error you received, add the appropriate minimal & relevant code.
If something isn't working as you expect it to, tell me what you expect and what actually happens.

Attach a print screen if possible.

Feature Requests

Additionally, you might want additional features (having the RTLExtender set its own fonts and download them from the server comes to mind).

Same goes, open a new issue and I'll do my best.

Check for Updates

This project will surely undergo constant changes in the first 30-60 days after publishing.
If you're using this project, please signup to our RSS feed so you get notices.
RSS feed can be found here.

Here are my personal details just in case you feel the Codeplex page isn't sufficient:
Email: J@JustinAngel.Net
Cell: +972 546 567789
Office: +972 3 9504364

I'm serious about this, don't hesitate to contact me.

Well, that's about it.

History

• Published on The Code Project - January 31, 2008
• Published on CodePlex - October 26, 2007