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

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

To copy to clipboard, switch view to plain text mode 

here you can see the (wrong) result: http://i59.tinypic.com/29c9ymg.jpg

[anda_skoa]

Have you tried without the alignment properties? The anchor setting should already take care of the centering.

Cheers,
_

[nick85]

Thank you for the answer.
I tried but it does not seem to work well.
Without text alignments: http://i60.tinypic.com/24mgtn4.png
With only vertical center alignment: http://i59.tinypic.com/25f6hro.jpg

---

Added after 32 minutes:

And in any case I don't know why but:

scale: Math.min((width / paintedWidth), (height / paintedHeight))

scale: Math.min((width / paintedWidth), (height / paintedHeight))

To copy to clipboard, switch view to plain text mode 

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://i62.tinypic.com/2vvq0xs.png

What is wrong in scale computation?

---

Added after 27 minutes:

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

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

To copy to clipboard, switch view to plain text mode 

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.

---

Added after 21 minutes:

The answer is… NO
http://oi58.tinypic.com/2qu3xio.jpg

Is this a QML bug?