Font color Issue

Emon Haque 3,176 Reputation points
2021-08-17T11:00:54.783+00:00

Here's what I've in MainWindow.xaml:

<Grid>  
    <Grid.Resources>  
        <Style TargetType="TextBlock">  
            <Setter Property="FlowDirection" Value="RightToLeft"/>  
            <Setter Property="FontSize" Value="70"/>  
            <Setter Property="HorizontalAlignment" Value="Center"/>  
            <Setter Property="VerticalAlignment" Value="Center"/>  
        </Style>  
    </Grid.Resources>  
    <Grid.RowDefinitions>  
        <RowDefinition/>  
        <RowDefinition/>  
        <RowDefinition/>  
    </Grid.RowDefinitions>  
    <Grid.ColumnDefinitions>  
        <ColumnDefinition/>  
        <ColumnDefinition/>  
        <ColumnDefinition/>  
    </Grid.ColumnDefinitions>  
    <TextBlock FontFamily="KFGQPC Uthman Taha Naskh Regular">  
        <Run Text="لِ" Foreground="Blue"/><Run Text="لَّهِ" Foreground="Red"/>  
    </TextBlock>  
    <TextBlock Grid.Row="1" FontFamily="Al Qalam Quran Majeed Web Regular">  
        <Run Text="لِ" Foreground="Blue"/><Run Text="لَّهِ" Foreground="Red"/>  
    </TextBlock>  
    <TextBlock Grid.Row="2" FontFamily="Amiri">  
        <Run Text="لِ" Foreground="Blue"/><Run Text="لَّهِ" Foreground="Red"/>  
    </TextBlock>  

    <TextBlock Grid.Column="1" FontFamily="KFGQPC Uthman Taha Naskh Regular">  
        <Run Text="ال" Foreground="Blue"/><Run Text="دّين" Foreground="Red"/>  
    </TextBlock>  
    <TextBlock Grid.Row="1" Grid.Column="1" FontFamily="Al Qalam Quran Majeed Web Regular">  
        <Run Text="ال" Foreground="Blue"/><Run Text="دّين" Foreground="Red"/>  
    </TextBlock>  
    <TextBlock Grid.Row="2" Grid.Column="1" FontFamily="Amiri">  
        <Run Text="ال" Foreground="Blue"/><Run Text="دّين" Foreground="Red"/>  
    </TextBlock>  

    <TextBlock Grid.Column="2" FontFamily="KFGQPC Uthman Taha Naskh Regular">  
        <Run Text="ال" Foreground="Blue"/><Run Text="حَمدُ" Foreground="Red"/>  
    </TextBlock>  
    <TextBlock Grid.Row="1" Grid.Column="2" FontFamily="Al Qalam Quran Majeed Web Regular">  
        <Run Text="ال" Foreground="Blue"/><Run Text="حَمدُ" Foreground="Red"/>  
    </TextBlock>  
    <TextBlock Grid.Row="2" Grid.Column="2" FontFamily="Amiri">  
        <Run Text="ال" Foreground="Blue"/><Run Text="حَمدُ" Foreground="Red"/>  
    </TextBlock>  
</Grid>  

and this is what it produces:

123985-capture.png

First row uses a font named KFGQPC Uthman Taha Naskh Regular, second one Al Qalam Quran Majeed Web Regular and third one Amiri. All columns of first row got wrong color in some place! First column of the second row got it wrong in first letter and vowel below it and the third row, which uses Amiri, got it all right BUT it's an issue of rendering short vowels beyond the rendering area as mentioned here.

Is it possible to get the correct color with all those fonts?

EDIT
----
Here's the full version of a ETL work where I've noticed the issue in a demonstration:

123916-capture2.png

In the middle see how short vowels in Amiri in some places are rendered way above/below than necessary.

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,783 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.