[macOS] Color settings does not take effect when rendering text of TTF/OTF fonts with COLR table

[davidxuang]

Describe the bug

On macOS, TTF/OTF with a COLR table which only covers a subset of characters can trigger rendering bug. If a font contains both normal characters and color characters, the color of normal characters can not be properly rendered. This could be an Avalonia or SkiaSharp (upstream) bug.

To Reproduce

FluentIcons.Avalonia published two versions with minimal changes (https://github.com/davidxuang/FluentIcons/commit/22237e2c2eb3eac8fa37a83bc9d3f0370404f59a) to locate the bug.

• 1.1.234 is the main stream.
• 1.1.234-exp has the COLR table stripped from the font binary. Therefore the bug is by-passed but the color icons are also broken.

(image credits @hdocsek)

Expected behavior

macOS should has identical render behaviour to Windows and Linux, per OpenType spec.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ic="using:FluentIcons.Avalonia"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaDemo.MainWindow"
        Title="AvaloniaDemo">
    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <ic:SymbolIcon IsFilled="True" />
            <TextBlock>IsFilled="True"</TextBlock>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <ic:SymbolIcon IsFilled="True" Foreground="Red" />
            <TextBlock>IsFilled="True" Foreground="Red"</TextBlock>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <ic:SymbolIcon Symbol="FlagPride" IsFilled="True" />
            <TextBlock>IsFilled="True"</TextBlock>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <ic:SymbolIcon Symbol="FlagPride" IsFilled="True" Foreground="Red" />
            <TextBlock>IsFilled="True" Foreground="Red"</TextBlock>
        </StackPanel>
    </StackPanel>
</Window>

Avalonia version

11.0.10

OS

macOS

Additional context

Downstream issue: davidxuang/FluentIcons#7 Font assets: 1.1.234, 1.1.234-exp Web, mobile and embedded environments has not been tested yet.

[Gillibald]

The CoreText backend might not support COLR fonts. You could try using SkiaSharp 3. In the end, this is a Skia issue. We might be able to rasterize color fonts in the future.

[davidxuang]

The CoreText backend might not support COLR fonts. You could try using SkiaSharp 3. In the end, this is a Skia issue. We might be able to rasterize color fonts in the future.

It doesn't seem like a "not-implemented" issue. The problem here is that if there is any color character in the font, the non-color characters will not have any color other than default (black).

Anyway, I agree such platform-specific rendering bug is likely rooted in the SkiaSharp part.