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.
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
- Setting up the RTL Extender
- RTL and auto align the whole page
- RTL selected
TextBlocks on selected
Canvases from being RTLed
- Disabling the
- Auto align feature explained
- Forcing aligning to right on all
- Never animate an RTLed
TextBlock – animate only the parent
- Never Rotate an RTLed
TextBlock – rotate only the parent
- RTL a
TextBlock by using C# code
- Programmatically use RTLed
- Changing the
TextBlock TextWrapping property from the Default.
Setting Up the RTL Extender
- Download binaries from here and extract the DLL (JustinAngelNet.SilverlightRTL.DLL).
- Create a new "Expression Blend Orcas" project in Expression Blend 2 September preview.
- Add a reference to JustinAngelNet.SilverlighRTL.dll. (from JustinAngelNet.SilverlightRTL.zip)
- Open the Expression Blend Asset library and choose
RTLExtender. (Asset Library -> Custom Controls -> RTLExtender).
- Place it anywhere on the form (doesn't matter where or what size)
RTL the Whole Page
- Once the
RTLExtender has been added to the form, all
TextBlocks will be Right-to-left and aligned to the right.
- Simply add a
TextBlock to the page, write some content in it.
- Run the sample.
RTL Specific TextBlock/s
- Add another
TextBlock to our page with Hebrew/Arabic.
- Give it a name.
- Choose the
TargetTextBlocksName write the ID of the
Tbx1 should be the only
- You can specify multiple specific
TextBlocks like this:
RTL only TextBlocks on a Specific Canvas
- Add one more
TextBlock to the page (that's three by now), and group two of them to a
- Name the
TargetCanvasesName to our
- Only the
TextBlocks nested somewhere on this
Canvas/es will be RTLed.
Excluding TextBlocks/Canvases from being RTLed
- Let's say we want to RTL the entire form besides some
TextBlock/s. We can exclude
TextBlocks by using the
- And it will be the only one of the form not RTLed:
- Same goes if we want to exclude specific
- And the two
myCanvas won't be RTLed, but all others on the page will.
Disabling the RTLExtender
- Well, this is pretty straight forward. Marking "Disabled" will cause the
RTLExtender to not RTL anything.
- And the result:
Auto Aligning Feature
- 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.
- I'll add a rectangle on the
TextBlock's borders just so you see this feature better.
- 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.
- 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)
- Set the
- 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
RTLExtender will throw an exception.
- Create a new storyboard that starts when the page loads up.
- Select a
TextBlock that will be RTLed, and animate it somehow (let's rotate it):
- Run the sample – nothing happens.
- Open the test project in Visual Studio and run it from there.
- So we got an error message in Visual Studio 2008 Beta2, telling us that we can't place ANY animations directly on the
We should group the
TextBlock into a
- Change the animations to point to the
Canvas instead of the actual
- Rerun the sample and it will RTL correctly.
Transform Rotate RTLed TextBlock – Only on Parent Canvas
RotateTransform is allowed on the
TextBlock that will be RTLed or
RTLExtender will throw an exception.
- Let's take a
TextBlock and rotate it.
- If we run the sample through Expression Blend we get non RTLed text:
- If we run the sample through Visual Studio, we get the following exception:
- Let's place the
TextBlock inside a Parent
Canvas and rotate it instead.
- And when we run the Sample we get RTLed code:
Programmatic Access – RTL TextBlocks by Code
- We can use the
RTLExtender to RTL specific
TextBlocks programmatically. (let's say
TextBlocks on included
TargetTextBlocksName or those dynamically created at runtime).
- And as we can see, it's not RTLed on the page:
- We'll get a reference of the
RTLExtender (or create a new one) and call the
- And when we run this code the text is RTLed:
Programmatic Access – Using an RTLed TextBlock
- Let's run this code:
- After a
TextBlock has been RTLed, it is no longer on the XAML page.
- That's because it's been split into many various
TextBlocks and removed from the parent children collection.
- We can get a collection of
TextBlocks that replace our original
TextBlocks like this:
- And when we run the sample:
Wrapping a TextBlock
- Let's add a
TextBlock to our page.
- Now let's change this snuggly fitting
TextBlock to have less width and more height (no breaklines were added mind you).
- The text will automatically be wrapped by the
- We can set the
TextWrapping.NoWrap and it will be handled by the normal Silverlight
- We can set
TextWrapping.WrapWithOverflow and it will extend slightly beyond the bounds of the
Questions, Follow-up and Suggestions
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.
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:
Cell: +972 546 567789
Office: +972 3 9504364
I'm serious about this, don't hesitate to contact me.
Well, that's about it.
- Published on The Code Project - January 31, 2008
- Published on CodePlex - October 26, 2007