Text with shadow

[JanDiederich]

I have white text in front of a background, alternating between black and white, to easily recognize the white text on the white background parts, I added a blurred shadow to the GTK version of my application. I now want to do the same with Slint, preferably a better version, where the white text "glows" with the color black.

Meaning: First I draw the text in the color black, with a strong gaussian blur and a transparent background, then I draw the original white text with a transparent background. The pixel shader for gaussian blur is super-easy. And I really want to expand the Slint "Text" widget, and not reinvent the wheel. Not some OpenGL foreign body, like in the official OpenGL example.

Winit could use pixel shaders and Qt could use something like (C++ code):

auto effect = new QGraphicsDropShadowEffect(label);
label->setGraphicsEffect(effect);

Where should I start doing that? And how could I write it, that my code may later be reintegrated into the official Slint Widget library?

[tronical]

Syntax wise I think that we should extend support for the existing drop-shadow-XXX properties to also work on Text elements. Implementation wise this would have to be implemented for QPainter, Skia, FemtoVG, and the software renderer.

For Skia a quick google search yields this tiny snippet: https://fiddle.skia.org/c/@text_shadow . However we're not using drawTextBlob (yet), we're using SkParagraph and friends, so the translation to that might be a little different (or harder, I'm not sure).

For renderers where this is harder to implement, we could also consider a "low quality" fallback where we just draw the same text with an offset and a darker color - faked :).

At the moment I don't think it's possible to implement this outside of Slint.

[ogoffart]

At the moment I don't think it's possible to implement this outside of Slint.

Can we just not use two Text?

Somethins like this

[tronical]

Ah yes, that's an excellent example of a workaround. This is what a fallback implementation in Slint could do, unless the renderer offers a better implementation. (better means better visual quality of the effect)

[JanDiederich]

Thanks.
Your suggestion works for simple cases, even with centered text. I tried this with Stacked Texts in Rectangles. That failed with centered Texts, but putting it in an extra component worked.

I generalized the solution:

component TextWithShadow {
    in property <string> text;     
    in property <string> font-family;
    in property <color> color;
    in property <color> shadow_color;
    in property <length> font-size;

    s := Text {
        text: text; 
        color: shadow_color;
        x: t.x + font-size * 0.02;
        y: t.y + font-size * 0.02;
        font-family: parent.font-family;
        font-size: parent.font-size * 1.01; 
    }
    t := Text {
        text: text;
        color: parent.color;
        font-family: parent.font-family;
        font-size: parent.font-size;
    }
}

// Usage:
info_now := TextWithShadow {
    text: info_now_text;
    color: label-color;
    shadow-color: background-color.transparentize(10%);
    font-family: font-name;
    font-size: min_size() * 0.2;
}

But this fails with more complex cases, e.g. where I scroll the text, like this:

TextWithShadow {
   x: timespan_offset;
  
  text: timespan_text;
  font-family: font-name;
  font-size: min_size() * timespan_font_size;
  color: label-color;
  shadow-color: background-color;
}

...
main_window().set_timespan_offset(self.timespan_pos as Coord);
...