Chapter 9: OpenType Font Support

In this chapter, we’ll take a look at OpenType support including ligatures, alternatives and stylistic sets, font capitals, fractions and number formats, and variants including superscript and subscript.

Numbers and, in particular, fractions, present some unique challenges when formatting text for display. Numbers have different alignment needs than plain text, especially when displaying a table of numbers to be added together. Numbers in fractions also need to be displayed differently when they're the numerator or denominator. Even that changes if you consider side-by-side fractions versus the traditional top over bottom fractions.

Silverlight supports the different number alignment values through the NumeralAlignment and NumeralStyle attached properties of the Typography object. It even supports turning slashed zeros on or off using the SlashedZero attached property. Gabriola doesn't do anything special in those instances, so we'll leave them along for this example.

If the OpenType font supports different fraction representations, so does Silverlight. Fortunately, Gabriola also supports two of the three fractional representations as shown in figure 4.

Figure 4 Normal and side-by-side slashed representations of fractions. I certainly prefer the slashes over the normal, myself.

Unlike, say, typing a lengthy document in Microsoft Word and having auto-substitution of fractions happen as you type, in Silverlight, you still have separate characters for each part of the fraction and aren't limited to the basic less-than-one fractions you normally get with substitution.

In fact, when formatting, Silverlight and OpenType automatically figure out the numerator and denominator based upon the position of the slash character. That really keeps your markup clean. Listing 4 shows how to use this feature.

Listing 4 Representing fractions using OpenType

<Grid x:Name="LayoutRoot" Background="White">
  <StackPanel>
    <StackPanel.Resources>
      <Style TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Gabriola" />
        <Setter Property="FontSize" Value="75" />
        <Setter Property="HorizontalAlignment" Value="Center" />
      </Style>
    </StackPanel.Resources>
  
    <TextBlock Text="1/2 2/3 5/4 6/8 112/37 Normal" #A
               Typography.Fraction="Normal" />
 
    <TextBlock Text="1/2 2/3 5/4 6/8 112/37 Slashes" #B
               Typography.Fraction="Slashed" />
 
    </StackPanel>
</Grid>
 
#A Normal
#B Slashes

In this listing, I simplified the style and removed the Text property setter, as I wanted slightly different text in each TextBlock. The markup here creates the text shown in figure 4. Note how I didn't need to specify numerator, denominator, or even superscript and subscript to make the numbers line up. That was all done automatically.