When using Compose Multiplatform, the UI appears h...
# compose
v
When using Compose Multiplatform, the UI appears horizontally shrunk compared to the native Android version. Here’s the text style I’m using:
Copy code
@Composable
fun B3TextStyle() = TextStyle(
    fontFamily = proximaNovaFontFamily(),
    fontWeight = FontWeight.Normal,
    fontSize = DimenFont.nonScalingSp(DimenFont.font_14dp),
    color = Colors.color_222222,
    lineHeight = DimenFont.nonScalingSp(DimenFont.font_20dp)
)
However, the text looks compressed and narrower on Compose Multiplatform. Has anyone else faced this issue before? Any suggestions on how to fix or match it with the native appearance?
j
What's up with the "non scaling sp" and does it still happen without that?
v
Copy code
@Composable
fun nonScalingSp(value: Int): TextUnit {
    val density = LocalDensity.current
    return (value / density.fontScale).sp
}
yes it is happening without this non scaling sp also , can anyone suggest me a way
can anyone share their experience if someone face similar issue earlier with multiple devices
k
What is the expectation here, that the same font is rendered identically on different platforms? If yes, that is not a correct expectation. Not sure what this screenshot is showing.
☝🏻 1
☝🏾 1
j
Wait, the same font isn't rendered identically on different platforms?
v
Yes, when I use the same font on the native XML side, it renders differently compared to when I use it in the multiplatform setup — it appears noticeably compressed horizontally. also shared the image above of the change
I am using compose multiplatform
b
@Vineet Rathee please avoid sending answers to the channel to avoid spam if not needed
k
I'll repeat my earlier question - what is this screenshot showing? Where is this horizontally shrinking UI you're referencing? There is no need to bump up your topic, as you've been engaged here, but didn't provide answers to the questions.
v
sorry , i didnt get this msg earlier , in the below image The left side shows the Native XML UI. The right side shows the KMM UI. Compare the blue-highlighted areas on both sides. Compare the green-highlighted areas on both sides. The KMM UI appears slightly shrunk or compressed compared to the Native UI. @Kirill Grouchnikov
k
Is it running on the same device, or two different devices?
v
this is same device