Presenting - Silverlight 1.1 Hebrew & 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.
* www.Codeplex.com/SilverlightRTL - The codeplex project page
* www.JustinAngel.Net/SilverlightRTL - online demo & lab
* http://ttvv.tv/users/publicftp/justinangel/SilverlightRTL.wmv - A webcast showing everything done in this article
Standard hello world examples
This is how we would expect each "hello world!" sample to render: (using the browser rendering engine)
שלום עולם!
مرحبا عالم!
hello world!
As we can all see - English text is aligned to left and is written Left-to-Right (LTR).
But Hebrew & Arabic are written aligned to right and are written Right-To-Left (RTL).
So let's see the "hello world!" samples In Blend:
(You can see 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 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:
| Rendering Comparison |
Normal Silverlight 1.1
RTL (Right-to-Left): Not Supported
Align-to-right: Not Supported | |
Silverlight 1.1 Hebrew &
Arabic Language support
RTL: Supported
Align-to-right: Supported
| |
| HTML RTL: Supported
Align-to-right: Supported | שלום עולם! مرحبا عالم! hello world! |
Blend
RTL: Edit Mode only
Align-to-right: Edit mode only | |
Let's see if our solution renders correctly some mixed text (Hebrew, Arabic, Numbers, punctuation and English).
We'll try to use Silverlight on this text:
Using the new Hebrew & Arabic support we get this in Silverlight on a TextBlock with a fire ForeGround image and black Background:
And without our Hebrew & Arabic support we get this weird cross Hebrew & Arabic & English syntax:
Instructions & feature overview:
1. Setting up the RTL Extender
2. RTL and auto align the whole page
Advanced features:
3. RTL selected TextBlocks
4. RTL TextBlocks on selected Canvases
5. Excluding TextBlocks and Canvases from being RTLed
6. Disabling the RTLExtender
7. Auto align feature Explained
8. Forcing aligning to right on all TextBlocks
9. Never animate an RTLed TextBlock – animate only the parent Canvas.
10. Never Rotate an RTLed TextBlock – rotate only the parent canvas.
11. RTL a TextBlock by using C# code
12. Programmatically use RTLed TextBlocks.
13. Changing the TextBlock TextWrapping property from the Default.
Setting up the RTL Extender
1. Download Binaries from: http://www.Codeplex.com/SilverlightRTL 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 form, all TextBlocks will be Right-to-left and Aligned to 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.
4. Choose the RTLExtender properties.
5. In TargetTextBlocksName write the ID of the TextBlock.
6. Tbx1 should be the only TextBlock this RTLExtender RTL's.
7. 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 3 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 ExcludedTextBlcoksName:
2. And it will be the only one of the form not RTLed:
3. Sames goes if we want to execlude 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 TextBlocks 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 Aigned to right and others are still aligned to the left.
4. Same feature with more text:
5. 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 à Aigned 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 some how. (let's say 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 VS2008 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 instand of the Actual textblock.
Becomes:
7. Rerun the sample and it will RTL correctly.
Transform Rotate RTLed TextBlock – only on parent canvas
No RotateTransform are 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 instand.
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 programmeticly. (let's say TextBlocks on included in "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.
