[Interest] TextMetrics give wrong metrics for some strings

[Elvis Stansvik]

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
>     }

Actually, this one sticks out a little as well. But it's much worse on
the first one (the "Hej" one).

Elvis

>
>     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.
>
> Cheers,
> Elvis