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.
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.
Related
I'm trying to get a Designer fixed size mainwindow to display as it looks at its minimum size in Designer. If I set its sizePolicy to 'Expanding, Expanding', and adjust the size as small as it will go, the geometry is shown as [(0,0), 1378 x 756]. When I run the program it displays bigger than it needs to be, but I can resize it to its smallest and it looks good enough (picture on the left), although the bottom of the Random frame doesn't perfectly align with the label to its left.
If I use QSettings; the size from the .config file is 'size=#Size(1368 727)', but I can't set it to that in Designer. If I set the sizePolicy to 'Fixed, Fixed' at 1378 x 756 then it looks wrong when I run it and I obviously can't resize it (picture on the right).
two images as described above
What could be causing it and/or how can I fix it?
(I tried adding QApplication::setStyle(QStyleFactory::create("Fusion")); and its #include, from the first answer here, but no change)
Qt Creator 7.0.0 Based on Qt 6.2.3, Linux Mint 21 Cinnamon (ubuntu 20.04).
Eta: Typically; a bit more effort on my part has got it right. Mainly I think the label was too big for the space available for it. All looking perfectly aligned now and no more discrepancy between Designer's size (of the main window) and the .conf file.
So as the title says, i have font rendering issue with QML project, using macOS.
Image example
The font is in assets/fonts (local folder), and it's being added in main.qml through FontLoader, like 3 other fonts. All fonts but this one are rendering correctly, and as you can see in screenshot above, my system reads font correctly. All fonts i've loaded are .otf, i don't know if that is relevant to my issue.
Expected result:
My sample QML code is:
Text {
id: welcomeMessageTop
color: "blue"
text: "ASDFGHJKLT"
font.family :
fontLoaded.name
font.pixelSize: 110
font.letterSpacing: -0.4
}
Thanks
I suspect this may have something to do with the default approach to efficienty render dynamically resizable text in QML, which is via distance fields. It is a great way to have smoothly resizing raster graphics and get almost vector graphics like results, but it does eat away small details that do not stand out enough relative to the character size.
You should try setting renderType: Text.NativeRendering for the Text element to see if that helps.
Also, IIRC native text rendering looks pretty bad if your text is dynamic - if it is animated, rotated or its size changes dynamically. It is mostly useful for static stuff, but I suppose the text can be rendered at a larger size to an invisible item, and that item can be used as a shader source which then you can apply dynamic behavior and get results that are not horrific.
In the case you are going to be resizing or rotating the text, note that there are also some env vars that can be modified to tweak the distance field generation and get a better result:
qputenv("QT_DISTANCEFIELD_DEFAULT_BASEFONTSIZE", "64");
qputenv("QT_DISTANCEFIELD_DEFAULT_SCALE", "16");
qputenv("QT_DISTANCEFIELD_DEFAULT_RADIUS", "80");
The problem with that is it doesn't seem to be possible to tweak on a per-font basis, so if you increase the distance field resolution, it will end up eating more memory even for fonts that don't need it.
I have created a custom keyboard layout for my QtQuick application using the VirtualKeyboard in 5.9.2. I am trying to fit this keyboard on a small screen to make it more readable and usable than the Virtual Keyboard was stock.
There are two things I need to do which I cannot seem to make work:
Make the font larger on the keyboard buttons. After changing the layout, the buttons are larger, but the text on the buttons is still the same, tiny size. It looks strange.
Reduce margins surrounding the keyboard to use up more of the available screen space. The keyboard is already set to the width of the screen. I could make it larger, but if I could simply reduce the margins that would be a much more simple solution.
Any help would be appreciated!
you can use screen properties in qml and set font.pixelSize and margin according to screen height and width.
import QtQuick.Window 2.2
and use below properties
Screen.pixelDensity
Screen.height
Screen.width
The best way to solve this is by using a style.qml sheet. This is answered in a different question of mine located here: Qt Virtual Keyboard Custom Style
A weird bug occurs when displaying text, the antialiasing seems to change over the span of the textarea as shown in the image. Notice the "x" on the bottom left side compared to the "u" in the upper right side.
I'm using Arial thats embedded and i've tried with both advancedAntialiasing set to false or true, but this bug still occurs.
I'm using the Flex 3.5 SDK in Flash Builder 4.0.
The player from which i've taken the screenshot is is Flash Player 11
My question is how is this possible, and what can i do to remove the weird behavior?
This behaviour was due to a z coordinate set to the textarea. Slightly surprising effect. Setting the textarea z to 0 removed any odd blur.
I have a textarea where I measure the textWidth and textHeight to make sure the user cannot enter more text than can fit in the text area. I also extended the textArea with a textHeightNow and textWidthNow that measure the textField's dimensions since they update w/out requiring validation. Now this works great for 90% of the embedded fonts I'm using but any fonts that have giant serifs are not measured properly, for instance look at the 'f's in this text area:
alt text http://img.skitch.com/20091101-xhm5jguma1qgukg6fxrymrwr3u.jpg
You can see they get cut off on both sides because textWidth and textWidthNow both return an incorrect size not taking into account the massive serifs. The font size, coords and dimensions of the text area are all integers so thats not the problem, any other suggestions? I looked to see if textArea has a clipContent argument but it doesn't (that would have been nice).
Thanks
I've run into this problem before and as far as I can tell you have two options, none of them very nice:
Use the new flash.text.engine in
Flash Player 10... its very hard to use but
I think it will measure such fonts
(and ligatures) properly.
Draw the textfield into a bitmapdata
and use getColorBoundsRect to
determine its real dimensions.
I ended up using the latter as changing the whole app to the new engine would have been much much harder. You will need to tweak margins and use a larger textfield (inside some container) to be able to draw it properly, but it should work.