What is the best practice to scale text on top of an image?
I am building a calculator and I would like the text to scale if the number of digits displayed overfills the display, as well as for screen rotation from landscape to portrait. I have several text boxes overlayed over the screen image so I need the text to scale proportionality to the image.
Scaling the screen image is easy with height and width properties but fonts only have either PointSize or pixel Size...
Currently I am scaling the font as follows, it works fine until I enter portrait mode ands then the display text is truncated instead of scaling down.
Text {
        id: memText
        property double memtxt:.22;   //for scaling font size
        anchors { right: parent.right; rightMargin: parent.width * .02; verticalCenterOffset: parent.height * -.28; verticalCenter: parent.verticalCenter }
        onTextChanged:  {   //scale the input text
            var length = text.length;
            if (length < 5){
                memtxt = .22
            } else if (length == 6){
                memtxt = .21
            }else if(length == 7){
                memtxt = .18
            }else if(length == 8){
                memtxt = .16
            }else if(length == 9){
               memtxt = .14
            }else if(length == 10){
                memtxt = .12
            }else if(length >= 11){
                memtxt = .10
        font.pixelSize: parent.width > parent.height ? parent.height * memtxt : parent.width * memtxt;
This works fine if I lock the app to landscape view, However, its far from smooth and I feel as though I am reinventing the wheel here, there must be a better way to do this smoothly and efficiently...
Thanks for any input!

Here is an image of the screen image and text box's to give an idea of what I am up to....