Microsoft Communities

Welcome to WindowsClient.net | Sign in | Join

Home › Learn › Windows Client Technical Articles › Text Clarity in WPF

Text Clarity in WPF

Since the initial release of WPF, some customers have reported problems with the clarity of small text in certain scenarios. The WPF team is working on improvements to its text rendering to address this issue in a future release. This document has been written to explain the current issues with small text rendering, give insight as to how WPF text rendering works and provide some basic workarounds to optimize small text rendering quality in currently released WPF versions. For those of you interested in staying up to date with WPF Text in general, there is also a blog about WPF text at http://blogs.msdn.com/text/Default.aspx

Overview of Text Rendering

Displaying crisp, well spaced, text at small sizes on a computer screen is a hard problem. Fonts are carefully created to optimize both crisp outlines and visually appealing spacing. Unfortunately, many times glyphs and glyph runs must be fit into spaces on the screen that adversely affect the mapping from font outline, in the font definition, to pixel placement, on the screen. There are two basic methods of rendering text, each of which has its own pros and cons. Microsoft has opted to use both methods in different situations, and this is basis for text rendering differences between WinForms and WPF applications.

  1. WinForms (GDI+)
    GDI+ uses a method that can involve adjusting glyph sizes, tweaking spacing between characters, shifting entire runs of characters, changing the glyph shape (either by manual hinting, or some automatic process), etc. These adjusted characters are then rendered on pixel boundaries. The positive effect is that the text is crisp. The negative effect is that a typeface will lose its distinctive look and that the overall size of a text run can be very inaccurate.
  2. WPF
    In WPF an effect is achieved as if you rendered the text at some high resolution and scaled down to whatever the current DPI happens to be. The positive effect is that the text characteristics (shape, size, spacing, line length, etc) adhere to the fidelity of the design of your application. This translates into better long term readability. The negative effect is that the text is likely to be blurry because glyphs will effectively be drawn on part of a pixel, and the only way to represent that is to blend the contributions to the pixel together.

The major limiting factor in the fight for clear text is display resolution. As the DPI of monitors increases, the precision with which a renderer can: follow the outlines dictated by the font file, space glyphs based on left and right side bearings, and anti alias text increases. This creates crisper text with better character/word spacing. By many estimates, to get truly clear text, monitors will need to exceed 300 dpi. Unfortunately, today we are stuck around 100 dpi. The vast majority of CRT's are 96 dpi, and most LCD monitors don't exceed 140 dpi. Given today's display technology, there is no perfect solution. The quality of WPF text differs from WinForms because of the way WPF tackled the text rendering problem. To add to all of this, there is yet another factor that affects the perceived clarity of text, Gamma Correction.

Gamma Correction deals with the fact that the human eye does not perceive brightness on a 1 to 1 ratio with the number of photons being emitted from an object. For example, a patch of your screen that emits 2 times more photons will only look about 1.4 times brighter (instead of 2 times brighter). What this means in terms of text is that the same sentence, written with the same font and weight, can look different depending on the color of the text and the color of the background. The quality and amount of gamma correction varies from renderer to renderer.

WPF Rendering

WPF attempts to bring the worlds of documents and rich UI together. We believe deeply in a DPI-independent graphics API, as this gracefully straddles the variety of hardware available today, and which is likely to increase in the future. However, it is very difficult to build a WYSIWYG (DPI-independent) system because text layout for flow documents can be very different depending on the hardware it is displayed on. A designer may create an application on a 120DPI laptop only to find horrible alignment and clipping issues when a customer runs the app on a 96DPI CRT. We believe our method of rendering provides the most flexible system to implement a WYSIWYG system.

