Silverlight 5 Hosting – Text Clarity and Pixel Snapping in Silverlight 5

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.

About ASPHostPortal.com

ASPHostPortal.com is Microsoft No #1 Recommended Windows and ASP.NET Spotlight Hosting Partner in United States. Microsoft presents this award to ASPHostPortal.com for ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2012, ASP.NET 4.5, ASP.NET MVC 4.0, Silverlight 5 and Visual Studio Lightswitch. Click here for more information

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

The markup to generate one block of text is shown below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

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

Comments are closed.

Sponsors

JaringanHosting.com

Cheap Reseller Hosting

Best Blog Hosting Provider

Best European ASP.NET 4.0 Hosting Provider