Hey guys, I’m having some issue with fonts we are ...

# compose

[The BreakPoint]

Hey guys, I’m having some issue with fonts we are using
In the image, the top item uses default fontfamily the bottom one uses our custom provided fonts (Noto sans). Don’t know why it’s adding padding at top.
Our goal is to make text appear in center with equal paddings vertically.

Here’s the code: It’s very simple just a row with some padding and bg with rounded shape.

@Composable
fun Tag(
    type: TagType,
    text: String,
    modifier: Modifier
) {
    Row(
        modifier = modifier
            .background(
                color = type.bgColor,
                shape = RoundedCornerShape(type.borderRadius)
            )
            .padding(vertical = SPACE_2_DP),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        RowSpacer(space = SPACE_8_DP)

        Box(contentAlignment = Alignment.Center) {

            Text(
                text = text,
                style = AppTheme.typography.labelLarge,
                color = type.contentColor,
                textAlign = TextAlign.Center
            )
        }


        RowSpacer(space = SPACE_8_DP)
    }
}

The fonts family is picked from Theme. So the top preview is Default theme and the bottom preview is with our Theme which has this Notosans fonts.

[chanjungskim]

Can you mouse over the text? maybe you can see what's there. I guess it's padding(vertical = SPACE_2_DP) or RowSpacer?

[Halil Ozercan]

Have you tried turning off includeFontPadding?

[chanjungskim]

textStyle = TextStyle(
      platformStyle = PlatformTextStyle(
     includeFontPadding = false
   )

this is deprecated, is there any other way to set includeFontPadding to false?

[chanjungskim]

Hmm. when includeFontPadding = false , the font can be cut.

[chanjungskim]

How can I solve this issue when I set contentPadding? if I set modifier padding, the padding goes to the outer of the box.

[The BreakPoint]

@Halil Ozercan Yes I did try with includeFontPadding = false
it remove that top padding but the content still seems not centered.

[The BreakPoint]

The padding from L to top is greater than that of y’s tail to bottom.

[chanjungskim]

Can you move mouse over the text and take a sreenshot?

[The BreakPoint]

Sure please check this

[chanjungskim]

So, the last one seems fine?

[The BreakPoint]

Nope, it’s not properly centered align

[The BreakPoint]

See there’s still some padding above ‘L’ but not below ‘y’

[adte]

I think without the font padding looks fine, it is aligned according to the bounding box of the font (the grid lines on your screenshot). Different characters have different height, so alignment should not depend on the specific characters being used. Otherwise if a translation in another language was using e.g. "Å", the would be no space to display it.

I think diacritics on capital letters is usually why latin only font designers add a little extra space on top.

[The BreakPoint]

okay got it

[Colton Idle]

You can try a different font to see if you centering "issues" are just related to your specific currnet font. also this snippet used to be deprecated

textStyle = TextStyle(
      platformStyle = PlatformTextStyle(
     includeFontPadding = false
   )

but now in recent alphas is no longer deprecated

[Mayur]

Bit late but just for the info of being undeprecated:

• Use PlatformTextStyle API from Compose 1.2.0 to configure includeFontPadding. For few compose versions it was deprecated on purpose to indicate that it is a compatibility API, but has been undeprecated in compose 1.5 to encourage developers to use it.

https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b