We use an idealized grid, which is then scaled down to the desired size. The glyphs are drawn on pixel boundaries in the Y direction, but not in the X direction. Since the frequency of horizontal lines in western text is low compared to that of vertical lines, snapping to pixel boundaries in the Y direction does not cause much vertical distortion. We do not snap to pixel boundaries in the X direction to preserve the characteristics of the text, and this causes some blur in text quality. To mitigate some of this fuzziness, WPF uses a ClearType algorithm that lets us actually begin to draw characters on sub pixel boundaries. While this algorithm works well in many situations, it has a few drawbacks.

  1. ClearType
    A single pixel on a LCD screen is made up of 3 colored cells (red, green, and blue), and these cells can individually be turned on and off. The ClearType algorithm uses this fact to start rendering characters in any third of a pixel. One can roughly think of this as increasing the horizontal resolution by a factor of 3. This helps the font clarity of western languages because, as mentioned before, there are more vertical lines than horizontal lines. Thus these vertical lines can be placed with more precision. Unfortunately, East Asian languages do not have this characteristic and the advantages gleaned from clear type are not nearly as impressive. This is one reason that, even with ClearType, East Asian languages are more blurry than Western languages.

    To light a pixel, CRTs rely on a red, green, and blue electron gun shooting electrons at the screen in the same place. Not firing one of the guns only diminishes the luminance of a pixel instead of reducing its size. Therefore, sub pixel placement of text, the heart of ClearType, on a CRT is not possible.
  2. Grayscale fall back
    If ClearType is disabled or one is rendering text in certain situations where the ClearType algorithm cannot be run, WPF will use a grayscale rendering algorithm to antialias the rendered text.
  3. ClearType can cause a little color fringing
    Due to the nature of the ClearType algorithm, the borders of characters can appear to have a light tint of color.

Recommendations for Improving WPF Font Clarity

Font Size

Try and use the largest font size possible. As the font size increases, the renderer is forced to make fewer compromises to fit the text in the space provided. This will always lead crisper text. Also, make sure that you are actually using the intended font size. The two code snippets below produce very different results. The first prints “Hello World” with a text size of 10 PIXELS. The second prints "Hello World" at text size 10 POINT.

<TextBlock FontFamily ="Tahoma" FontSize ="10" Text ="Hello World" />

Hello World

<TextBlock FontFamily ="Tahoma" FontSize ="10pt" Text ="Hello World" />

Hello World

Font Face

Western Languages

Many, but not all, fonts that start with C and come installed with Windows Vista (Cambria, Calibri, Corbel, Candara, Consolas, etc...) have been designed to work well with WPF. In addition to these, fonts with robust outlines like Verdana, Georgia, etc… display well on computer screens. Ultimately the choice of font selection comes down to personal preference. In Appendix V.i there is a simple sentence rendered in 9 small sizes using 30 font faces. This should provide a starting point in differentiating text quality between common fonts.

East Asian Languages

Japanese - Meiryo is a Japanese font that balances weight, style and baselines with Latin. This font was based on the same philosophy and principles as the C* fonts and made at the same time as them. The Latin portion is a modified Verdana. The name ‘Meiryo’ means clean, clear and articulate which is a great description of this font. The Japanese font set is a .ttc around 40,000 glyphs which incorporates both Regular and Bold weight. It has also received a prestigious ‘G’ (industrial design) award in Japan.

Korean - Malgun Gothic

Simplified Chinese - MS JengHei is good but a bit light.

ClearType

The ClearType algorithm offers immediate improvements out of the box. In Vista it is enabled by default, but it must be turned on manually in Windows XP. To do so

  • Click Start, Control Panel, click Appearancce and Themes, and then click Display.
  • On the Appearance tab, click Effects.
  • Click to select the Use the following method to smooth edges of screen fonts check box, and then click ClearType in the list.
  • Once ClearType is enabled, use the ClearType tuner PowerToy. This adjusts the system's ClearType settings including pixel orientation and Gamma. Though WPF's ClearType engine is separate from GDI and WinForms, WPF still picks up these system wide settings.

- For advanced users who are comfortable playing with regedit, there are four additional WPF ClearType setting that may help improve your experience: ClearType level, Gamma level, Pixel Structure, and Text contrast level. Detailed information about each and instructions on tuning these settings can be found at http://msdn2.microsoft.com/en-us/library/aa970267.aspx. Please note that when the article says:

" The registry setting location for the ClearType level is an individual user setting that corresponds to a specific display device name: HKEY_CURRENT_USER\SOFTWARE\Microsoft\Avalon.Graphics\<displayName> "

any changes made only apply to WPF applications run by the current user on the monitor specified.

