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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          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



About the Author

Srinath M S

I would love to leave a footprint in this flat world

Comments

  • Slashed Zero

    Posted by dudiav on 06/20/2011 04:15pm

    Hi, I failed to use your sample for slashed zero (Typography.SlashedZero="True"). I'm using OpenType Adobe "OCR B Std" font. Could you please show me a sample that works with slashed zero? Thanks, Dudi

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • IBM Worklight is a mobile application development platform that lets you extend your business to mobile devices. It is designed to provide an open, comprehensive platform to build, run and manage HTML5, hybrid and native mobile apps.

  • Live Event Date: November 18, 2014 @ 11:00 a.m. EST As you embrace the hybrid world of on-premise and cloud applications, often accessed via mobile devices, you now have to be concerned that cybercriminals have yet another vehicle to attack your business. In fact, the average cost of cybercrime has increased over 10% in the last year, and this applies to businesses of all sizes. Attend this webinar to hear David Monahan, Security Research Director at EMA, and Dana Epp, recognized security luminary from …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds