My designer is asking to center this vertically It looks as

Question

My designer is asking to center this vertically It looks as though I am but when she screenshots it and does measurements based off of the T the T is closer to the bottom vs the top On iOS that team was able to get them perfectly centered I have to admit the chips do look better on iOS Code in thread What am I doing wrong

Colton Idle · Answer

``` Composable fun ColoredChip text String primaryColor Color secondaryColor Color Surface elevation = 0 dp color = secondaryColor shape = RoundedCornerShape 16 dp border = BorderStroke width = 1 dp color = primaryColor Text text = text color = primaryColor modifier = Modifier padding horizontal = 8 dp vertical = 2 dp fontWeight = FontWeight W700 fontSize = 14 sp Preview Composable fun ChipPreview ColoredChip text = Testing One primaryColor = Color Red secondaryColor = Color Green ```

Colton Idle · Answer

If I change the modifier to this then it does look better ```modifier = Modifier padding start = 8 dp end = 8 dp top = 1 dp bottom = 2 dp ```

Didier Villevalois · Answer

Shouldn t you use one of the align modifiers

Colton Idle · Answer

Hm Let me give it a go

Colton Idle · Answer

Tried centering No luck On second look though Seems like this has nothing to do with the container its in but it seems like the uppercase T is not actually aligned in the center of the Text Bounding box

Colton Idle · Answer

Not exactly scientific but you can see that the T which my designer wants centered is actually closer to the bottom vs the top

Zoltan Demant · Answer

Can you try using a Row inside the Surface with `verticalAlignment = CenterVertically`

YASAN · Answer

if your modifiers are centering it maybe its just the font youre using

YASAN · Answer

Some fonts have extra space on top etc

Colton Idle · Answer

Not setting any specific font Just whatever is out of the box

YASAN · Answer

That still doesnt mean it is not caused by the font Try with a custom font and check if that font has any extra space on top bottom on a third party program

YASAN · Answer

Also try with all capital letters as well since the lowercase letters can deceive your eyes since the weight on the bottom would be more

Colton Idle · Answer

I guess my point of saying its the default font is that im not doing anything custom you would think out of the box id be able to center text in a pill like this

Albert Chang · Answer

Paul Woitaschek · Answer

Giving up on surgical pixel perfectness has saved us so much engineering power which we allocate to sections now that the users actually care about wink

Colton Idle · Answer

yep we do the same these labels are everywhere though and we have people that complain that they re uncentered

Colton Idle · Answer

< Albert Chang> thanks I already starred that issue I figured that font padding would be equal on top and bottom though I mean you can center text perfectly in a button no So you should be able to in this scenario

Zoltan Demant · Answer

< Colton Idle> Did you try the center vertically solution I mentioned I was having a similar problem where the outer composable had different constraints than the inner one basically resulting in the vertical padding only providing enough inset from the top and there being additional space below it Button also uses a row although I m not sure if it also has center vertically or not

Colton Idle · Answer

whoops missed your message will give it a whirl in a sec

Colton Idle · Answer

Swapped the box for a row and added the alignment like you said but it s still off < Zoltan Demant>

Zoltan Demant · Answer

< Colton Idle> That s strange mine is completely centered Or am I just blind to it

Zoltan Demant · Answer

You can also attach a background to each composable it makes visualizing the differences way easier That s how I debugged mine at least

Tin Tran · Answer

Have you tried using a box instead of a surface and use `Modifier align Center `

Albert Chang · Answer

No you can t vertically center the text perfectly without `includeFontPadding=false` and that s the point of that issue

Albert Chang · Answer

Top and bottom paddings are usually not equal

Chris Sinco [G] · Answer

FWIW things are not perfect in Figma from the designer POV either because height of text characters are not always aligned perfectly with the grid slightly smiling face Closer to be exactly centered but never perfect

Colton Idle · Answer

Oof Thanks < Chris Sinco G > I know text is crazy complicated theres a figma blog post on text sizes has been amazingly useful but yeah in this case I guess I will just add the extra dp of padding on the bottom and call it a day

Chris Sinco [G] · Answer

I think that bug should help resolve the issue in the long term crossed fingers cc < Siyamed>

Colton Idle · Answer

Will do < Chris Sinco G > one last question just out of curiosity I use figma lightly for my own projects If I wanted to design this in figma how would you do that Does it have a similar concept of font padding

Chris Sinco [G] · Answer

It doesn t have font padding but other attributes like line height letter spacing etc The discrete font padding I don t think can be controlled in Figma

Colton Idle · Answer

So aligning it dead center wouldn t be possible in figma edit like would you have to add extra spacing in figma just like i have to in compose

Colton Idle · Answer

i understand that we re out of what < CJLTWPH7S|compose> is about lol just curious how this seems like such a basic pattern a chip and how hard it seems to be to translate the idea into a design

Chris Sinco [G] · Answer

Alignment happens using the bounding box of the text element As you can see here the font padding is dependent on the font and likely whatever is rendering things in Figma e g Web GL

Chris Sinco [G] · Answer

So when you center align something in Figma it will use that bounding box The dimensions of that box for Text can be altered by font size line height the font itself But you can t add more at the top or bottom within the text if that makes sense

Chris Sinco [G] · Answer

This is not any different from how Compose does it The difference is Android adds more padding to the font than Figma or other platforms like iOS It seems some platforms get really close to how design tools do it But I d also argue there s been discrepancies between design tools themselves Sketch Figma Adobe XD Adobe Illustrator man shrugging

Siyamed · Answer

This is about font padding as many mentioned in the thread Font itself defines its padding android has includefontpadding attribute to ignore that we will work on a solution for compose too I don t know how other OSs do it Regarding the design tool mismatch I wonder how much of this difference is because i personally dont see many designs that have another script a tall script but not latin

Chris Sinco [G] · Answer

Yeah it s hard to tell

Chris Sinco [G] · Answer

But I ran into this fontPadding issue myself today Had to offset by ` 1 dp` sweat smile

Colton Idle · Answer

< Chris Sinco G > glad its not just me something feels wrong about doing that sort of thing but if it s good enough for you its good enough for me

Chris Sinco [G] · Answer

For now def should fix that bug long term