Scale centered text



  • 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



  • 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)!



  • 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?



  • 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.



  • 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?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.