Follow Me on Instagram Subscribe via RSS Feed

5th Day of Silverlight: Text Improvements

December 16, 2011

Welcome back campers for the 5th installment in my 12 Days of Silverlight series on some of the new features of Silverlight 5. So without further ado…

On the fifth day of Silverlight, the team delivered to me… text improvements.

Today’s post is sort of a wrap up from yesterday’s Link text post.  I thought it would be important because text quality is something that many people have asked for.  Each version of Silverlight has addressed it, but SL5 does a great job polishing it out.

The first area is simply text clarity and optimization.  A lot of work went into making text look clearer and easier to read.  This helps the folks who are creating magazine or book style applications.  Readability is a big plus in these type of scenarios.

Character Spacing

The next new feature to look at is called character spacing. Another aspect of text in Silverlight that people have been wanting more control over is the actual text layout.  The new CharacterSpacing property helps to address that need.  This new property has been added to the Control, TextBlock, and TextElement classes.

The CharacterSpacing property does just it says, adjusts the amount of spacing between each character.  The default value is 0.  The value is based on 1/1000 of the character width.  This is beneficial because it scales based on font size, etc.  That way you are not having to adjust on the fly if you have variable text sizes.  It will accept positive and negative numbers to give you full control.  Below is a sample of CharacterSpacing in action.  Just to prove that the spacing is set to 1/1000, if you set the CharacterSpacing to –1000, as shown in the last example, the characters will stack directly on top of each other.  Not that you will need to do this very often, but if you do need to you can.

<StackPanel>
    <TextBlock CharacterSpacing="1000"
                Text="Character Spacing set at 1000"/>
    <TextBlock CharacterSpacing="500" 
                Text="Character Spacing set at 500"/>
    <TextBlock CharacterSpacing="200" 
                Text="Character Spacing set at 200"/>
    <TextBlock CharacterSpacing="100" 
                Text="Character Spacing set at 100"/>
    <TextBlock CharacterSpacing="0" 
                Text="Character Spacing set at 0"/>
    <TextBlock CharacterSpacing="-100" 
                Text="Character Spacing set at -100"/>
    <TextBlock CharacterSpacing="-200" 
                Text="Character Spacing set at -200"/>
    <TextBlock CharacterSpacing="-500" 
                Text="Character Spacing set at -500"/>
    <TextBlock CharacterSpacing="-1000" 
                Text="Character Spacing set at -1000"/>

</StackPanel>

image

Line Spacing

Next we move on to line spacing.  SL5 introduces a LineHeight property to the Block, TextBlock, TextBox, and RichTextBox controls.  LineHeight is separate from the FontSize property.  It does not change the overall size of the text, simply the space used to display it. 

In testing the LineHeight, it seems that it will not go below the default size of the text. So if your FontSize is set to 20 and you set the LineHeight to 5, the lines will not stack on top of each other.  The default value is 0, which puts the LineHeight into an auto mode.  Since this is the actual height of the line, a negative number will throw an error.  Here is the LineHeight in action on a RichTextBlock.

<Border BorderBrush="Gray" BorderThickness="1" 
        Width="300" Height="Auto"
        VerticalAlignment="Top"
    HorizontalAlignment="Left"
        Margin="20,20,10,0">
    <RichTextBlock>
        <Paragraph>
            Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Vivamus a lorem enim. Curabitur fermentum 
blandit sem, ac scelerisque dolor feugiat a. Ut 
laoreet, purus non tempor hendrerit, lorem dolor 
congue lectus, in placerat metus eros eu purus. 
Proin dictum facilisis ornare. Aliquam varius elementum 
neque et fermentum. Phasellus vel eros ac odio 
iaculis tristique. Fusce et odio lorem, ut hendrerit 
eros. Cras sit amet justo quam. Suspendisse nec augue 
lectus. Ut non turpis at lorem viverra fringilla 
pellentesque ut turpis. Integer lobortis luctus nisi 
id fringilla. Sed eu velit neque, sit amet dapibus turpis.
        </Paragraph>
    </RichTextBlock>
</Border>
<Border BorderBrush="Gray" BorderThickness="1" 
        Width="300" Height="Auto"
        VerticalAlignment="Top"
    HorizontalAlignment="Left"
        Margin="340,20,10,0">
    <RichTextBlock LineHeight="40">
        <Paragraph>
            Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Vivamus a lorem enim. Curabitur fermentum 
blandit sem, ac scelerisque dolor feugiat a. Ut 
laoreet, purus non tempor hendrerit, lorem dolor 
congue lectus, in placerat metus eros eu purus. 
Proin dictum facilisis ornare. Aliquam varius elementum 
neque et fermentum. Phasellus vel eros ac odio 
iaculis tristique. Fusce et odio lorem, ut hendrerit 
eros. Cras sit amet justo quam. Suspendisse nec augue 
lectus. Ut non turpis at lorem viverra fringilla 
pellentesque ut turpis. Integer lobortis luctus nisi 
id fringilla. Sed eu velit neque, sit amet dapibus turpis.
        </Paragraph>
    </RichTextBlock>
</Border>

image

As you can see, there are several fine tuning text improvements in SL5.  Make sure you take advantage of them to help dial in your displays of your applications.  Your users will appreciate it.

More 12 Days of Silverlight is just around the corner, so I will see you then.

Series Navigation<< 4th Day of Silverlight: Linked and Multi-Column Text6th Day of Silverlight : Binding in Style Setters >>
Filed in: Silverlight, Silverlight 5 • Tags:

Comments (1)

Trackback URL | Comments RSS Feed

  1. Virgil says:

    Grat stuff Tony, very helpfull! Do you know something on the new simplified animation you can add to a control? I remember there was talk about that at the SL5 Firestarter.

Leave a Reply