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?