slint icon indicating copy to clipboard operation
slint copied to clipboard

Incorrect font rendering with femtovg backend

Open MiKom opened this issue 1 year ago • 2 comments

Steps to reproduce

Run the following slint file under winit back end:

import "./PretendardVariable.ttf";

export component AppWindow inherits Window {
    width: 1024px;
    height: 768px;

    background: black;

    Text {
        font-size: 96px;
        font-family: "Pretendard Variable";
        font-weight: 700;
        color: white;
        text: "Test test";
    }
}

Tested on windows 10. Font file: PretendardVariable.ttf from https://github.com/orioncactus/pretendard/releases/download/v1.3.6/Pretendard-1.3.6.zip

Expected result

Text is rendered without gaps

Actual result

image

There are gaps in rendering in letters t and e.

MiKom avatar Mar 02 '23 12:03 MiKom

I reproduced this with Google Webfonts "Inter" and "Montserrat"

image

I haven't contributed deeply to this kind of rendering code, but the error looks like the font is being rendered with the even-odd rule

An uninformed guess is that there's something that flattens the glyphs into individual vectors and is mistakingly rendering them with an even-odd rule (I would suspect this would be near the rasterization layer like femtovg/skia bindings).

One thing I'd want to test is whether this applies to all winit renderers (renderer-winit-femtovg, renderer-winit-skia, renderer-winit-skia-opengl, renderer-winit-software).

colelawrence avatar May 01 '23 16:05 colelawrence

This is https://github.com/femtovg/femtovg/issues/183

ogoffart avatar Jan 16 '24 12:01 ogoffart