Text drawn blurry

[Mizutama]

I found text was not drawn as same as on browsers. Some fonts cause drawing blurry.

Attatched PNG is taken from screen-shot of my test WPF app.

`XAML

    <StackPanel DockPanel.Dock="Top" Margin="8">
        <TextBlock FontFamily="Meiryo" FontSize="12pt">あいうえお</TextBlock>
        <TextBlock FontFamily="Meiryo UI" FontSize="12pt">あいうえお</TextBlock>
    </StackPanel>
    
    <app:HtmlPanel x:Name="WebPage" Text="{Binding Text}"
                   UseLayoutRounding="True"
                   SnapsToDevicePixels="True"
                   />

`

Test HTML

[Mizutama]

Already blurry...

[Licshee]

I think it's likely not possible to fix this as this is how WPF works. The WebBrowser control's rendering is not handled by WPF so it looks similar to how content rendered in regular browsers

[Mizutama]

Yes, it should be fixed even on WPF. The screen shot I attateched to 1st my comment shows WPF can draw cleary. The screen shot has 4 lines "あいうえお" , 1st line is drawn by WPF , XAML code <TextBlock FontFamily="Meiryo" FontSize="12pt">あいうえお</TextBlock> 2nd line is also drawn by WPF , <TextBlock FontFamily="Meiryo UI" FontSize="12pt">あいうえお</TextBlock> 3rd and 4th lines are drawned HtmlPanel , <app:HtmlPanel x:Name="WebPage" Text="{Binding Text}" Binded HTML is the link, 'Test HTML' , in the comment.

I'm thinking there are something arround DrawString() in htmlrenderer.wpf\adapters\graphicsadapter.cs but still looking for.

[Mizutama]

Commented out some magical code then got cleary.

`

            if (i >= str.Length)
            {
                point.Y += glyphTypeface.Baseline * font.Size * 96d / 72d;
                point.X += rtl ? 96d / 72d * font.Size * width : 0;

                glyphRendered = true;
                var glyphRun = new GlyphRun(glyphTypeface, rtl ? 1 : 0, false, 96d / 72d * font.Size, glyphs, Utils.ConvertRound(point), widths, null, null, null, null, null, null);
                //var rect = glyphRun.ComputeAlignmentBox();
                //var guidelines = new GuidelineSet();
                //guidelines.GuidelinesX.Add(rect.Left);
                //guidelines.GuidelinesX.Add(rect.Right);
                //guidelines.GuidelinesY.Add(rect.Top);
                //guidelines.GuidelinesY.Add(rect.Bottom);
                //_g.PushGuidelineSet(guidelines);
                _g.DrawGlyphRun(colorConv, glyphRun);
                //_g.Pop();
            }

`

Now I must learn how to use GlyphRun and DrawingContext ...

[Licshee]

Thank you for the info, I'll dig into it

[MarkSizer]

Probably too obvious, but have you checked if the WPF pixel-snapping settings can be tweaked to help?

https://msdn.microsoft.com/es-es/library/aa970908(v=vs.85).aspx

[RachamimYaakobov]

I have a 1920x1080 screen at 125% and the text is very blurry What to do?

[RachamimYaakobov]

I found the solution, this works for me:

            if (i >= str.Length)
            {
                point.Y += glyphTypeface.Baseline * font.Size * 96d / 72d;
                point.X += rtl ? 96d / 72d * font.Size * width : 0;

                var wpfPoint = Utils.ConvertRound(point);
                glyphRendered = true;
                var glyphRun = new GlyphRun(glyphTypeface, rtl ? 1 : 0, 
                    false, 96d / 72d * font.Size, glyphs,
                    wpfPoint, widths, null, null, null, null, null, null);

                var guidelines = new GuidelineSet();
                guidelines.GuidelinesX.Add(wpfPoint.X);
                guidelines.GuidelinesY.Add(wpfPoint.Y);
                _g.PushGuidelineSet(guidelines);
                _g.DrawGlyphRun(colorConv, glyphRun);
                _g.Pop();
            }

https://github.com/ArthurHub/HTML-Renderer/pull/105