Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Monospaced text?
Forum Updated to NodeBB v4.3 + New Features

Monospaced text?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 1.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    khislop
    wrote on last edited by
    #1

    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

    ODБOïO 1 Reply Last reply
    0
    • K 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.

      0_1562782218966_textjump.gif

      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by ODБOï
      #2

      @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
                  }
              }
          }
      }
      
      
      K 1 Reply Last reply
      0
      • ODБOïO ODБOï

        @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
                    }
                }
            }
        }
        
        
        K Offline
        K Offline
        khislop
        wrote on last edited by
        #3

        @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
                    }
                }
            }
        }
        
        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved