Question

I have 2 spark labels next to each other. They are in a basic layout and both have bottom set to 0. They have different font sizes (28 and 12).

Both fields only display numbers. I want the baseline of the numbers to line up.

At the moment they do not as there are no descenders and the descender area of the line is obviously a different height for the 2 different font sizes.

I suspect that I might have to override updateDisplayList and somehow use TextLine’s descent property but I can’t see how I would easily access that.

Answer 1

Use the baseline property, here is a small example:

<s:Group id="group1" width="100" height="100" verticalCenter="0" horizontalCenter="0">
    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="0xF0F0F0"/>
        </s:fill>
    </s:Rect>
    <s:Label id="label1" text="10" fontSize="10" left="30" baseline="50"/>
    <s:Label id="label2" text="20" fontSize="20" left="45" baseline="50"/>
</s:Group>