Silverlight 1.1 Hebrew and Arabic Language Support – SilverlightRTL

26 באוקטובר 2007

3 תגובות

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:

image

(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:
image

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:

image

 

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

image
Silverlight 1.1 Hebrew &
Arabic Language support

RTL: Supported
Align-to-right: Supported

image

HTML

RTL: Supported
Align-to-right: Supported

שלום עולם!
مرحبا عالم!
hello world!
Blend

RTL: Edit Mode only
Align-to-right: Edit mode only

image

 

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:

שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012.

hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456. hello world 789.012. مرحبا عالم 123.456. hello world 789.012. שלום עולם 123.456.

Using the new Hebrew & Arabic support we get this in Silverlight on a TextBlock with a fire ForeGround image and black Background:
  image

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

image 

 

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).

image 

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

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

 
image

 

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

clip_image005

image

 

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

 

 

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.

clip_image009

3.       Run the sample.
clip_image010

 

RTL specific TextBlock/s

 

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

2.       Give it a name.
clip_image012

3.        

4.       Choose the RTLExtender properties.
clip_image013 

clip_image014

 

5.       In TargetTextBlocksName write the ID of the TextBlock.

clip_image015

 

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

clip_image016

 

7.       You can specify multiple specific TextBlocks like this:

clip_image017

 

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.
clip_image018

2.       Name the Canvas.

clip_image019

 

clip_image020

 

3.       Set TargetCanvasesName to our canvas/es.

clip_image021

 

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

clip_image022

 

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:
clip_image023

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

 

3.       Sames goes if we want to execlude specific Canvas/es.
clip_image025

 

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

clip_image026

 

 

Disabling the RTLExtender

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

clip_image027

 

2.       And the result:

clip_image028

 

 

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.

clip_image029
clip_image030

 

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

 

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.

clip_image032

 

4.       Same feature with more text:
clip_image033

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.

clip_image034 

 

 

Force Align to Right on all sentences (not based on first character)

1.       Set the "ForceAllParagraphsAsRTL" to true.
clip_image035

 

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

clip_image036

 

 

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.

clip_image037
clip_image038

 

2.       Select a TextBlock that will be RTLed, and animate it some how. (let's say rotate it)

clip_image039

 

3.       Run the sample – Nothing happens.

clip_image040

 

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

 

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.

clip_image042

6.       Change the animations to point to the Canvas instand of the Actual textblock.

clip_image043

 

Becomes:

 

clip_image044

 

7.       Rerun the sample and it will RTL correctly.

clip_image045

 

 

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.

clip_image046

 

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

 

3.       If we run the sample through visual studio we get the following exception:

clip_image048

 

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

clip_image049

 

clip_image050

 

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

clip_image051

 

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)

 

clip_image052

 

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

clip_image053

 

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

clip_image054

 

clip_image055

 

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

clip_image056

 

 

Programmatic Access – Using an RTLed TextBlock:

1.       Let's run this code:

clip_image057

 

clip_image058

 

 

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

clip_image059

 

clip_image060

 

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

clip_image061

 

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

clip_image062

 

clip_image063

 

5.       And when we run the sample:

clip_image064

 

 

Wrapping a TextBlock

1.       Let's add a TextBlock to our page

 

clip_image065

 

clip_image066

 

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

 

clip_image067

 

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

clip_image068

 

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

clip_image069

 

clip_image070

 

 

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

clip_image071

 

clip_image072

 

Questions, follow-up and suggestions

Bugs

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

Please go to the project's codeplex page at http://www.codeplex.com/SilverlightRTL and 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.

image


Feature requests

Additionally, you might want additional features (having the RTLExtender set it's 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 at:
http://www.codeplex.com/SilverlightRTL/Project/ProjectRss.aspx

 

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.

Justin-Josef Angel,

Senior .Net consultant, Microsoft C# MVP

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

3 תגובות

  1. byter30 באוקטובר 2007 ב 3:24

    Can you post an example how to use this with jscript while setting the text dynamically?
    it doesn't seem to work.
    hope you reply soon.
    bytewiz9@hotmail.com

    להגיב
  2. Justin-Josef Angel [MVP]30 באוקטובר 2007 ב 7:27

    hello byter,

    please see the part of the article called "Programmatic Access – RTL TextBlocks by Code" which demonstrates the use of the "RTLExtender.RTLTextBlock" method.

    Javascript access will only be available for SL 1.1 and not SL 1.0 as this solution implements custom user controls and relies extensively on the .Net framework.

    להגיב