Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Monospaced text?



  • 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.

    0_1562782218966_textjump.gif



  • @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
                }
            }
        }
    }
    
    


  • @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
                }
            }
        }
    }
    

Log in to reply