Problems with QML cross-platform designs: text sizes

Question

I've been having trouble with different OSs (tried Windows 7 and Ubuntu 13.10) having different font widths and heights. I tried setting pixelSize and pointSize and both results in different sizes in both Arial and Courier font texts (Windows fonts are generally bigger).

Here is an example:

Rectangle {
    width: 312
    height: 44

    Text {
        id: text_1
        text: qsTr("1234567890123456789012345678901234567890")
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        font.family: "Courier"
        font.pointSize: 10
    }
    Text {
        id: text_2
        text: qsTr("123456789012345678901234567890")
        anchors.top: text_1.bottom
        anchors.left: parent.left
        anchors.right: parent.right

        font.family: "Courier"
        font.pointSize: 10
    }
    Text {
        id: text_3
        text: qsTr("12345678901234567890123456789012345")
        anchors.top: text_2.bottom
        anchors.left: parent.left
        anchors.right: parent.right

        font.family: "Courier"
        font.pointSize: 10
    }
}

This rectangle's width and height are defined by trial and error to fit the 3 text's in Ubuntu. See screenshots below:

In my application, I'd like one text object (with Courier font) to fill it's parent's width (text is fixed). In another rectangle, I'd like the text objects (more than one, anchored just like in the example above, with Arial font) to fill the parent's height.

Currently, I'm looking for a way to set the parent's width and height dynamically, calculated from the fixed text content, but I can't shake the feeling there's got to be a simpler way to do this.

Any tips are appreciated.

Answer 1

Choosing a parent height/width in this case in a bad idea - as you can see, it's not portable; and what if you decided to change your font later, would you want to recalculate everything? This is something you want to delegate to QML.

I suggest using Layouts, like this :

import QtQuick.Layouts 1.1 // Necessary to use ColumnLayout

ColumnLayout {   // A Single Column
    Text {
        id: text_1
        text: qsTr("1234567890123456789012345678901234567890")

        // No need for anchoring ! You may want to use Layout.fillWidth: true in some cases

        font.family: "Courier"
        font.pointSize: 10
    }
    Text {
        id: text_2
        text: qsTr("123456789012345678901234567890")

        font.family: "Courier"
        font.pointSize: 10
    }
    Text {
        id: text_3
        text: qsTr("12345678901234567890123456789012345")

        font.family: "Courier"
        font.pointSize: 10
    }
}