Skip to content

Text drawn blurry #92

Description

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

`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

Activity

  1. Mizutama commented on Jul 26, 2017

    @Mizutama
    Author

    Already blurry...
    ws000000 2

  2. Licshee commented on Jul 26, 2017

    @Licshee
    Collaborator

    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

  3. Mizutama commented on Jul 26, 2017

    @Mizutama
    Author

    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.

  4. Mizutama commented on Jul 26, 2017

    @Mizutama
    Author

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

    `

    ws000000 3

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

  5. Licshee commented on Jul 26, 2017

    @Licshee
    Collaborator

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

  6. MarkSizer commented on Aug 25, 2017

    @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

  7. RachamimYaakobov commented on Sep 18, 2017

    @RachamimYaakobov
    Contributor

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

  8. RachamimYaakobov commented on Sep 18, 2017

    @RachamimYaakobov
    Contributor

    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

  9. linked a pull request that will close this issueFix Text blurry #105on Dec 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions