aligning fonts of differing sizes

[mzimmers]

Hi all -

I'm trying to modify the very nice CircularSlider code found in the marketplace. Specifically, I need the center of the slider to contain text of multiple font sizes, aligned at their bottom. (This is going to be slightly complicated by the fact that I need to rotate the slider 180 degrees, but I'll deal with that later.)

Here's a snippet of my code:

CircularSlider {
    id: circularSlider
    anchors.centerIn: parent
    width: 200
    height: 200
    rotation: 0//180

    // the left/right anchors are backwards from
    // what one might expect, because we've rotated
    // the CircularSlider 180 degrees.
    CLabel {
        anchors {
            right: parent.horizontalCenter
            bottom: parent.verticalCenter
        }
        text: "10"//Number(circularSlider.value).toFixed()
        font.pixelSize: 24
        font.weight: Font.Bold
        rotation: -circularSlider.rotation
    }
    CLabel {
        anchors {
            left: parent.horizontalCenter
            bottom: parent.verticalCenter
        }
        text: "gpm"
        rotation: -circularSlider.rotation
    }
}

(You can replace the "CircularSlider" with an ordinary rectangle object if you want to try the code yourself.)
And here's what I'm getting:

So, I'm curious as to why the two text objects don't line up. Also, if there's a better way to handle this in general, I'm open to any and all suggestions.

Thanks...

[Markkyboy]

    CircularSlider {
        id: circularSlider
        anchors.centerIn: parent
        width: 200
        height: 200
        rotation: 0//180

        Row {
            spacing: 10

            Label {
                id: num
                text: "10"//Number(circularSlider.value).toFixed()
                font.pixelSize: 72
                font.weight: Font.Bold
            }
            Label {
                text: "gpm"
                anchors.verticalCenter: num.verticalCenter
                anchors.bottom: num.baseline
            }
        }
    }

[mzimmers]

@Markkyboy thank you; this is a very good start.

Now, I need to contend with the fact that I have to rotate the slider 180 degrees. Doing so results in this:

As you can see, there are two problems with this:

1. the text fields are backwards ("gpm" comes before "10")
2. they're aligned at the top, not the bottom.

Would the correct solution be to enclose this in an invisible rectangle, and make the Labels peers of the slider instead of children? Or is there a more elegant way to fix this?

Thanks...

EDIT: I added the following line to both Labels to get the text right side up:

rotation: -circularSlider.rotation

[mzimmers]

I tried my idea above, and it seems to work (this code called from a main.qml):

Item {
    anchors.centerIn: parent

    CircularSlider {
        id: circularSlider
        anchors.fill: parent
        ...
    }

    CLabel {
        id: nbr
        anchors {
            right: parent.horizontalCenter
            rightMargin: 3
            baseline: parent.verticalCenter
        }
        text: Number(circularSlider.value).toFixed()
        font.pixelSize: 24
        font.weight: Font.Bold
    }
    CLabel {
        anchors {
            left: parent.horizontalCenter
            leftMargin: 3
            baseline: nbr.baseline
        }
        text: "gpm"
    }
}

Produces this:

Thanks for looking...