Results 1 to 5 of 5

Thread: Dynamically resize text

  1. #1

    Default Dynamically resize text

    I would like to achieve the following behavior for a text within a rectangle:
    1) text fontSize to dynamically resize with the rectangle
    2) text height should be 1/4 the height of the rectangle
    3) if the text length is longer than the rectangle width then the text fontSize should be dynamically made smaller to ensure a fit

    3) Has been giving me a hard time. I have a solution (see below) but it's a terrible hack. I use an invisible Text to check whether the width of the text string fits - and if it doesn't fit then rescale the text.

    TextButton.qml
    Qt Code:
    1. import Qt 4.7
    2. Item {
    3. id: textButton
    4. width: 50
    5. height: 50
    6. property string someText : "some long text"
    7. Rectangle {
    8. id: rect
    9. color: "purple"
    10. anchors.fill: parent
    11. Text {
    12. id: invisibleText
    13. anchors.centerIn: parent
    14. text: someText
    15. font.pointSize: textButton.height * 0.25
    16. visible: false }
    17. Text {
    18. id: rectText
    19. anchors.centerIn: parent
    20. text: someText
    21. font.pointSize: (invisibleText.paintedWidth > rect.width) ? 0.1+0.9 * parent.height * 0.25 * parent.width / invisibleText.paintedWidth : 0.1+0.9 * parent.height * 0.25}
    22. }
    23. }
    To copy to clipboard, switch view to plain text mode 

    test.qml
    Qt Code:
    1. import Qt 4.7
    2. Item {
    3. width: 50
    4. height: 50
    5. TextButton {
    6. anchors.centerIn: parent
    7. width: parent.width / 2
    8. height: parent.height /2 }
    9. }
    To copy to clipboard, switch view to plain text mode 

    Alternatively I tried the following:
    a) bind the rectText.pointSize to the formula
    Qt Code:
    1. font.pointSize: (paintedWidth > rect.width) ? 0.1+0.9 * parent.height * 0.25 * parent.width / paintedWidth : 0.1+0.9 * parent.height * 0.25
    To copy to clipboard, switch view to plain text mode 
    b) use a state change on the scale property of the rect and use a PropertyChanges Element
    c) use the onHeightChanged and onWidthChanged signals to call a function which recalculates the font size
    Qt Code:
    1. onHeightChanged: changeSize()
    2. onWidthChanged: changesize()
    3. ...
    4. function changeSize(){
    5. rectText.font.pointSize = (rectText.paintedWidth > rect.width) ? 0.1+0.9 * textButton.height * 0.25 * textButton.width / rectText.paintedWidth : 0.1+0.9 * textButton.height * 0.25}
    To copy to clipboard, switch view to plain text mode 


    All of these work...sort of but:
    a) gives binding loop warnings
    b) and c) lead to behavior where the text sometimes jumps in size and can, under specific circumstances, still exceed the rectangle length

    Any ideas how to do this more cleanly?

  2. #2
    Join Date
    Sep 2008
    Location
    Gold Coast, Australia
    Posts
    3
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Dynamically resize text

    Just a quick simple suggestion, perhaps try fiddling with font.pixelSize instead.

    Qt Code:
    1. property int fontSize: Math.round(textButton.height / 4)
    2. ...
    3. font.pixelSize: (invisibleText.paintedWidth > parent.width) ? (parent.width / invisibleText.paintedWidth) * fontSize : fontSize
    To copy to clipboard, switch view to plain text mode 

  3. #3

    Default Re: Dynamically resize text

    That works, too. I have not found any difference in the behavior of font.pixelsize and font.pointsize in this case.
    However, I was hoping to get rid of the 'invisible text'-hack somehow.

  4. #4
    Join Date
    Sep 2008
    Location
    Gold Coast, Australia
    Posts
    3
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Dynamically resize text

    I found that using pixelSize avoided this problem...

    the text sometimes jumps in size and can, under specific circumstances, still exceed the rectangle length

  5. #5
    Join Date
    May 2011
    Posts
    1
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: Dynamically resize text

    Quote Originally Posted by antialias_forum View Post
    However, I was hoping to get rid of the 'invisible text'-hack somehow.
    You could scale the Text based on how much it exceeds your width at the specified pixelSize:

    Qt Code:
    1. import Qt 4.7
    2. Rectangle {
    3. width: 200
    4. height: 200
    5. Text {
    6. width: 200
    7. height: 100
    8. text: "Some sample text here"
    9. font.pixelSize: height / 4
    10. scale: paintedWidth > width ? (width / paintedWidth) : 1
    11. transformOrigin: Item.TopLeft
    12. }
    13. }
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. How to resize the QIcon inside QPushButton dynamically?
    By gboelter in forum Qt Programming
    Replies: 2
    Last Post: 18th February 2010, 13:34
  2. Replies: 2
    Last Post: 22nd January 2008, 17:10
  3. Dynamically resize spacing
    By trskel in forum Qt Programming
    Replies: 6
    Last Post: 28th September 2007, 12:52
  4. displaying Text in QTAble dynamically
    By raghvendramisra in forum Qt Programming
    Replies: 8
    Last Post: 31st August 2007, 11:47

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.