What is Character Spacing in Silverlight 5 Controls

There are many new feature announced to support Text advancements in Silverlight 5 Beta. Among them, one is the character spacing. This feature adds spacing between characters inside a TextBlock, RichTextBox and other control elements.

In this post we will demonstrate the use of this new feature and also showcase a simple demo to make you understand better. Read it and start learning Silverlight 5 features.

If you are very new to Silverlight 5, you may want to read the other new features of it. I already blogged about them. You can find some of the features with step-by-step demonstration here:

• Debugging Data Bindings in XAML with Silverlight 5 Beta
• Working with Multiple Click (ClickCount) in Silverlight 5 Beta
• Step-by-Step Using ImplicitDataTemplate in Silverlight 5 Beta

Character Spacing

Every text element (including TextBlock, TextBox, Run, Bold, Italic, RichTextBox, button etc.) has a new property called "CharacterSpacing". It is actually part of the base class "Control" and "TextElement". This property is responsible for adding space between characters in the string. The higher value you enter, the characters will be more expanded. In the other hand, if you enter a lower value (let's say negative value), the characters will be more condensed. Depending on your requirement, chose the desired value.

Remember: Character spacing is part of base class "Control" and "TextElement". So, it will be available to all controls which derives from those base class.

Let's start with a small example. We will add the character spacing to TextBlock control. It is same for all other controls too. Hence, we will just demonstrate with a simple TextBlock. Let us discuss it with the following code:

<TextBlock Text="This is a normal text string without any character spacing"/>

<TextBlock Text="This is a text string with 100 character spacing" 

           CharacterSpacing="100"/>

<TextBlock Text="This is a text string with 250 character spacing" 

           CharacterSpacing="250"/>

<TextBlock Text="This is a text string with 500 character spacing"

           CharacterSpacing="500"/>

<TextBlock Text="This is a condensed text string using -100 character spacing" 

           CharacterSpacing="-100"/>

In our first TextBlock, we didn't add any character spacing and hence it will render as normal with the default zero character spacing. In the next TextBlock we added character spacing as 100, so the string will be little expanded. Similarly, the 3rd and 4th TextBlock control will be expanded in higher depth depending on the entered value. In the 5th TextBlock, as we provided a negative value to the character spacing property, the string will be more condensed. If we reduce it more you will see more condensed string in the UI.

The above XAML code will produce the below output in the string:

How Character Spacing works?

The distance between characters of text in the control measured in 1000ths of the font size. If you have a font size of 10 pixel and you provided character spacing of 500 pixel, 5 pixel will be the actual spacing between each character.

The simple calculation logic is as below:

Actual Spacing between Characters = (Font Size * Provided Character Spacing ) / 1000;

In our case, it is: (10 * 500) / 1000 = 5 pixel.

Hope, this post was clear and to the point to demonstrate you the basic of this feature in terms of the new property in the Control and TextElement class. Stay tuned for my next post where I will demonstrate you other advancements in Silverlight 5 texts.

I also tweet. Follow me on twitter @kunal2383 for article update and/or any other news announcements. Appreciate your feedback and vote. Happy Coding.