Outlined Font - Mandatory for Game UI's

[najak3d]

We are working on Urholonia, integrating Avalonia UI into Urho3D.NET, to make Avalonia accessible (and the best choice) for Game UI's, and Game Editor Toolsets.

In order for Avalonia to look acceptable inside of a Game UI, we need Outlined Fonts. This can be achieved cheaply via "multi-stamping" each font (outline color first many times with small offset, then the foreground color last).

Currently we're achieving this look with an awful kludge, of generating many Labels inside of each Text container, to produce the same effect as Multi-stamping. This is for POC, so that we can demo the end-look.

@Gillibald - I've been told this feature might current be in your hands.

IMO, the end game here is that "Outlined Fonts" ought to be a "built-in" (or standard-add-on) feature for Avalonia, that doesn't require "custom techniques and/or shader code" from each user who wants to use it. Users who want Outline Mode should just be able to set a single Property on the assigned Font called "Outline".

Here are some suggested Properties of the "OutlineParameters" class:

1. Outline Thickness (should it be relative to Font Size, or absolute?)
2. Outline Brush (If NULL, then this pulls from another property of the context/control).
3. Quality -- if there are various means for achieving this, Quality can indicate whether or not to use the more expensive methods to achieve a higher quality result.
4. KerningAdjustment (as outline gets thicker, you may or may not want to increase kerning, or to increase it by a ratio of the Thickness)

Here's a screenshot of a crude Game UI that uses our kludged Outline fonts:

[najak3d]

In the meantime, we're looking for a better kludge to our current technique of generating "13 offset Labels" returned inside of a Panel control. This is starting to give us issues.

[najak3d]

To state what might be obvious, is that for Game UI's, they often are semi-transparent in nature with a background that is variable. The purpose of the outline is to help ensure that the text is always very visible/readable, no matter the backdrop color.

For the most extreme example -- White font white is invisible overtop a white background. But white font outlined in Black -- is easily visible overtop the white background, as you can see the outline. In Game UI's the contrast between font color and background is variable... and so outlines are used to help guarantee readability in all contexts. That, and it also looks sweet.

[Gillibald]

I will add support for this to Avalonia: https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/how-to-create-outlined-text?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-6.0

[najak3d]

Thank you! We really look forward to this feature.

I have two follow-up questions:

1. When do you estimate this'll be in the code? (I use github source directly, so I can test it as you write it.)
2. Are you planning to provide some default/built-in easy mechanism where the coder only has to set a few properties to make it work? (e.g. Thickness, OutlineColor, and maybe KerningBoostRatio which boosts the Kerning/spacing of letters by a fraction of the OutlineWidth).

[robloo]

Are you planning to provide some default/built-in easy mechanism where the coder only has to set a few properties to make it work

My understanding of the plan is to support conversion of text directly into geometry shapes. After text is a geometry, you can modify the Fill and Stroke as with any other geometry.

