Hello! It appears vertically centering text can be...

# compose

[clark]

Hello! It appears vertically centering text can be tricky. I have seen quite a few threads around this but haven’t seen anything that quite worked.

I’ve tried Modifier.wrapContentHeight(align = Alignment.CenterVertically as well as using LineHeightStyle(LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.Both) but neither seem to get the job done. Code example in thread.

Anyone found something that works besides setting an offset?

SOLVED ✅
In order to get the text centered vertically, we had to add the following two properties to the text style:

platformStyle = PlatformTextStyle(includeFontPadding = false),
lineHeightStyle = LineHeightStyle(
    LineHeightStyle.Alignment.Center,
    LineHeightStyle.Trim.None,
),

Thank you again @francisco!

[clark]

@Preview
@Composable
fun CenterTextVertically() {
    val textStyle =
        TextStyle(
            fontSize = 14.sp,
            lineHeight = 19.sp,
            fontWeight = FontWeight.W500,
        )
    val boxModifier =
        Modifier.size(16.dp).background(Color.Black, shape = RoundedCornerShape(percent = 50))

    Column(
        Modifier.background(Color.Green).padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        Box(
            boxModifier,
            contentAlignment = Alignment.Center,
        ) {
            Text(
                "1",
                style = textStyle,
                color = Color.White,
                modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically)
            )
        }
        Box(
            boxModifier,
            contentAlignment = Alignment.Center,
        ) {
            Text(
                "2",
                style =
                    textStyle.copy(
                        lineHeightStyle =
                            LineHeightStyle(
                                LineHeightStyle.Alignment.Center,
                                LineHeightStyle.Trim.Both
                            )
                    ),
                color = Color.White,
            )
        }
    }
}

[clark]

This is the code for the preview shared in the original message

[jw]

Is it always going to be numbers? If no, how does 'g' work? What about 'É'?

If yes, is it only english locale and thus normal arabic numbers? or can you expect numbers written with glyphs from other locales?

[jw]

If you want a generic algorithm you'll need to measure the glyph's height and then do math to create an offset from the circle's top point (or bottom point if you want)

[clark]

You bring up great points! Thanks for the added context.

[jw]

Text is... hard!

[clark]

Haha ya definitely more complicated than I was initially thinking. I will try to make a solution that measures glyph heights and if I come up with something I’ll share in this thread.

[jw]

There's even problems with simply measuring and doing math. Because while you might center it technically it will look optically strange. I believe for that you're supposed to use the baseline and ascent of the glyph, but I'm honestly not sure. I tend to look stuff like this up each time, or simply throw edge cases at my designers until they have to go research what they actually want.

[francisco]

if you change LineHeightStyle.Trim.Both to LineHeightStyle.Trim.None it should add equal top and bottom padding to the text, how does that look? does it fix your issue?

[clark]

There doesn’t appear to be a visibly noticeable difference between Trim.Both and Trim.None

[francisco]

curious, are you trying to build like a notification badge?

[francisco]

I had to build a counter badge for my design systems and this is how i got the text to be centered in a surface:

[clark]

Ah ha! That did the trick! Thanks so much, Francisco!

[clark]

Removing the font padding was the missing piece of the puzzle

[francisco]

🎉

[francisco]

nice!

[ascii]

It's worth noting that the styles that fix it are default in v1.6+: https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b