https://kotlinlang.org logo
#compose
Title
# compose
z

Zoltan Demant

03/18/2024, 8:26 AM
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.
i

Ivan Matkov

03/18/2024, 9:02 AM
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
1
z

Zoltan Demant

03/18/2024, 9:08 AM
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!).
i

Ivan Matkov

03/18/2024, 9:10 AM
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
Ah. And
LineHeightStyle.Alignment
is not supported yet on multiplatform (skia doesn't expose such API)
z

Zoltan Demant

03/18/2024, 9:34 AM
Copy code
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)
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?
i

Ivan Matkov

03/18/2024, 9:49 AM
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
z

Zoltan Demant

03/18/2024, 9:52 AM
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?
i

Ivan Matkov

03/18/2024, 10:24 AM
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)
z

Zoltan Demant

03/18/2024, 10:35 AM
Ive reported it here 👍🏽
👍 1
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 🤷🏽‍♂️
3 Views