question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Symbol font glyphs rendered thicker in avalonia

See original GitHub issue

Describe the bug Glyphs in symbol fonts (Segoe Fluent Icons, Segoe MDL2 Assets, etc.) are rendering thicker than they should be in Avalonia (TextBlock/TextLayout and FormattedText). Using Skia in a custom draw op renders them correctly to appear much closer to how they should. SkiaSharp version is whatever ships with Avalonia (I’m not using my own ref here). This also isn’t new to the new text engine for 11.0, but I just discovered it’s not just an issue with my custom font (based on the open source Fluent UI Icons) but also with the other MS fonts.

1920x1080 display, normal 100% scaling

image

The glyph is \uE8BB from either of the Segoe icon fonts (same as the native close button everywhere on Windows)

Xaml

<Viewbox Width="10"
                 Height="10" 
                 Grid.Column="1">
    <TextBlock Name="ButtonIcon"
               FontFamily="Segoe Fluent Icons"
               FontSize="12"
               Text="&#xE8BB;"
               Foreground="White"/>
</Viewbox>

<Viewbox Width="10"                 
                 Height="10"
                 Grid.Column="1" Grid.Row="1">
    <local:SkiaTextBlock />
</Viewbox>

The Skia CustomDrawOp (SkiaTextBlock)

var tf = SKTypeface.FromFamilyName("Segoe Fluent Icons");

Font = new SKFont
{
    Subpixel = true,
    Edging = SKFontEdging.SubpixelAntialias,
    Hinting = SKFontHinting.Full,
    LinearMetrics = true,
    Typeface = tf,
    Size = 12
};

public void Render(IDrawingContextImpl context)
{
    var api = context.GetFeature<ISkiaSharpApiLeaseFeature>();
    using var lease = api.Lease();

    var dc = lease.SkCanvas;

    var txt = "\uE8BB";
    using var paint = new SKPaint(Font);
    paint.Style = SKPaintStyle.StrokeAndFill;
    paint.Color = SKColors.White;

    SKRect bnds = default;
    paint.MeasureText(txt, ref bnds);
    var cx = (float)Bounds.Center.X;
    var cy = (float)Bounds.Center.Y;

    dc.DrawText(txt, cx - (bnds.Width / 2), cy - (bnds.Height / 2) + bnds.Height, paint);
}

To Reproduce Steps to reproduce the behavior:

  1. Go to ‘…’
  2. Click on ‘…’
  3. Scroll down to ‘…’
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows
  • Version 11.0

Additional context Add any other context about the problem here.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
Gillibaldcommented, Oct 28, 2022

Y that is the only option to somehow reliably detect such font. The other option is to provide TextRenderOptions that allow you to disable anti-aliasing in some context. I might just go for implementing TextRenderOptions.

1reaction
amwxcommented, Nov 28, 2022

It does not. TextBlock still renders the lines too fat. My SymbolIcons look slightly better if the glyph is small enough, but with cleartype there some visual artifacts with the anti-aliasing. I still think these glyphs need to be rendered without anti-aliasing so something like TextRenderOptions is still needed.

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to support Chinese characters in .Net Core Avalonia?
As of Avalonia version 0.9.x you need to explicitly set the font that has the Chinese glyphs, since 0.9.x doesn't support font fallback ......
Read more >
GlyphRun Class - Avalonia UI Framework - API
GlyphRun Class. Summary. Represents a sequence of glyphs from a single face of a single font at a single size, and with a...
Read more >
Avalonia Reaches v11 GA Release - InfoQ
Another significant advancement in text rendering capabilities, ... Users can now effortlessly enter characters and symbols not readily ...
Read more >
Multiplatform UI Coding with AvaloniaUI in Easy Samples. ...
Avalonia is a great new multiplatform UI package similar but in many ... characters should be shown if part of the text is...
Read more >
Windows Presentation Foundation
Windows Presentation Foundation (WPF) is a free and open-source graphical subsystem (similar to WinForms) originally developed by Microsoft for rendering ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found