A modern programming language that makes developers happier.

kotlinlang

image.png

Does anyone know whether it's possible to center the content of an annotated string when it contains spans with different font sizes? The use-case here would be to have text fields separated by a separator whose font size is quite a bit smaller than the rest of the content. As you can see in the screenshot, the text seems to have a shared baseline while I actually want them to have the same (vertical) center point.

The alternative would be to have a row of text composables but that kind of feels like a waste.

I don’t know if this is even possible with the platform text stack? But feel free to file a feature request

on platform you can use `baselineShift` on `TextPaint`  to change how much you want to _shift_ from the default baseline. This is actually also used by `baselineShift`  attribute of SpanStyle in Compose.

It's actually a multiplier in Compose that uses `ascent`   as its coefficient. Ascent is a font metric that denotes the ascender line where most capital letters end. It's not usually enough to find the center of the line. However, you can find a multiplier that works for your case by trial and error.

```withStyle(
    style = SpanStyle(
        fontSize = smallFontSize,
        baselineShift = BaselineShift(0.3f)
    )
) {
    append(text)
}```


positive multiplier pushes the text upwards, negative pulls it down.

I've tried a few baseline shift values with the fonts we have to support and was able to settle on one that looks good with all of them. Thanks!