Scale centered text

nick85

Hi all, I want to use the scale property of a Text so that the enclosed text shows up in its entirety (no wrap) within the size of the Text itself.
I'd like to be able to operate directly on the scale property instead of changing the font size.

Everything works, as long as the text is left-aligned. If I switch the text alignment to center, the text box appears in the right place, but the text is not center-aligned.
I tried to change the transformOrigin to "Item.Center", but this does not solve the problem.

Attached you can find an example featuring a text and a rectangle enclosing it:
@ Rectangle
{
id: rect
anchors.fill: testText
color: "yellow"
}

Text
{
    id: testText

    width: 100
    height: 50

    anchors.centerIn: parent

    text: "example"
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter

    scale: Math.min((width / paintedWidth), (height / paintedHeight))
    transformOrigin: Item.Center // <- I've tried every point...
    color: "black"
}@

Result:
!http://i59.tinypic.com/29c9ymg.jpg(http://i59.tinypic.com/29c9ymg.jpg)!

Thanks in advance

nick85

Update:
I tried without text alignment or with only vertical alignment but It doesn't work:

@ //verticalAlignment: Text.AlignVCenter
//horizontalAlignment: Text.AlignHCenter@

Result: !http://oi60.tinypic.com/24mgtn4.jpg(http://oi60.tinypic.com/24mgtn4.jpg)!

With only vertical alignment:

@ verticalAlignment: Text.AlignVCenter
//horizontalAlignment: Text.AlignHCenter@

Result: !http://oi59.tinypic.com/25f6hro.jpg(http://oi59.tinypic.com/25f6hro.jpg)!

nick85

And in any case I don't know why but:
@scale: Math.min((width / paintedWidth), (height / paintedHeight))@
does not seem to work perfectly!

I tried with a vertical expansion changing the text to "aa". In this case, (width / paintedWidth) is greather than (height / paintedHeight), therefore the scale should be (height / paintedHeight) and I expect the text height will be the same as the box.

But the result is !http://oi62.tinypic.com/2vvq0xs.jpg(http://oi62.tinypic.com/2vvq0xs.jpg)!

What is wrong?

nick85

I found a workaround adding a wrapper Item and keeping Text auto-resizing:

@ Rectangle
{
id: rect
anchors.fill: textContainer
color: "yellow"
}

Item
{
    id: textContainer

    width: 100
    height: 50

    anchors.centerIn: parent
}

Text
{
    id: testText

    // NOTE: auto width

    anchors.centerIn: textContainer

    text: "aa"
    //verticalAlignment: Text.AlignTop  // <-- NOT NEEDED
    //horizontalAlignment: Text.AlignLeft   // <-- NOT NEEDED

    scale: Math.min((textContainer.width / paintedWidth), (textContainer.height / paintedHeight))
    //transformOrigin: Item.Center   // <-- NOT NEEDED
    color: "black"
}

@

This seems to work but vertical expansion still does not fill the whole height.
Please correct me if I'm wrong, but I believe paintedHeight should be the height in pixel of the text being rendered.
However, this does not seem the case, as a border of a few pixels still remains, both in the upper and the lower part of the rectangle.
Is this behavior due to the render engine leaving a few extra pixels for characters potentially higher than 'a' (e.g., 't' or 'q'), since the font being used is not monospace?
Thanks in advance.

nick85

The answer is... NO
!http://i58.tinypic.com/2qu3xio.png(http://i58.tinypic.com/2qu3xio.png)!

Extra pixels still remains!
Is this a QML bug?