Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Silverlight 5 Text Clarity and Pixel Snapping

Pete Brown - 02 September 2011

One of the best improvements in WPF 4 was fixing the text clarity issue once and for all. It may seem trivial, but in a system that supports a vector-based scalable UI as well as animation of text elements, it's not quite as easy to solve it seems. Once we get PC displays with DPI similar to that we have on hand-held devices, snapped or unsnapped text will become a non-issue.

By necessity of its small download footprint and its cross-platform nature, Silverlight couldn't take the same approach used by WPF (which is tied 100% to Windows). However, the team has added a more portable implementation of the code which helps improve text clarity and is API-compatible with WPF.

Test your text rendering on the mac. This is one area where Silverlight differs significantly between the two platforms. That's due to ClearType being a Microsoft technology, and Mac users generally not wanting pixel-snapped text.

On Windows, Silverlight defaults to ClearType unless you specifically disable it through the TextOptions. On the Mac, ClearType is not available and grayscale rendering is the only text rendering option.

In the examples below, I set the options on each TextBlock individually. However, in a real application, you'll typically set the option at the root UserControl / Page and let the option flow through to the rest of the elements on the page.

Here's a section of font sizes from 8 to 30, showing the results of the different text options. Click the image to see it full-scale (browser resizing will obscure the font smoothing, so be sure you're seeing it at 100%)

image

The markup to generate one block of text is shown below

<StackPanel Margin="10">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize"
Value="8" />
</Style>
</StackPanel.Resources>
<TextBlock Text="Hello World, from Pete Brown: Default " />
<TextBlock Text="Hello World, from Pete Brown: Display, Fixed, Cleartype"
TextOptions.TextFormattingMode="Display"
TextOptions.TextHintingMode="Fixed"
TextOptions.TextRenderingMode="ClearType" />
<TextBlock Text="Hello World, from Pete Brown: Display, Animated, ClearType"
TextOptions.TextFormattingMode="Display"
TextOptions.TextHintingMode="Animated"
TextOptions.TextRenderingMode="ClearType" />
<TextBlock Text="Hello World, from Pete Brown: Display, Fixed, Aliased"
TextOptions.TextFormattingMode="Display"
TextOptions.TextHintingMode="Fixed"
TextOptions.TextRenderingMode="Aliased" />
<TextBlock Text="Hello World, from Pete Brown: Display, Fixed, Grayscale"
TextOptions.TextFormattingMode="Display"
TextOptions.TextHintingMode="Fixed"
TextOptions.TextRenderingMode="Grayscale" />
<TextBlock Text="Hello World, from Pete Brown: Ideal, Fixed, Cleartype"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextHintingMode="Fixed"
TextOptions.TextRenderingMode="Cleartype" />
</StackPanel>

The options you choose will be specific to the problems you're trying to solve. In general, if the default settings work for you, then stick with that. If you know you're going to use text in a specific way and wish to optimize for that usage or for the typeface you're using, or contrast/overlay situation you have, you can do that. You are in control.

           
posted by Pete Brown on Friday, September 2, 2011
filed under:            

2 comments for “Silverlight 5 Text Clarity and Pixel Snapping”

  1. Peter Kuhnsays:
    I've been waiting for this ever since I started working with Silverlight 2 - personally, and also to finally stop customer complaints. It's amazing how much readability can be improved with this for smaller font sizes on PC displays. Well done!

    -Peter

    Btw. I fully agree with the DPI rant - also want more!
  2. linkersays:
    Yey text looks a lot better on monitor screen with the "display" text mode. Unfortunatelly the cosmopolitan theme is not optimized for it and the fonts look blurry even with display mode and "fixed" hinting. Also in cosmopolitan, I don't know that if this is a bug or a feature, but setting the text options on a parent content control does not affect most of its child controls - for example label is affect, but textbox/textblock/button/etc.. are not. I have to set the text options on every control manally.

Comment on this Post

Remember me