Fortes

My talk was yesterday — thanks for all who attended.

I’ll be posting the applications I showed in the next post (my laptop is about to die).

If you took pictures during my session, I’d love to get a link / copy.

Adrian has a post titled Five Steps to Font Freedom on the Be A Design Group blog. I’ve quoted some of it below:

There is something absurd about typography on the web. Think about these scenarios: You don’t need to own a font to read a book set in Goudy. You don’t need to own Futura to watch a Wes Anderson film. You don’t need to own Times to read the Times. You don’t need to own any fonts to watch television. Why not? Because that would be insane. And yet this same logic doesn’t apply on the internet. Online, a person needs to own a fully licensed version of a font in order to view it in a web browser. You are reading Arial right now. That’s right, Arial. Why? Because everybody on Earth has a licensed version of Arial on their computer. The great democracy of the internet has failed to produce typography any better than the least common denominator of system fonts. As a designer, I hope you are outraged and offended. So what can you do about it?

Those who know me (or have seen me speak) know that I feel pretty strongly about the lack of variety in widely distributed fonts. Almost every page uses one of the same five fonts (Verdana, Georgia, Arial, Lucida Sans, or Times). The lack of variety can make it tough to create strong branding and beautiful designs on the web.

Designers tend to work around this issue by creating text in Photoshop or Illustrator and exporting to an image. Flash also provides the ability to use fonts that aren’t locally installed (this is the key to the popular Sifr technique). Unfortunately neither technique works well for reading long documents.

The release of Vista will help (but not solve the issue) for two reasons:

1. New high-quality fonts: Poynter was the first to show the new Microsoft fonts being distribute with Vista (some will be distributed with Office as well). All six of the new fonts are OpenType, and will provide much needed variety from the current popular Windows fonts.
2. Font embedding in WPF: I haven’t had a chance to write a blog entry about this, but you can embed fonts into your WPF/Avalon application (even ones hosted in the browser). Many fonts provide licensing terms that allow you to freely embed and redistribute a font in an application (the WPF SDK will provide several free fonts from Ascender for this purpose).

Adrian proposes some solutions — but one thing he’s missing is reliable technology for font embedding in web browsers. IE has this feature but you don’t see it used much. Probably due to a combination of the following issues:

• Download size for quality fonts: Embedding a high-quality font can easily balloon a page size
• Lack of embeddable fonts: Not all fonts are licensed for embedding
• No cross-browser support: I’m not sure how much this was the issue, since many other IE-only features were adopted before they had cross-browser support

I’ve updated the plugin to be compatible with WordPress 2.0 RC3 — if you’re testing WP 2.0, you can download Post Levels 0.9. Let me know if you find any bugs. I’ll release the real version with any bugfixes when WP 2.0 releases.

Partial list of new features in this release:

• Support for private posts in RSS feeds: Blog readers can use HTTP authentication to read private posts
• Post and User Level Admin UI
• Configurable options: New configuration options for features.
• No more Single Post bug: Yeah, that bug sucked

One of the random things I’ve learned about while working on WPF/Avalon are the different number systems used through out the world. I wrote a XAML example that shows some the support for number substitution. Here’s a screenshot and the markup:

<Border xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
        Padding="10" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="#ccc" BorderThickness="1">

  <Grid HorizontalAlignment="Center">
    <Grid.Resources>
      <!-- Common properties for all TextBlock elements -->
      <Style TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="Constantia" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="Margin" Value="5" />
      </Style>
      <!-- Properties for the number display, the databinding is done here -->
      <Style x:Key="NumberDisplay" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}">
        <Setter Property="NumberSubstitution.Substitution" Value="Traditional" />
        <Setter Property="Text" Value="{Binding Path=Value, ElementName=NumberSlider}" />
        <Setter Property="Grid.Column" Value="1" />
        <Setter Property="MinWidth" Value="50" />
      </Style>
    </Grid.Resources>

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

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

    <!-- Title and Slider -->
    <StackPanel Grid.ColumnSpan="2">
      <TextBlock Grid.ColumnSpan="2" FontWeight="Bold" FontFamily="Candara" FontSize="30">Number Substitution</TextBlock>
      <Slider Grid.ColumnSpan="2" Minimum="0" Maximum="10" Name="NumberSlider" IsSnapToTickEnabled="True" TickFrequency=".01" Width="Auto" MaxWidth="300" Margin="10" />
    </StackPanel>

    <!-- Row Shading -->
    <Rectangle Grid.Row="1" Grid.ColumnSpan="2" Fill="#dec" />
    <Rectangle Grid.Row="2" Grid.ColumnSpan="2" Fill="#ffd" />
    <Rectangle Grid.Row="3" Grid.ColumnSpan="2" Fill="#dec" />
    <Rectangle Grid.Row="4" Grid.ColumnSpan="2" Fill="#ffd" />
    <Rectangle Grid.Row="5" Grid.ColumnSpan="2" Fill="#dec" />

    <!-- Labels -->
    <TextBlock Grid.Row="1">English (en-us)</TextBlock>
    <TextBlock Grid.Row="2">Portuguese (pt-pt)</TextBlock>
    <TextBlock Grid.Row="3">Arabic (ar-sa)</TextBlock>
    <TextBlock Grid.Row="4">Thai (th-th)</TextBlock>
    <TextBlock Grid.Row="5">Panjabi (pa-in)</TextBlock>

    <!-- Numbers -->
    <TextBlock Grid.Row="1" xml:lang="en-us" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="2" xml:lang="pt-pt" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="3" xml:lang="ar-sa" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="4" xml:lang="th-th" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="5" xml:lang="pa-in" Style="{StaticResource NumberDisplay}" />
  </Grid>
</Border>

You can copy and paste the code into XamlPad and manipulate the slider in order to see the changing values live (which is pretty neat in a very nerdy way).

The markup may look large, but that’s mostly my formatting (because I like to make things look pretty). Here’s a simplified excerpt to show the important part:

<TextBlock xml:lang="ar-sa" NumberSubstitution.Substitution="Traditional" />

The snippet above does two things. First it sets the culture of the content being displayed in the TextBlock, in this case Saudi Arabic (ar-sa). In order to activate the number substitution in this sample, we also have to set the NumberSubstitution.Substitution property to Traditional, which tells the system to look at the culture of the current context, instead of the system setting.

I’ll close this entry with a second screenshot, showing a different number this time:

Update 10/28: Norris Cheng, a fellow Avalon team member, pointed out something I should clarify/correct in this entry (which I’ve paraphrased below):

The NumberSubstitution.CultureSource tells the system which CultureInfo it should look at: xml:lang (the default), the user’s machine setting, or the NumberSubstitution.CultureOverride property. The reason we set NumberSubstitution.Substitution (which should really be called SubstitutionMethod is that even for cultures like ar-SA, latin digits are used by default — you need to set NumberSubstitution.Substitution to Traditional to tell the system to use the traditional digits instead.

As Mike announced last night, the PDC talks have been posted online for streaming. Here’s a direct link to my talk: PRS330: Creating Rich Content Experiences in Your WPF/Avalon Applications.

Every talk is posted, so there’s a lot to watch. Here are direct links to talks by my fellow team members (note that there are other WPF/Avalon-related sessions as well, make sure to browse the Presentation track if you’re interested):

Note: You’ll need to use Internet Explorer to view the presentations