There are a few tradeoffs with this approach (can't keep text in TextBlocks, etc.) it seems the most robust and easiest to integrate for needs like this.

[najak3d]

@Gillibald - I've delved deeper into Avalonia and see more what you mean with the "Formatted Text" implementation (as you have a demo under the "RenderedDemo"). In that demo, you are rendering text to a "UserControl", not a TextBlock. And it looks rather heavyweight, dynamically generating geometry for each text string, etc.

What Avalonia needs more, IMO, is a simple option to choose "Outlined Fonts" without changing their layout... it should be a simple Toggle, as easy to change as it is now to change "Font Style/Face" (bold, italic, or Font family, or size). Turn it on, and nothing else needs to change - your text is simply outlined with the specified color/thickness.

I'd be happy to implement this for Avalonia, if you would accept it into the main codebase. What I would do to use a X-stamping technique ONCE to a background image with 4 channels (RGBA). From then on, it would simply translate that portion of the image to the render surface, and execute a shader that knows how to use those 3 channels. It would provide, the following options:

1. Normal Font, normal outline
2. Normal Font, double-wide outline.
3. Normal Font, triple-wide outline

Here's a close-up of the image that I create in background to make this easy. The various channels are used to mark where the outline begins/ends for Single/Double/Triple-wide. I'd let the user define the width of "single wide thickness"... or of all 3... (they don't have to be the same).

Then I'd make this rendering technique available to users via the TextBlock with StyledProperty.

I already have the shader working for this in both GLSL and HLSL, and also have the logic that takes any font and generates the SKImage. And lays out the text, renders it, and provides Measurements to anyone that asks.

Let me know if you are interested in allowing me to do this. I could make it a small plugin library too. At this point, I don't know the best method for inserting it into Avalonia.

[najak3d]

I would also want to do a better job on this image adding some blur. The boundaries here are too abrupt (no transition)

[najak3d]

Delving in further -- It looks like the way in is through the "TextFormatter.Current" - by registering our own "TextFormatter" service, which then would produce a "TextLine" derivation which supports Outlined fonts. Then inside our of our "TextFormatter" it would return either a normal TextLineImpl, or the TextLineOutlined instance if they had Outlining on.

Our TextLineOutlined would do the same thing as TextLineImpl, except would create a "ShapedTextCharactersOutline" which would have a specialized version of "GlyphRunOutline" where the Draw operations would send in 2 Brushes, along with outline information, which would then "do it's thing".

It looks like Avalonia is already set up for me to add this implementation "as is".

Before I get started, @Gillibald , can you advise me on this, and let me know if I'm on the right-track?

Steps I think I would follow are:

1. Create a new TextFormatter Service - to insert my own into the mix.
2. This new TextFormatter would look for an "Outline" styled property, and if not found -- then it would behave exactly the same as the default TextFormatterImpl.
3. But if Outline != null, then it would instead do a specialized implementation, which would look 90% like the default implementation, except for the final "GlyphRun.Draw()" methods -- which uses 2 Brushes instead of one, and has an entirely different method for rendering.

As of now, I foresee these additional classes for me to create:
TextFormatterOutlined
TextLineOutlined
ShapedTextCharactersOutlined
GlyphRunOutlined

These classes would, for the most part, behave just like the default ones (lots of code-pasting),
Your advice would be appreciated.

[najak3d]

One hurdle I see now is that TextLineImpl is "internal", so creating instances of these would require a trick (kludge?). OR, I could create my own copy of it inside my own assembly. OR - if this code becomes PART-OF the "Avalonia.Visuals" assembly then I could access the internals directly.

[najak3d]

Just as a POC - the first thing I'd do is a "cheap/dirty outline" method (cheap meaning, easy-to-code) -- where I just use the "X-stamping" technique which employs the default "PlatformImpl.DrawGlyphRun()" method X-times -- to generate an outline real-time, with very little code.

I'd like to create this POC fairly soon, and see how it goes. First I'd like to get quick advice from @Gillibald or @kekekeks - just to make sure I'm on the best-track.

[Gillibald]

I need to know how your technique affects measurements etc. if it doesn't affect measurements at all we should be able to introduce https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.textformatting.textrunproperties.texteffects?view=windowsdesktop-6.0#system-windows-media-textformatting-textrunproperties-texteffects

I am against touching the TextFormatter in our codebase to implement that feature. TextFormatter in general allows for high customization.

[robloo]

To be fair, it would make sense if text formatter supported fill, stroke and stroke thickness properties. That was missed in WPF though. Stroke thickness would affect text measurement at least on the outside bounds.

[najak3d]

@robloo is correct. But this correlation is usually considerably less than 100%. (closer to 50% typically)

Bleeding between adjacent outlines is often desired, yet at same time, some amount of added kerning is desired, to make it look right. I'd suggest having a "ScaleCorrelation" (X,Y) factor attached to each instance of TextBlock, which controls this correlation. I'd default this to (1, 1), which is really more like 0.5 correlation, since outline bleeding is a double-whammy (bleeds both forwards and backwards, as well as upwards/downwards). But this 1 factor, for many cases, is a good default to start with. (wait until we see the results, then tweak it)

We might want an "OutlineScaleCorrelationProvider" service, which defaults to yielding (1,1) default, but allows the App developer to replace this service with their own provider, which could even look for it's own StyledProperties/etc... whatever they want.

The Outline Thickness would impact the TextLine size as follows:

TextBlock.Size =  originalSize + (OutlineThickness * ScaleCorrelation);   // both X & Y dimension

[najak3d]

@Gillibald : Regarding your intent for using "TextEffects" -- will this capability be available on all other supported platforms? (Android, iOS, MacOS, Linux)

[najak3d]

@jmacato - I get that, and appreciate @Gillibald very much (as well as the many other contributors, in varying capacities). This is one of the best open source projects that I've seen!

When I ask for ETA, this is just an estimate of priority/timing, to give me an idea if he thinks he'll work on this: next, soon, or later. If it's not going to be done soon, then I'll need to implement a kludge on a local GIT branch, so that I can continue creating screenshots that show outlined fonts. Without the outlined font, my semi-transparent GUI's will look deficient.

Please do not interpret my inquiry as "I expect this now". If his answer is "Later, not soon", I won't complain -- but at least now I can make a more appropriate plan of action, and might implement the kludge. (which should take me about 3-10 hrs, guessing)

[Gillibald]

TextEffect support will come until 11.0 is released that's all I can say for now

[najak3d]

Thank you for this update. Just to confirm your English here, you are saying that it will not come until AFTER 11.0 is released, correct?

[Gillibald]

In the next 2 month

[najak3d]

Thank you @Gillibald . That is very good timing. I really appreciate your talent and dedication and generosity.

[Gillibald]

public interface ITextEffect
{
	int Start {get;}
	
	int Length {get;} = int.MaxValue;

        Rect ComputeBoundingBox(GlyphRun glyphRun) //This affects meaasures

	void Draw(DrawingContext drawingContext, IBrush foregroundBrush, GlyphRun glyphRun) //This affects rendering
}

<TextBlock>
	<TextBlock.TextEffects>
		<TextEffectCollection>
			<OutlineTextEffect/>
		</TextEffectCollection>
	</TextBlock.TextEffects>
</TextBlock>

This effect applies to the whole text.

[najak3d]

That sounds good. Just to note, apps would need control over the "Default Parameters" and they'd probably also need a way to choose "thin outline" vs " thick outline"... Can you package in an easy way for users to toggle the thickness easy? As well as to toggle the Letter-Spacing correlation... so that users can decide how much Outline mode will increase the letter spacing, as a ratio of outline thickness. For example, 100% would mean "increase spacing by Outline Thickness 100%", where as 0% will result in "same letter spacing as non-outlined mode". And don't forget OutlineColor.

In short, the parameters need to be:

1. Outline Effect == On/Off
2. OutlineThicknessMultiplier = multiplier of the Default OutlineThickness
3. OutlineThickness - allows user to specify the Absolute Outline Thickness (not a multiplier of the default)
4. OutlineCorrelationMultiplier = multiplier of the Default OutlineCorrelation factor.
5. OutlineCorrelation = the Absolute correlation factor (not a multiplier of the default)
6. OutlineColor (although this should be defaulted by the Theme/style being applied)

Sample AXAML might look like this:

<Label TextEffects="Outline"/> // uses all defaults from style/theme, no adjustments
<Label TextEffects="Outline, *2.0, *0.5, Blue"/> // Double Thick (vs Default), Half-Spacing (vs Default), Blue Outline
<Label TextEffects="Outline, 2.0, 0.5, Blue"/> // 2-DIPS Thick (Absolute), SpacingCorrelation = 0.5 (Absolute), Blue Outline

So the "*" prefix above differentiates between "Default Multiplier" vs "Absolute".

99% of Use-cases for "Outline font" will be satisfied by the simple case, so long as you enable the flexibilities I am requesting above. I hope you are able to achieve something like this. If so, it'll be used by many more apps.

[najak3d]

I want to give you a hug. I really want to give you my appreciation in advance. :)

[najak3d]

If you want some help with this, I'm here to help. I'm not sure the exact method you want to use for achieving the outline effect, but if you want recommendations, I can offer you some.... or help to actually code it up and test it. I'm here for you, if you want my help.

[Gillibald]

I think you could work on the actual rendering part that takes a GlyphRun and renders it outlined on the screen.

A GlyphRun can be manually constructed or via TextShaper.Current.ShapeText(....)

Start with a custom drawing operation: https://github.com/AvaloniaUI/Avalonia/blob/master/samples/RenderDemo/Pages/CustomSkiaPage.cs#L22

Ideally, we could avoid converting every glyph to a path by drawing the text with different stroke widths.

[najak3d]

@Gillibald wrote: "Ideally, we could avoid converting every glyph to a path by drawing the text with different stroke widths."

I'm not sure the options for a Skia stroke, but normally that doesn't produce the right result, because the brush won't cap-the-ends. For example, the Letter "I" would be a "thick I" but would have no outline at the top or bottom. This could be resolved, perhaps by drawing a "filled semi-circle" at the start/end of each stroke/path.

I'll do some googling for existing techniques of outlined fonts in Skia, and see where it leads us.

Thank you!

[najak3d]

I haven't made any progress on this yet. I'm in process now of porting our game from Urho.NET over to Stride3D with Stridelonia, which appears to be in very good shape. Once I get this ported, I'll implement the outlined font text effect as you suggested. Just posting here to let you know what I'm up to, and that I haven't gotten this done, but still plan to get it done.

[grantbowering]

Hey @najak3d, did you ever circle back to this? I could really use a way to outline text in Avalonia...

[najak3d]

We switched over to Unity3D over a year ago, and aren't using Avalonia anymore. So this issue for me, has been dropped.

[Gillibald]

This API is supported by Avalonia: https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/how-to-create-outlined-text?view=netframeworkdesktop-4.8

[alessandrofrancesconi]

If useful, I was looking for the same feature and I've tried extending the Shape class and using FormattedText. Seems to work good for my needs but I'm a newbie... can someone review it? I'm a little bit scared on performance drops when the text is continuously updated (as in my app).

public class OutlinedTextBlock : Shape
{
    static OutlinedTextBlock()
    {
        AffectsGeometry<OutlinedTextBlock>(
            BoundsProperty,
            TextProperty,
            FillProperty,
            StrokeProperty,
            StrokeThicknessProperty);
    }

    private Geometry _textGeometry;

    protected override Geometry? CreateDefiningGeometry()
    {
        this.CreateTextGeometry();
        return this._textGeometry;
    }

    private void CreateTextGeometry()
    {
        var formattedText = new FormattedText(Text, Thread.CurrentThread.CurrentUICulture, FlowDirection.LeftToRight,
                                new Typeface(FontFamily, FontStyle, FontWeight, FontStretch.Normal), FontSize, Brushes.Black);
        this._textGeometry = formattedText.BuildGeometry(new Point(0, 0));
    }

    /// <summary>
    /// Defines the <see cref="Text"/> property.
    /// </summary>
    public static readonly StyledProperty<string?> TextProperty =
        AvaloniaProperty.Register<OutlinedTextBlock, string?>(nameof(Text));

    /// <summary>
    /// Defines the <see cref="FontFamily"/> property.
    /// </summary>
    public static readonly StyledProperty<FontFamily> FontFamilyProperty =
        TextElement.FontFamilyProperty.AddOwner<OutlinedTextBlock>();

    /// <summary>
    /// Defines the <see cref="FontSize"/> property.
    /// </summary>
    public static readonly StyledProperty<double> FontSizeProperty =
        TextElement.FontSizeProperty.AddOwner<OutlinedTextBlock>();

    /// <summary>
    /// Defines the <see cref="FontStyle"/> property.
    /// </summary>
    public static readonly StyledProperty<FontStyle> FontStyleProperty =
        TextElement.FontStyleProperty.AddOwner<OutlinedTextBlock>();

    /// <summary>
    /// Defines the <see cref="FontWeight"/> property.
    /// </summary>
    public static readonly StyledProperty<FontWeight> FontWeightProperty =
        TextElement.FontWeightProperty.AddOwner<OutlinedTextBlock>();

    /// <summary>
    /// Gets or sets the text.
    /// </summary>
    public string? Text
    {
        get => GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    /// <summary>
    /// Gets or sets the font family used to draw the control's text.
    /// </summary>
    public FontFamily FontFamily
    {
        get { return GetValue(FontFamilyProperty); }
        set { SetValue(FontFamilyProperty, value); }
    }

    /// <summary>
    /// Gets or sets the size of the control's text in points.
    /// </summary>
    public double FontSize
    {
        get { return GetValue(FontSizeProperty); }
        set { SetValue(FontSizeProperty, value); }
    }

    /// <summary>
    /// Gets or sets the font style used to draw the control's text.
    /// </summary>
    public FontStyle FontStyle
    {
        get { return GetValue(FontStyleProperty); }
        set { SetValue(FontStyleProperty, value); }
    }

    /// <summary>
    /// Gets or sets the font weight used to draw the control's text.
    /// </summary>
    public FontWeight FontWeight
    {
        get { return GetValue(FontWeightProperty); }
        set { SetValue(FontWeightProperty, value); }
    }
}

Result:

[Gillibald]

You can create geometries for each digit and map them to the current rpm. This should be super fast.

[kuch3n]

How do you use this class? Inside a canvas?

<Canvas Background="Yellow" Width="200" Height="400">
    <controls:OutlinedTextBlock Text="Hello World!" FontSize="60" Fill="Green"/>
</Canvas>

Without the Property Fill the text is invisible.

EDIT:
Got it, it's a combination of stroke and fill:

<Canvas Background="Yellow" Width="400" Height="200">
    <controls:OutlinedTextBlock Text="Hello World!" Stroke="Black" Fill="Red" StrokeThickness="2" FontSize="60"/>
</Canvas>