Typography in Windows Presentation Foundation (WPF)

Introduction

“About 80% of the time people spend with their PC is to either read or write. This should come as no surprise when you realize that text is essentially how the machine talks back to you, and until we have a technology that would allow it to interject thoughts directly into our brains, text will most likely continue to be the way we receive information from the computer screen.” – An excerpt from MSDN blog on Text Rendering talks about the need to have good display of Text to the user.

If you have not heard of Typography, the wiki link on Typography would be your first stop. Typography is said to be the technique of arranging text and its design.

There’s a lot imbibed into WPF Typography from the imminent knowledge of a Typographer. Nonetheless, it would be fair to say that WPF provides the rich-interface only with the advanced features like TextDecoration, Animations and Typography. WPF lets us discover the rich typographic features available in both the OpenType Fonts. And in particular, the ClearType font rendering that uses sub-pixel spacing and antialiasing is worth mentioning.

In this article, we will see few techniques of Typography in WPF that will help us do the text manipulations.

The typographic features in WPF:

  • Includes the better quality in terms of Quality and the Text Rendering,
  • Includes the OpenType typography support,
  • Include features like bidirectional text, Unicode features,
  • Includes kerning and number alignment,
  • Capitalization of letters in words (known as Ligatures),
  • Usage of custom font weights,
  • And the enhanced support for fonts.

These features were not part of the GDI and hence WPF is the only programming interface to the OpenType features. This enables you to alter the ways in which the Text is rendered.

The OpenType Font is an extension to the TrueType font and was developed by Microsoft with Adobe. The OpenType font provides various new capabilities that are not part of the Clear type font. You can check all the Features of the OpenType font here.

CAPITALS are the typographical elements that control the text rendering in capital-styled glyphs. We know that the OpenType font supports the styling formats such as small capitals, petite capitals, titling, and capital spacing and others, these styling formats allow you to control the appearance of capitals.

The following XAML code snippet shows textblocks with various kinds of Typographic Capital properties applied:

  <Window x_Class="Typography.MainWindow"
          
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="Typography in WPF" Height="350" Width="525" FontFamily="Palatino Linotype">
      <Grid>
          <Grid.RowDefinitions>
              <RowDefinition></RowDefinition>
              <RowDefinition></RowDefinition>
              <RowDefinition></RowDefinition>
              <RowDefinition></RowDefinition>
              <RowDefinition></RowDefinition>
              <RowDefinition></RowDefinition>
              <RowDefinition></RowDefinition>
          </Grid.RowDefinitions>

          <TextBlock  Grid.Row="0" Name="tb1"  Typography.Capitals="AllPetiteCaps">WPF in AllPetiteCaps</TextBlock>
          <TextBlock  Grid.Row="1" Name="tb2" Typography.Capitals="AllSmallCaps">WPF in AllSmallCaps</TextBlock>
          <TextBlock  Grid.Row="2" Name="tb3" Typography.Capitals="Normal">WPF in Normal</TextBlock>
          <TextBlock  Grid.Row="3" Name="tb4" Typography.Capitals="PetiteCaps">WPF in PetiteCaps</TextBlock>
          <TextBlock  Grid.Row="4" Name="tb5" Typography.Capitals="SmallCaps">WPF in SmallCaps</TextBlock>
          <TextBlock  Grid.Row="5" Name="tb6" Typography.Capitals="Titling">WPF in Titling</TextBlock>
          <TextBlock  Grid.Row="6" Name="tb7" Typography.Capitals="Unicase">WPF in Unicase</TextBlock>

      </Grid>
  </Window>

This produces the following window.

WPF Code Output
Figure 1

The Typography property can be accessed through the code too.

   myTextBlock1.Typography.Capitals = FontCapitals.AllPetiteCaps;
   myTextBlock2.Typography.Capitals = FontCapitals.AllSmallCaps;

You might have noticed that these are inherited and attached properties that can be set on any element that renders text. The text and the graphic properties can be used side-by side to produce rich text rendering. The Text can also be mingled with Media too.

The other typographic options on the Text Elements include the Kerning, Slashed Zero, Variants etc. The typography VARIANTS allow you to render the text as Superscript, Subscript or others for an OpenType font. However, this variant feature is strictly limited to only the text contained with the Run element.

  <Window x_Class="Typography.MainWindow"
  	…>
          <Grid>
          <Grid.RowDefinitions>
              <…>
   </Grid.RowDefinitions>
      		<TextBlock  Grid.Row="0"><Span>Code<Run Typography.Variants="Inferior">Guru</Run>
  	</Span></TextBlock>
    <TextBlock  Grid.Row="1"><Span>Code<Run Typography.Variants="Normal">Guru</Run>
  	</Span></TextBlock>
  <TextBlock  Grid.Row="2"><Span>Code<Run Typography.Variants="Ordinal">Guru</Run ></Span></TextBlock>
  <TextBlock  Grid.Row="3"><Span>Code<Run Typography.Variants="Ruby">Guru</Run></Span></TextBlock>
  <TextBlock  Grid.Row="4"><Span>Code<Run Typography.Variants="Subscript">Guru</Run></Span></TextBlock>
  <TextBlock  Grid.Row="5"><Span>Code<Run Typography.Variants="Superscript">Guru</Run></Span></TextBlock>
      </Grid>
  </Window>

The above XAML produces this:

XAML Code
Figure 2

The entire list of Typographic properties can be found in MSDN. The link is provided in the references section.

Other valuable typographic property that should be used very often is the NUMERAL ALIGNMENT property. Text with OpenType fonts support both proportional and tabular formatting. Check the following sample from MSDN. The left section is proportional and the right is tabular.

MSDN WPF sample
Figure 3

________________________________________

The other primary stuff of Typography includes the enhanced international text and the enhanced font support.

There is neat little blog post on the MSDN blog which talks about the Advances in Typography and text rendering in the Windows 7 operating system titled “Engineering Windows 7”. Click here to read it. It talks of the need to have better text rendering.

Resources

MSDN intro on Typography
Microsoft Typography
Typography on WikiPedia
Properties of Typography object
Typography NumericalAlighment
Advances in typography and text rendering in Windows 7

Related Articles

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read