[Interest] TextMetrics give wrong metrics for some strings

[Jens Bache-Wiig]

> On 21 Mar 2016, at 10:47, Elvis Stansvik <elvstone at gmail.com> wrote:
> 
> 2016-03-21 10:42 GMT+01:00 Elvis Stansvik <elvstone at gmail.com>:
>> 2016-03-21 10:27 GMT+01:00 Elvis Stansvik <elvstone at gmail.com>:
>>> Hi all,
>>> 
>>> I'm attempting to make a custom Button item where the size of the
>>> button is determined by the metrics of the text it holds. The reason
>>> is I want to put a thin rectangle below the text, sort of a stylistic
>>> underlining (text underlining is not sufficient, for aesthetic
>>> reasons).
>>> 
>>> But I'm seeing strange metrics reported for some strings.
>>> 
>>> BEGIN TEST CASE
>>> 
>>> Button.qml:
>>> 
>>> import QtQuick 2.5
>>> 
>>> // Attempt at a button with a size determined by the metrics
>>> // of its text.
>>> 
>>> Rectangle {
>>>    property alias text: text.text
>>>    property alias pointSize: text.font.pointSize
>>> 
>>>    width: textMetrics.width
>>>    height: textMetrics.height
>>> 
>>>    TextMetrics {
>>>        id: textMetrics
>>>        font: text.font
>>>        text: text.text
>>>    }
>>> 
>>>    Text {
>>>        id: text
>>>        text: "Button"
>>>    }
>>> }
>>> 
>>> 
>>> Test.qml:
>>> 
>>> import QtQuick 2.5
>>> 
>>> Rectangle {
>>>    width: 800
>>>    height: 600
>>> 
>>>    // Something wrong with the metrics on this one :/
>>> 
>>>    Button {
>>>        text: "Hej"
>>>        pointSize: 42
>>>        border.color: "red"
>>> 
>>>        anchors.top: parent.top
>>>    }
>>> 
>>>    // These two seem OK.
>>> 
>>>    Button {
>>>        text: "Something longer"
>>>        pointSize: 42
>>>        border.color: "red"
>>> 
>>>        anchors.verticalCenter: parent.verticalCenter
>>>    }
>>> 
>>>    Button {
>>>        text: "Test"
>>>        pointSize: 42
>>>        border.color: "red"
>>> 
>>>        anchors.bottom: parent.bottom
>>>    }
>>> }
>>> 
>>> END TEST CASE
>>> 
>>> See the attached screenshot (metrics_are_off.png) which shows the
>>> result. Notice how the size of the buttons (Rectangle) are correct for
>>> the last two buttons, but for the first, the text is sticking out a
>>> little :/
>>> 
>>> Any idea why this is, and how I can solve it?
>>> 
>>> I'm also attaching a sketch (sketch.png) of the look I'm after for my
>>> buttons. If you know of a simpler way to achieve this, I'm idle ears.
>> 
>> Nevermind. I realize now that the metrics are actually correct, it's
>> just that the 'H' in "Hej" has some leading space, which seems to not
>> be included in the reported metrics.
>> 
>> I'll have to rethink a little, but should get it to work now I think.
>> Still would appreciate if someone who's done something similar to what
>> I'm trying could chime in.
> 
> Actually, I guess my question is now; how can I account for this
> leading space? I.e. how can I get the position where the string
> (visually) starts and ends in the X direction? In the "Test" and
> "Something longer" case, the TextMetrics seems pretty accurate, but
> the leading space that the 'H' has (in the font I guess) seems to not
> be included in the metric rect :/
> 
> Elvis

In most cases you do not actually need to use TextMetrics explicitly in the way that you are doing here. The Text item already has a built in “implicitWidth” and “implicitHeight” properties that accounts for font metrics and any leading/trailing space you need. Unless I am missing something, all you need to do to make your example work is to simplify your button to this:

Rectangle {
   property alias text: text.text
   property alias pointSize: text.font.pointSize

   width: text.implicitWidth
   height: text.implicitHeight
   Text {
       id: text
       text: "Button"
   }
}

That said, you probably want some extra margins around the text label in most cases regardless.

Cheers,

Jens Bache-Wiig
Cutehacks