Avalon typography helps you impress your users


We spend a lot of time in front of computers. So do our users. Something that makes that time more pleasurable for me is the readability on my Tablet PC. The text is crisp, clear, and I can read on and on with this device. Of course, the device itself helps a lot, but having a good screen with good text support is essential. Avalon delivers on the software side, and makes the most of the available hardware.


Gorgeous looks


Avalon makes use of ClearType, and allows you to leverage its support for OpenType features in a very straightforward manner. Users get crisp, beautifully shaped text, with special effects that help with understanding, directing your reader's attention, or simply helping you convey your message. Just set a value on a property, and boom! - you can play with your text to provide the experience you want for your users.


You can read more about typography in general over here.


Better control of experience


Most of the especially interesting properties are exposed from the Typography class. The documentation has some examples, but I'll be providing some code to let you see directly how playing with some properties affects the content shown.


Show me the code


As an exercise, try adding different values for bolded fonts. Hint: this is not controlled by a bool flag but the FontWeight enum.


This sample lets you interactively play with a few typography features using Palatino Linotype, which comes with Windows XP. Other fonts may provide support for other features as well.


Window1.xaml

<Window x:Class="TypographySample1.Window1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Text="TypographySample1"
>
<DockPanel>
<CheckBox DockPanel.Dock="Top" ID="StandardLigaturesBox">Standard Ligatures.</CheckBox>
<CheckBox DockPanel.Dock="Top" ID="KerningBox">Kerning.</CheckBox>
<ComboBox DockPanel.Dock="Top" ID="NumeralStyleBox" />
<Border Background="VerticalGradient White LightBlue" Padding="4"
BorderThickness="4" BorderBrush="LightSlateGray">
<TextFlow
FontSize="32pt"
FontFamily="Palatino Linotype"
Typography.StandardLigatures="{Bind Path=IsChecked,ElementID=StandardLigaturesBox}"
Typography.Kerning="{Bind Path=IsChecked,ElementID=KerningBox}"
Typography.NumeralStyle="{Bind Path=SelectedValue,ElementID=NumeralStyleBox}">
<Paragraph>'Efficient' is a good example of ligatures.</Paragraph>
<Paragraph>Note the kerning effects on 'word'.</Paragraph>
<Paragraph>Try old-style '12345' numerals.</Paragraph>
</TextFlow>
</Border>
</DockPanel>
</Window>


Window1.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;

namespace TypographySample1
{
public partial class Window1 : Window
{
public Window1(): base()
{
InitializeComponent();
NumeralStyleBox.Items.Add(FontNumeralStyle.Normal);
NumeralStyleBox.Items.Add(FontNumeralStyle.Lining);
NumeralStyleBox.Items.Add(FontNumeralStyle.OldStyle);
NumeralStyleBox.SelectedIndex = 0;
}
}
}



This posting is provided "AS IS" with no warranties, and confers no rights.


Comments (0)

Skip to main content