https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
c

clark

11/17/2023, 6:55 PM
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:
Copy code
platformStyle = PlatformTextStyle(includeFontPadding = false),
lineHeightStyle = LineHeightStyle(
    LineHeightStyle.Alignment.Center,
    LineHeightStyle.Trim.None,
),
Thank you again @francisco!
Copy code
@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,
            )
        }
    }
}
This is the code for the preview shared in the original message
j

jw

11/17/2023, 7:04 PM
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?
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)
c

clark

11/17/2023, 7:06 PM
You bring up great points! Thanks for the added context.
j

jw

11/17/2023, 7:06 PM
Text is... hard!
😅 3
➕ 1
👌 1
💯 1
c

clark

11/17/2023, 7:08 PM
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.
j

jw

11/17/2023, 7:10 PM
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.
think smart 4
f

francisco

11/17/2023, 7:58 PM
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?
c

clark

11/17/2023, 8:08 PM
There doesn’t appear to be a visibly noticeable difference between 
Trim.Both
and 
Trim.None
f

francisco

11/17/2023, 9:52 PM
curious, are you trying to build like a notification badge?
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:
c

clark

11/17/2023, 10:53 PM
Ah ha! That did the trick! Thanks so much, Francisco!
Removing the font padding was the missing piece of the puzzle
f

francisco

11/17/2023, 10:56 PM
🎉
nice!
a

ascii

11/18/2023, 4:45 AM
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
❗ 1
5 Views
Powered by