Click here to Skip to main content
Click here to Skip to main content

Silverlight 1.1 Hebrew and Arabic Language Support

By , 31 Jan 2008
Rate this:
Please Sign up or sign in to vote.

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:

image

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

image

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:

image

We'll sum up the comparison we just did:

image

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

image

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

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

    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. Choose the RTLExtender properties.

    clip_image013

    clip_image014

  4. In TargetTextBlocksName write the ID of the TextBlock.

    clip_image015

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

    clip_image016

  6. 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 three 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 ExcludedTextBlocksName:

    clip_image023

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

    clip_image024

  3. Same goes if we want to exclude 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 TextBlock's 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 aligned to the right and others are still aligned to the left.

    clip_image032

  4. Same feature with more text:

    clip_image033

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

    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 somehow (let's 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 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.

    clip_image042

  6. Change the animations to point to the Canvas instead 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 is 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 instead.

    clip_image049

    clip_image050

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

    clip_image050

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

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

image

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

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

About the Author

Justin-Josef Angel [MVP]
JustinAngel.Net, Senior .Net consultant
Israel Israel
Justin-Josef Angel is a C# Microsoft Most Valuable professional, a Senior .Net consultant in Israel with 4 years of .Net experience and has 8 years of Web experience.
 
Justin's been working this past year on two Enterprise sized Silverlight projects with his customers. During that time he's gained a real-insight into Silverlight's inner workings and how to integrate Silverlight into the real world of software development. Additionally, During that time he's developed a few well-known projects like the "Silverlight 1.0 Javascript Intellisense", "Silverlight 1.1 Hebrew & Arabic Languages support" and a few others you might know.

Justin is also a seasoned presenter with an impressive track-record of talking in front of thousands of people in Israel.
 
Justin owns the first .Net blog written in Hebrew - http://www.JustinAngel.Net .
And he also owns an additional blog with mixed Hebrew & English content - http://blogs.Microsoft.co.il/blogs/JustinAngel.
 
A full list of his articles (all 100+ of them) can be found at: http://www.JustinAngel.Net/#index
 



Comments and Discussions

 
GeneralIDE/Windows Configuration Pinmemberrgiampietro10-Apr-08 14:15 
I'm working on a Silverlight project for work and we need to add Hebrew and Arabic to an already completed Silverlight 1.0 site (we are converting it to 2.0 right now).
 
I'm wondering if I'm just doing something wrong with my VS2008 IDE settings, or maybe even Windows XP Pro setup. When ever I copy/paste Arabic or Hebrew text out of a localization file (excel or word) into the 'text' field of a textblock control, it is being pasted reversed. Meaning, the words are in the right order in the translation file (word or excel) when I copy it, but when I paste it into VisualStudio 2008 file such as a textblock control, it's 'magically' getting reversed. Do I have to change some settings on my Windows XP setup or the IDE or what? How can I correct this problem? Do I have to be running a RTL language version of Windows or something???
 
Any help/feedback would be really appreciated.
 
thanks

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 31 Jan 2008
Article Copyright 2008 by Justin-Josef Angel [MVP]
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid