Can I get the real width & height of a Text element?

Question

I would like to get the real width & height of a Text element. If I use the paintedWidth & paintedHeight properties, I don't get it. For example:

Rectangle {
    color:  "green"
    width:  a_text.paintedWidth
    height: a_text.paintedHeight

    Text {
        id:     a_text
        text:   "r"
        color:  "white"
        anchors.centerIn: parent
    }
}

If I run that code, I see some green space on the left of the "r" on top of the "r" and below the "r". So I'm not getting the real width & height of the Text. I mean, the width & height of the white pixels.

Any way to do it?

P.S. Also I would need the relative position of the real top-left corner of the text, I mean, the x & y of the top-left white pixel relative to the "official" top-left pixel of the Text.

I'm glad you've solved your issues – BaCaRoZzo Apr 04 '16 at 20:20 — BaCaRoZzo, Apr 04 '16 at 20:20

score 17 · Accepted Answer · edited Apr 04 '16 at 20:26

17

The solution is to use the new TextMetrics element (requires QtQuick 2.5), and its tightBoundingRect property, to get the real width & heigth of the foreground text:

import QtQuick 2.5      // required!

Rectangle {
    color:  "green"
    width:  t_metrics.tightBoundingRect.width
    height: t_metrics.tightBoundingRect.height

    Text {
        id:     a_text
        text:   "r"
        color:  "white"
        anchors.centerIn: parent
    }

    TextMetrics {
        id:     t_metrics
        font:   a_text.font
        text:   a_text.text
    }
}

edited Apr 04 '16 at 20:26

BaCaRoZzo

7,502
6
51
82

answered Apr 04 '16 at 20:13

qmldonkey

271
1
2
9

Note: This didn't show any text for me. Had to add `anchors.fill: parent` to the Text component. – Neptilo Nov 09 '20 at 10:04

Adriano Campos · Answer 2 · 2022-12-13T09:35:46.043

3

"your_text_object.paintedHeight" or "your_text_object.paintedWidth": is what you need to get the height of the text, including height past the height which is covered due to there being more text than fits in the set height.

Text QML Element paintedHeight

edited Dec 13 '22 at 09:35

answered Apr 23 '18 at 11:55

Adriano Campos

1,121
7
14

This link is broken and leads to outdated documentation of version 4.8. Current Qt 5 [Text Type](https://doc.qt.io/qt-5/qml-qtquick-text.html) doesn't have such properties. They work though, perhaps for the sake of compatibility. But who knows how long? – whtyger Jul 21 '22 at 09:05
The link is updated now – Adriano Campos Dec 13 '22 at 09:36
@AdrianoCampos the links lead to Image.paintedHeight. Still not relevant – rightaway717 Feb 21 '23 at 10:57

Can I get the real width & height of a Text element?

2 Answers2