WPF `Glyphs` not rendering the text right like `TextBlock`

Viewed 1661

I'm making a WPF text-editor using Glyphs element. And I have a problem that the text is not drawn correctly as you can see in the picture, how can I solve this problem?

enter image description here

There are two problems:

  1. Kerning between letters.
  2. Kerning between letters and diacritics.

The first problem I solved by GetKerningPairs function.

How do I solve this problem, maybe I'm wrong?

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="AUTO"/>
            <RowDefinition Height="AUTO"/>
        </Grid.RowDefinitions>

        <TextBlock Text="TextBlock" VerticalAlignment="Center" Margin="6"/>
        <TextBlock Grid.Row="1" Text="Glyphs" VerticalAlignment="Center" Margin="6"/>

        <TextBlock Text="בְּרֵאשִׁית" Grid.Column="1" FontSize="50" FontFamily="Times New Roman"
                   FontWeight="Normal" Grid.Row="0"/>

        <Glyphs Grid.Row="1" Grid.Column="1"
            FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
            FontRenderingEmSize = "50"
            UnicodeString       = "בְּרֵאשִׁית"
            BidiLevel="1"
            Fill                = "Black"/>

        <TextBlock Text="AVAV" Grid.Column="2" FontSize="50" FontFamily="Times New Roman"
                   FontWeight="Normal" Grid.Row="0"/>

        <Glyphs Grid.Row="1" Grid.Column="2"
            FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
            FontRenderingEmSize = "50"
            UnicodeString       = "AVAV"
            BidiLevel="0"
            Fill                = "Black"/>

    </Grid>
</Window>
2 Answers

Kerning for diacritics does not exist in TrueType fonts, So you must define your own list of pairs for diacritics, and give the corresponding kerning. In most letters, the diacritics is centered, and in the others on the right side. Apparently Text Block does the above.

As @Codedom said you must define your own list, which could look like this:

class Program
{
    static void Main(string[] args)
    {
        var list = new List<DiacriticsKerning>();
        list.Add(new DiacriticsKerning('א', 'ָ', HorizontalAlignment.Center, VerticalAlignment.None));
        list.Add(new DiacriticsKerning('ב', 'ָ', HorizontalAlignment.Center, VerticalAlignment.None));
        list.Add(new DiacriticsKerning('ג', 'ָ', HorizontalAlignment.Center, VerticalAlignment.None));
        list.Add(new DiacriticsKerning('ד', 'ָ', HorizontalAlignment.Right, VerticalAlignment.None));
        list.Add(new DiacriticsKerning('ה', 'ָ', HorizontalAlignment.Center, VerticalAlignment.None));
        list.Add(new DiacriticsKerning('ו', 'ָ', HorizontalAlignment.Center, VerticalAlignment.None));
        // ...
    }
}

struct DiacriticsKerning
{
    public DiacriticsKerning(char letter, char diacritics, HorizontalAlignment alignmentHorizontal, VerticalAlignment alignmentVertical)
    {
        Letters = letter;
        Diacritics = diacritics;
        HorizontalAlignment = alignmentHorizontal;
        VerticalAlignment = alignmentVertical;
    }

    char Letters;
    char Diacritics;
    HorizontalAlignment HorizontalAlignment;
    VerticalAlignment VerticalAlignment;
}

enum HorizontalAlignment { None, Center, Left, Right, }

enum VerticalAlignment { None, Center, Left, Right, }
Related