Text drawn blurry

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

Already blurry...

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

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.

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 ...

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

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

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

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();
            }

#105

Navigation Menu

Repository navigation

Text drawn blurry #92

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Text drawn blurry #92

Description

Activity

Mizutama commented on Jul 26, 2017

Licshee commented on Jul 26, 2017

Mizutama commented on Jul 26, 2017

Mizutama commented on Jul 26, 2017

Licshee commented on Jul 26, 2017

MarkSizer commented on Aug 25, 2017

RachamimYaakobov commented on Sep 18, 2017

RachamimYaakobov commented on Sep 18, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions