Has anyone managed to get text to display identically between platforms? On Android, everything is n...

# compose

[Zoltan Demant]

Has anyone managed to get text to display identically between platforms? On Android, everything is neatly centered vertically, but on desktop theres a clear shift downwards. I can use LineHeightStyle to adress this, but then text in other situations becomes too cramped.

[Ivan Matkov]

Centering highly depends on font's data/metrics. Different platforms use different font by default.
To get equal positioning - use the same font (from resources for example)
"*to display identically*" - it will be slightly different anyway because of platform-dependent antialiasing

[Zoltan Demant]

So in theory, if Im using the same font I should see somewhat identical positioning of text between android and desktop? Thats not the case for me, you might be able to see how the text isnt vertically centered like the circle and icon in the screenshot below (sorry, I know its a small screenshot!).

[Ivan Matkov]

if Im using the same font I should see somewhat identical positioning of text between android and desktop?

Yes.

Thats not the case for me, you might be able to see

It's hard to guess why it's not centered without a code snippet

[Ivan Matkov]

Ah. And LineHeightStyle.Alignment is not supported yet on multiplatform (skia doesn't expose such API)

[Zoltan Demant]

Box(Modifier.background(Color.Black)) {
        BasicText(
            text = "123",
            modifier = Modifier.debugBorder(),
            color = { Color.White },
            style = TextStyle.Default.merge(fontSize = 96.sp),
        )
    }

I stripped it down as far as I could, and just doing this gives me differences between top/bottom (something like 45px bottom, 62px top)

[Zoltan Demant]

Ah. And LineHeightStyle.Alignment is not supported yet on multiplatform (skia doesn't expose such API)

So this could be related to that? M3 specifies Proportionally, which I guess gets used on Android and not desktop?

[Ivan Matkov]

M3 specifies Proportionally, which I guess gets used on Android and not desktop?

No, Proportional is the only supported mode on Desktop now, so this case will handle correctly

just doing this gives me differences between

I see that it's uses default font, so I guess it's because of it

[Zoltan Demant]

Same exact result with the Lato font family. Ill try with another font family in a little bit!

[Zoltan Demant]

Seems like I get the same behavior regardless of font family

[Zoltan Demant]

Ive tried a bunch, and the only one that gives me consistent padding is roboto

[Zoltan Demant]

I guess my question now is: Can I make this work with other fonts? And if not, is there any work being done to make that possible?

[Ivan Matkov]

There is no some specific check for roboto font, it should work for all fonts. I'll check later.
(it's better to open GitHub issue to track it)

[Zoltan Demant]

Ive reported it here 👍🏽

[Zoltan Demant]

I added a bit about why I thought roboto worked previously. Seems that if I manually adjust the textSize to something big, Roboto works, but Lato still doesnt 🤷🏽‍♂️