Multicolor Font Characters in Windows 8.1
June 28, 2013
San Francisco, California
I've been attending the Microsoft Build Conference this week learning about the new features in Windows 8.1. In a session entitled Innovations in High Performance 2D Graphics with Direct X, Dan McLachlan revealed that two new tables have been defined in the OpenType font specification that allow multi-color glyph rendering. The impetus for this enhancement was primarily for rendering multicolor emoji — that collection of often whimsical ideograms that originated in Japan and have become increasingly popular in electronic messaging, and sometimes user interface icons.
Examining these multicolor font characters was the first thing I tried when I installed the Windows 8.1 Preview and Visual Studio 2013 Preview. The new Segoe UI Emoji font in Windows 8.1 supports these multicolor characters, so I wrote some XAML to display characters from this font in a horizontal ItemsControl:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto">
<ItemsControl Name="itemsControl"
VerticalAlignment="Center">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
FontFamily="Segoe UI Emoji"
FontSize="96"
Margin="12" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
The code-behind file adds strings to the ItemsControl in the Unicode range 0x1F300 through 0x1F6FF (although not all codepoints in this range correspond to glyphs):
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
for (int code = 0x1F300; code < 0x1F600; code++)
itemsControl.Items.Add(Char.ConvertFromUtf32(code));
}
}
The ZoomMode of the ScrollViewer is left at it's default value of Enabled so you can use your fingers to stretch out the list of characters, and view them close up. Here's a typical screen shot. Click it to see it in full size:
Rendering multicolor emoji as font characters is obviously preferable to bitmaps because they can be freely scaled, and it's also preferable to vector graphic renditions because the font characters potentially contain hints that allow greater legibility at smaller sizes.
I suspect that multicolor fonts will become increasingly popular for user interface icons and symbols for the same reason. The multiple colors are automatically enabled when using the font through the Windows Runtime. In DirectX, a new flag is involved, and a new method to get access to the glyph layers used in implementing the colors. Check out Dan McLachlan's talk for more details.
Here's the ShowColorCharacters project showing just the Emoji range of the new Segoe UI Emoji font, and a slightly modified version of the SegoeSymbols project from Chapter 8 of my Windows 8 book that lets you view much of the rest of the Segoe UI Emoji font. Some additional characters have color.
The ability to have multicolor font characters doesn't sound like a big deal, but I think it's going to help significantly in creating resolution-independent user interfaces.
