Edit

Share via

Introduction to the GlyphRun Object and Glyphs Element

  • Article

This topic describes the GlyphRun object and the Glyphs element.

Introduction to GlyphRun

Windows Presentation Foundation (WPF) provides advanced text support including glyph-level markup with direct access to Glyphs for customers who want to intercept and persist text after formatting. These features provide critical support for the different text rendering requirements in each of the following scenarios.

  1. Screen display of fixed-format documents.

  2. Print scenarios.

    • Extensible Application Markup Language (XAML) as a device printer language.

    • Microsoft XPS Document Writer.

    • Previous printer drivers, output from Win32 applications to the fixed format.

    • Print spool format.

  3. Fixed-format document representation, including clients for previous versions of Windows and other computing devices.

Note

Glyphs and GlyphRun are designed for fixed-format document presentation and print scenarios. WPF provides several elements for general layout and User interface (UI) scenarios such as Label and TextBlock. For more information on layout and UI scenarios, see the Typography in WPF.

The GlyphRun Object

The GlyphRun object represents a sequence of glyphs from a single face of a single font at a single size, and with a single rendering style.

GlyphRun includes both font details such as glyph Indices and individual glyph positions. It also includes the original Unicode code points the run was generated from, character-to-glyph buffer offset mapping information, and per-character and per-glyph flags.

GlyphRun has a corresponding high-level FrameworkElement, Glyphs. Glyphs can be used in the element tree and in XAML markup to represent GlyphRun output.

The Glyphs Element

The Glyphs element represents the output of a GlyphRun in XAML. The following markup syntax is used to describe the Glyphs element.

XAML 
<!-- The example shows how to use a Glyphs object. -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >

   <StackPanel Background="PowderBlue">

      <Glyphs
         FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
         FontRenderingEmSize = "100"
         StyleSimulations    = "BoldSimulation"
         UnicodeString       = "Hello World!"
         Fill                = "Black"
         OriginX             = "100"
         OriginY             = "200"
      />

   </StackPanel>
</Page>

The following property definitions correspond to the first four attributes in the sample markup.

Property Description
FontUri Specifies a resource identifier: file name, Web uniform resource identifier (URI), or resource reference in the application .exe or container.
FontRenderingEmSize Specifies the font size in drawing surface units (default is .96 inches).
StyleSimulations Specifies flags for bold and Italic styles.
BidiLevel Specifies the bidirectional layout level. Even-numbered and zero values imply left-to-right layout; odd-numbered values imply right-to-left layout.

Indices property

The Indices property is a string of glyph specifications. Where a sequence of glyphs forms a single cluster, the specification of the first glyph in the cluster is preceded by a specification of how many glyphs and how many code points combine to form the cluster. The Indices property collects in one string the following properties.

  • Glyph indices

  • Glyph advance widths

  • Combining glyph attachment vectors

  • Cluster mapping from code points to glyphs

  • Glyph flags

Each glyph specification has the following form.

[GlyphIndex][,[Advance][,[uOffset][,[vOffset][,[Flags]]]]]

Glyph Metrics

Each glyph defines metrics that specify how it aligns with other Glyphs. The following graphic defines the various typographic qualities of two different glyph characters.

Diagraph of glyph measurements

Glyphs Markup

The following code example shows how to use various properties of the Glyphs element in XAML.

XAML 
<!-- The example shows how to use different property settings of Glyphs objects. -->
<Canvas
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="PowderBlue"
  >

<Glyphs 
   FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
   FontRenderingEmSize = "36"
   StyleSimulations    = "ItalicSimulation"
   UnicodeString       = "Hello World!"
   Fill                = "SteelBlue"
   OriginX             = "50"
   OriginY             = "75"
/>

<!-- "Hello World!" with default kerning -->
<Glyphs 
   FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
   FontRenderingEmSize = "36"
   UnicodeString       = "Hello World!"
   Fill                = "Maroon"
   OriginX             = "50"
   OriginY             = "150"
/>

<!-- "Hello World!" with explicit character widths for proportional font -->
<Glyphs 
   FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
   FontRenderingEmSize = "36"
   UnicodeString       = "Hello World!"
   Indices             = ",80;,80;,80;,80;,80;,80;,80;,80;,80;,80;,80"
   Fill                = "Maroon"
   OriginX             = "50"
   OriginY             = "225"
/>

<!-- "Hello World!" with fixed-width font -->
<Glyphs 
     FontUri             = "C:\WINDOWS\Fonts\COUR.TTF"
     FontRenderingEmSize = "36"
     StyleSimulations    = "BoldSimulation"
     UnicodeString       = "Hello World!"
     Fill                = "Maroon"
     OriginX             = "50"
     OriginY             = "300"
/>

<!-- "Open file" without "fi" ligature -->
<Glyphs
   FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
   FontRenderingEmSize = "36"
   StyleSimulations    = "BoldSimulation"
   UnicodeString       = "Open file"
   Fill                = "SlateGray"
   OriginX             = "400"
   OriginY             = "75"
/>

<!-- "Open file" with "fi" ligature -->
<Glyphs
   FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
   FontRenderingEmSize = "36"
   StyleSimulations    = "BoldSimulation"
   UnicodeString       = "Open file"
   Indices             = ";;;;;(2:1)191"
   Fill                = "SlateGray"
   OriginX             = "400"
   OriginY             = "150"
/>

</Canvas>

See also