[Interest] TextMetrics give wrong metrics for some strings

[Elvis Stansvik]

2016-03-21 11:09 GMT+01:00 Jens Bache-Wiig <jensbw at gmail.com>:
>
>> 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.

Excellent. This was exactly the simplification I was looking for. Works great.

Elvis

>
> Cheers,
>
> Jens Bache-Wiig
> Cutehacks
>
>
>
>
>