scaled Texts look terrible even when zooming out

Brannon K.

I have a Text in a Rectangle in a Flickable. I set the scale property on the Rectangle so that I can shrink the Label (and other Rectangle contents). The result looks terrible. Exhibit 1:

However, as I zoom in, the font rendering greatly improves. Exhibit 2:

Why does the font look so terrible when zoomed out? I would think that it would be the opposite effect -- zooming in beyond the original rendering size should lead to a pixelated font rendering. How is transforms on the Rectangle implemented? I thought they would use some hardware scaling mechanism.

GrecKo

scaling and text doesn't go particularly well together.
Can you change the pixelSize instead ? (and use scale only for animations)

KH-219Design

One option you can consider is using the "Fit" options on Label.fontSizeMode (or Text.fontSizeMode).

Reference: https://doc.qt.io/qt-6/qml-qtquick-text.html#fontSizeMode-prop

(It works in Qt5, too.)

Here is sample code I just put together, and a screenshot of how it looks for me (on Ubuntu 22.04, using Qt 6.5.3).

Note that the code in the 2 Label instances is 100% identical. The Label(s), including their font descriptions, are identical. Their enclosing parent is what differs.

The Labels are identical, yet their rendered font size on screen ends up different from each other, because the font size is being scaled based on the size of the parent (either the blue rectangle or the violet one, respectively).

When I have used this approach for font scaling, I have always observed smooth results, on many OS platforms.

It will continue to look smooth even if, for example, you animate one of these enclosing rectangles to grow and shrink. In other words: the sample code here uses static size on each rectangle, but if you try it with dynamically stretching Rectangles you should still see smooth scaling.

  Rectangle {
    id: rect1
    width: 350
    height: 200
    color: 'lightblue'

    Label {
      anchors.fill: parent
      anchors.margins: 8

      text: "Hello"
      color: 'black'
      font.pixelSize: 1000 // intentionally 'oversized'

      fontSizeMode: Text.Fit
    }
  }

  Rectangle {
    anchors.top: rect1.bottom
    width: 350
    height: 100
    color: 'violet'

    Label {
      anchors.fill: parent
      anchors.margins: 8

      text: "Hello"
      color: 'black'
      font.pixelSize: 1000 // intentionally 'oversized'

      fontSizeMode: Text.Fit
    }
  }

KH-219Design

The image was flagged as spam. Let me try again to provide a representative screenshot:

KH-219Design

Possibly large caveat: I have never attempted the "Fit" tactic in combination with the scale field you mentioned.

Fundamentally, whatever undesirable thing scale is doing might still overrule the good results I get in the absence of scale.

But if you could switch to dynamically altering the height and width of the Rectangle instead of setting the scale, then I think the fontSizeMode: Text.Fit approach could work for you.

Brannon K.

I've learned a few things since posting:

Scaling the text in a rectangle looks good on Windows and MacOS. It just looks terrible on my Arch Linux lappy with an Intel GPU. (I have a separate Arch Linux lappy with nVidia GPU that I'll try later.)
The Text.Fit approach doesn't fix it on my lappy.
Drawing text inside a Canvas object with its context.scale function called looks terrible on all three platforms.

So something is going wrong on my Linux-over-IntelGPU system. Either it's not using hardware rendering or its hardware rendering is using nearest-neighbor scaling by default, which would be a really strange default. (The software rendering should not default to nearest-neighbor either; we need to get that fixed.)

Brannon K.

If I force software rendering via QQuickWindow::setGraphicsApi, I don't see the ugly text. However, I do see it with both Vulkan and OpenGL rendering on Linux (on my Intel GPU). I did just make a breakthrough, though. If I set QT_FONT_DPI=120, as ChatGPT suggested, the issue goes away (on the QML Label, not on the Canvas). Maybe this is a known issue on Intel GPU? My Qt app detects logical DPI as 96 and physical DPI as 78.7852.