I have a composable displaying a money amount like...

# compose

[Justin Xu]

I have a composable displaying a money amount like this:

Row(
    verticalAlignment = <http://Alignment.Top|Alignment.Top>,
    modifier = Modifier
        .height(IntrinsicSize.Min)
) {
    Text(
        text = dollarSign, // $
        fontSize = fontSize.times(0.6)
    )
    Text(
        text = moneyAmount, // 89
        fontSize = fontSize
    )
}

That should show a small dollar sign before the money amount. However, the dollar sign is not aligned with the top of the money amount, and I can't figure out why. There's a screenshot below with a gray background on the Row composable to illustrate

[Oleksandr Balan]

I would 1 Text and set a baselineShift for the dollar sign.

val fontSize = 64.sp
Text(
    text = buildAnnotatedString {
        withStyle(
            SpanStyle(
                fontSize = fontSize.times(0.6f),
                baselineShift = BaselineShift(0.25f),
            )
        ) {
            append("$")
        }
        append("89.00")
    },
    fontSize = fontSize,
)

It is a bit guessing game with that “0.25” value, but at least it should be consistent with font size.

[Tung97 Hl]

I think buildAnnotatedString can help in this situation