Skia: Odd text alignment with space characters

[jturcotte]

export component MainWindow inherits Window {
    background: lightgreen;
    VerticalLayout {
        width: 50%;
        // 1. Reference
        Text {
            font-family: "monospace";
            font-size: 28px;
            text: "[---]";
            horizontal-alignment: center;
            vertical-alignment: center;
        }
        // 2. This works, OK
        Text {
            font-family: "monospace";
            font-size: 28px;
            text: "---";
            horizontal-alignment: center;
            vertical-alignment: center;
        }
        // 3. This aligns, but it shouldn't
        Text {
            font-family: "monospace";
            font-size: 28px;
            text: "--- ";
            horizontal-alignment: center;
            vertical-alignment: center;
        }
        // 4. This shouldn't align either, but the text oddly aligns with the last element
        Text {
            font-family: "monospace";
            font-size: 28px;
            text: " ---";
            horizontal-alignment: center;
            vertical-alignment: center;
        }
        // 5. This is the issue, this should be aligned with the reference at the top
        Text {
            font-family: "monospace";
            font-size: 28px;
            text: " --- ";
            horizontal-alignment: center;
            vertical-alignment: center;
        }
    }
}

This is what renderer-winit-skia gives me, the last text's "---" should be aligned with the top one:

renderer-winit-femtovg gives me the expected alignment:

I don't think it's high severity, but the two "shouldn't align" cases 3 and 4 makes me think that it could be a simple fix if the issue were due to something like wrong spaces trimming somewhere.

Since slint-viewer doesn't seem to be built with the skia backend, here is a runnable example: https://gist.github.com/jturcotte/4d7e4011135fdddd22df123d884443c6

[tronical]

It looks like this is an issue that was accepted upstream: https://bugs.chromium.org/p/skia/issues/detail?id=11933

Interestingly this was also referenced from flutter: flutter/flutter#40648

[tronical]

I don't see an easy way of working around this using the API we're using right now. But perhaps this is one thing we can fix more easily with cosmic text if we switch to it.

[jturcotte]

Oh ok, fixing upstream isn’t what I’d qualify as an easy fix. I’d also be ok with a “won’t fix” as this isn’t your bug.

[tronical]

I'm inclined to leave this ticket open to ensure that we test that this will be fixed with cosmic-text and add a test using the screenshots driver.