Stylistic Alternates

posted 2005-05-24

Bickham Script Pro is a very sophisticated OpenType font, with very nice contextual alternates and ligatures. What sets Bickham apart is the alternate forms it provides -- here are the ten (10!) different versions of the lowercase letter "h" available in the font:

Ten forms of the lowercase letter h, shown in Bickham Script Pro

In Avalon, you can choose between the alternates through the Typography.StylisticAlternates property. Most of the alternate forms shown above look best at the beginning of a word, but some (like #9) are meant for the end of the word.

Here's the full markup for the screenshot shown above:

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" HorizontalAlignment="Center">
  <Grid.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="Margin" Value="5" />
      <Setter Property="Padding" Value="20,0" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush" Value="#ccc" />
    </Style>
    <Style x:Key="AlternateDisplay" TargetType="{x:Type TextBlock}">
      <Setter Property="FontFamily" Value="Bickham Script Pro" />
      <Setter Property="FontSize" Value="60" />
    </Style>
    <Style x:Key="AlternateLabel" TargetType="{x:Type TextBlock}">
      <Setter Property="FontFamily" Value="Calibri, Verdana" />
      <Setter Property="FontSize" Value="20" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="VerticalAlignment" Value="Bottom" />
    </Style>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <Border>
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="0">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="1">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="2">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="2">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="3">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="3">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="4">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="4">h</Inline></TextBlock>
  </Border>
  <Border Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="5">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="1" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="6">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="2" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="7">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="3" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="8">h</Inline></TextBlock>
  </Border>
  <Border Grid.Column="4" Grid.Row="1">
    <TextBlock Style="{StaticResource AlternateDisplay}"><Inline Typography.StylisticAlternates="9">h</Inline></TextBlock>
  </Border>

  <!-- Labels -->
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="0">0</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="1">1</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="2">2</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="3">3</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Column="4">4</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="0">5</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="1">6</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="2">7</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="3">8</TextBlock>
  <TextBlock Style="{StaticResource AlternateLabel}" Grid.Row="1" Grid.Column="4">9</TextBlock>
</Grid>