Poor text scaling with Qt Quick 1.1 / QML

Question

I am developing a software application using Qt 4.8.4 (MSVC 2010) on a Windows 7 PC. I have just made the switch from the QWidget framework to the QML / QtQuick 1.1 declarative framework however I have noticed that in QtQuick/QML, text scaling is quite poor. Letters are often cut off or skewed slightly.

In the image below, the text has been scaled due to a window resize yet it looks different everytime.

Here is the scaling function that I used:

scale: paintedWidth > maxWidth ? Math.max((maxWidth / Math.max(paintedWidth, 1)), 0.1) : 1

Basically this scaling function scales the text down only if it is larger then the size of the container that it is in. It works as it should.

I was just wondering if there is any possible way to improve text scaling in QML/Qt Quick 1.1 and if anyone else has noticed this issue?

I know that some work has been done in regards to text scaling in QtQuick 2 but unfortunately upgrading our UI to QtQuick 2 is not a possibility right now due to compatibility issues.

Bad QML Text Scaling

MartinJ MartinJ · Accepted Answer · 2013-03-08T23:53:32

The first thing to try is setting smooth: true

If you're animating the scaling then you may still notice irregularities due to hinting as the fonts are rendered at different sizes. You may have some success in forcing the Text element into a code path that caches the text to an image, which will then be scaled, rather than painting the text directly:

smooth: true
style: Text.Raised
styleColor: "transparent"

Another reason for the appearance you're getting may be that the text is not being positioned pixel aligned, i.e. y is not a whole number, or y of a parent element is not a whole number.

Poor text scaling with Qt Quick 1.1 / QML

1 Answers