Editing these 4 keys is not a simple process. The below steps will walk you through the process

  • Open Regedit
  • Navigate to Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft
  • Avalon.Graphics does not exist by default and you will have to create it.
    • Click on Microsoft
    • Select Edit->New->Key
    • Name this key Avalon.Graphics
  • Create sub keys for each monitor you would like to modify. In general, monitors are named DISPLAYX, where X is an increasing number starting at 1. To verify this, download and run the tool MonitorInfo.exe. This tool will display the names of all monitors that Windows knows about.
    • Right click Avalon.Graphics and select New->Key
    • Set the name of this key to the name of the monitor you would like to adjust

      In this screenshot, DISPALY1 for the current user is being targeted for adjustment
  • Right click on the monitor’s key that was just created and select New->DWORD (32-bit) Value.
  • Name this DWORD and set its value according to which text property you would like to adjust (instructions in the MSDN article)

    Here the ClearType level on DISPLAY1 for the current user is set to 100%

Aliasing Text

Sometimes WPF disables the ClearType algorithm and uses grayscale anti aliasing. To be specific, these situations are as follows:

  • If ClearType is disabled in Windows settings
  • If Text is rendered to an intermediate target due to the use of a
    • Visualbrush
    • Drawingbrush
    • OpacityMask
    • Viewport2dvisual3d
    • Bitmapeffects

Currently, there are no simple ways to turn off ClearType or gray scale anti aliasing, but there are more complicated ways to by pass this step. If you do not want to use ClearType or grayscale antialiasing, follow the steps below. However, the visual example that is rendered from the source code below shows that aliased will hardly ever produce better results than either of the two antialiasing algorithms.

  • Create geometry from FormattedText by calling FormattedText.BuildGeometry
  • render that geometry with the RenderOptions.EdgeMode="Aliased" attached property.

// sample source given a stack panel declared in XAML as such
// <StackPanel x:Name="the_panel"/>
//
// the clear type anti aliased text block
 TextBlock cleartype_block = new TextBlock();
cleartype_block.Text = "The quick brown fox jumped over the lazy dog.";
cleartype_block.FontSize = 12;
cleartype_block.FontFamily = new FontFamily("arial");

// the text to be converted to geometry
FormattedText formatted_text = new FormattedText("The quick brown fox jumped over the lazy dog."), CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Arial"), 12, Brushes.Black);
// build geometry from the formatted text
Geometry text_geometry = formatted_text.BuildGeometry(new Point(0,));
// create a path that will use only greyscale antialiasing. WPF will antialias
// the path using a greyscale algorithm. since the path happens to be text,
// we will have text that has been grayscale antialiased.
 Path greyscale_path = new Path();
greyscale_path.Data = text_geometry;
greyscale_path.Fill = Brushes .Black;
// create a path that will not use any anitaliasing. since EdgeMode is set to
Aliased,
// WPF will not antialias the path. thus, resulting in aliased text.
 Path aliased_path = new Path();
greyscale_path.Data = text_geometry;
greyscale_path.Fill = Brushes .Black;
RenderOptions.SetEdgeMode(aliased_path, EdgeMode.Aliased);

the_panel.Children.Add(cleartype_block);
the_panel.Children.Add(greyscale_path);
the_panel.Children.Add(aliased_path);

Appendix

Appendix - Links

WPF Text Blog Text Tweaks If you are interested in text layout and display problems

Appendix - Font Comparison

A simple sentence has been rendered in WPF at sizes 7-14 for each of the following fonts. This was done on a Windows Vista machine using the ClearType algorithm. No ClearType tuning has been done to the machine. These screenshots are not authoritative. Results may improve or degrade depending on the machine’s setup, and these are meant to help in the process of selecting a font to use.

Arial Castellar Copperplate Gothic Lucida Console
Book Antiqua Centaur Corbel Tahoma
Bookman Old Style Century Cordia New Trebuchet MS
Calibri Century Schoolbook Cordia UPC Times New Roman
California FB Colonna MT Courier New Verdana
Calisto Consolas Garamound
Cambria Constantia Georgia
Candara Copper Hight Tower Text














Comments: 0

 You must Login to comment.

Featured Item

Page view counter