These days I’m working on a video course about Microsoft WPF foundations. And today I want to address some basic notions that every UI-developer should be aware of and be able to explain them. That will become an entry point for my WPF tutorial. The notions I’m talking about are the following:

  • DPI (dots per inch), PPI (pixels per inch). What’s the difference?
  • Pixel
  • Raster Graphics and Vector Graphics
  • Independent Pixel
  • Aspect Ratio
  • ClearType rendering

First of all, it’s better (even just for self-education) to understand what’s the difference between dots and pixels. Dots or Pixels per inch is a measurement of density, the number of individual dots or pixels in a line of 1 inch in width. Dots are relevant only for printing, because monitors do not have dots, they have pixels. A pixel is a physical point in a raster image and a raster image is a grid of pixels. Generally speaking, the more pixels an image consists of, the better it’s quality, the better an image resembles the original.

As opposed to raster graphics, vector graphics is a mathematical representations of an image. Vector image consists of mathematical shapes like lines, polylines, polygons, circles, ellipses and so on. The thing is that vector image formats are specifically suited for this kind of representation. All those shapes are described in vector image-files and graphics viewers and editors should know how to read those descriptions and correctly render the images. At to formats, SVG, seemingly, is the most popular 2D format for vector graphics.

Both raster and vector graphics have their own advantages and disadvantages. Vector graphics can be scaled up without any loss in quality, because any mathematical shape can be freely and infinitely stretched. Unfortunately, it’s much harder to create complex graphics in a vector format. Another peculiarity is that small vector images can look pretty bad; when such small vector-images representing fonts are rasterized, rasterization process uses hints in order to make the final image smoother.

In short, raster graphics deal more practically than vector graphics with photographs and photo-realistic images, while vector graphics often serve better for typesetting or for graphic design. WPF graphics is vector-based.

This information is valuable in order to understand the Resolution Independence of WPF. How exactly WPF supports it? WPF uses logical units in order to properly scale up or down graphics. One logical unit is defined as 1/96 of an inch. What influences on the actual size of a final image rendered by WPF? Two things: Screen DPI and system DPI setting. Let’s consider the following case. You have a 21-inch monitor of 1920 by 1080 pixels resolution. Screen DPI = square of((1920^2+1080^2))/21=105 DPI. Let’s pretend your system DPI setting is set to 96 DPI. Thus, Physical Unit Size of a WPF unit will be equal to 1 pixel. But the real pixel density is 105 DPI, so the real final size of a button declared in XAML as 96 by 96 will be a little bit smaller than actual 1 inch.

Aspect ratio is the proportional relationship between its width and its height. The golden format nowadays is 16:9. By the way, the resolution 1920 by 1080 pixels is actually a 16:9 in proportions.

The last notion I want to address is a WPF font rendering system. By default, WPF uses ClearType in order to render any texts. As Wikipedia says, “When the elements of a type character are smaller than a full pixel, ClearType lights only the appropriate subpixels of each full pixel in order to more closely follow the outlines of that character. Text rendered with ClearType looks “smoother” than text rendered without it, provided that the pixel layout of the display screen exactly matches what ClearType expects.”

Before WPF 4, rendering of small fonts was flawed. Small fonts were blurred if they were rendered by WPF. The good news is that with .NET 4 this was totally fixed.

All in all, WPF provides the attached property TextOptions.TextFormattingMode which can be set to Ideal or Display. As a rule of thumb, you should use Ideal mode if the font size is greater than 14pt. If the font size is equal or less than 14pt, then actually on most modern displays for most people, font has been rendered by WPF should look acceptable. Though, you should be aware of TextOptions.TextFormattingMode and TextOptions.TextRenderingMode attached properties which can be used in order to more granularly manage the font rendering process.

The attached property TextOptions.TextRenderingMode manages the antialiasing mode used by WPF when rendering text. It can be set to one of the following values:

  • Auto – Use ClearType
  • Aliased – No antialiasing will be used to draw text.
  • Grayscale – Grayscale antialiasing will be used to draw text.
  • ClearType – ClearType antialiasing will be used to draw text.

Here is how you can apply these two properties:

[code language=”xml”]
//In all cases here WPF uses GDI compatible text metrics in order to better render
//small font sizes, but different anti-aliasing techniques.
<StackPanel TextOptions.TextFormattingMode="Display">
<TextBlock Text="Rendering with ClearType technology."/>;

<TextBlock TextOptions.TextRenderingMode="Grayscale">
Grayscale antialiasing
</TextBlock>

<TextBlock TextOptions.TextRenderingMode="Aliased">
Aliased option
</TextBlock>
</StackPanel>
[/code]

I was wondering if it is appropriate to include into the Introduction section some basic notions from the field of UI-development we have discussed in this blog post.
Take care and subscribe to my blog. You don’t want to miss the next interesting talk.