Monospaced text?

[khislop]

My UI contains a numeric QML text object with a custom font that can be changed by pressing an up or down arrow. However when setting the value the text jumps around as the character width changes, which doesn’t have the visual effect I'd like. I'd prefer if each character was spaced independent of it's width which would keep each digit in it's own column.

Is there a monospaced mode for QML text, or some other way to achieve this effect? The most evident way to do this would be to separately space and draw each digit but I'd really like to avoid having to manage 4 different Q_Properties for a single 4 digit number.

[LeLev]

@khislop hi
can you show your qml code ?

i can't see that behavior in this simple example

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        id: cmp
        anchors.fill: parent
        property int nbr: 1100
        RowLayout{
            anchors.fill: parent
            Button{
                text: "-10"
                onClicked: cmp.nbr-=10
                Layout.preferredWidth: cmp.width/3
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Item {
                id: txtWrap
                Layout.preferredWidth: cmp.width/3
                Layout.fillHeight: true
                Text {
                    text: cmp.nbr
                    anchors.centerIn: parent
                    font.pixelSize: 32
                }
            }
            Button{
                text: "+10"
                onClicked: cmp.nbr+=10
                Layout.preferredWidth: cmp.width/3
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }
}

[khislop]

@LeLev Hi

It looks like the default font is a monospaced font. If I add my custom font to your example I get the same issue, just with a centered anchor.

I realize that the issue stems from the fact that my font isn't monospaced in the first pace, but unfortunately the font is directly from my client and is non negotiable. Qt seemed to have some capacity to manage text spacing so I was hoping it had a way to force even spacing between characters independent of their width, but I haven’t found anything so far.

Unfortunately the site says I don't have enough privileges to upload my font file so instead here's a modified version of your example that loads a web font with the same issue.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    FontLoader {
    id:webFont
    source:  "https://github.com/google/fonts/raw/master/apache/walterturncoat/WalterTurncoat-Regular.ttf"
    }
    Rectangle{
        id: cmp
        anchors.fill: parent
        property int nbr: 1100
        RowLayout{
            anchors.fill: parent
            Button{
                text: "-10"
                onClicked: cmp.nbr-=10
                Layout.preferredWidth: cmp.width/3
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Item {
                id: txtWrap
                Layout.preferredWidth: cmp.width/3
                Layout.fillHeight: true
                Text {
                    font.family: webFont.name
                    text: cmp.nbr
                    anchors.centerIn: parent
                    font.pixelSize: 32
                }
            }
            Button{
                text: "+10"
                onClicked: cmp.nbr+=10
                Layout.preferredWidth: cmp.width/3
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }
}