A modern programming language that makes developers happier.

kotlinlang

android.png

desktop.png

*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.

Screenshot 2023-11-09 at 11.53.39.png

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

image.png

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!).

&gt; if Im using the same font I should see somewhat identical positioning of text between android and desktop?
Yes.

&gt; 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

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

```    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)

&gt; 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?

&gt; 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

&gt; just doing this gives me differences between
I see that it's uses default font, so I guess it's because of it

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

Seems like I get the same behavior regardless of font family

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

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?

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)

Ive reported it <https://github.com/JetBrains/compose-multiplatform/issues/4508|here> :+1::skin-tone-4:

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 :man-shrugging::skin-tone-4: