https://kotlinlang.org logo
Join Slack
Powered by
Bold text is measured taller than regular text on ...
# compose-desktop
a
Bold text is measured taller than regular text on the desktop. On Android it’s the same. Is that a bug or expected behavior?
Copy code
Row {
    Text(
        text = "Hello",
        fontWeight = FontWeight.Black,
        modifier = Modifier.background(Color.Gray)
    )
    Text(
        text = "Desktop",
        fontWeight = FontWeight.Normal,
        modifier = Modifier.background(Color.Gray)
    )
}
or maybe a font thing?
Actually, it’s a mess
s
Can you try with another font?
The baselines seem all messed up as well
k
Is 
Row
expected to baseline-align its 
Text
children?
a
@seb Can you even use a different font on CfD?
@Kirill Grouchnikov Not that I know of, but I’m not expecting it to. I’m expecting that `Text`s with the same font and font size have the same height and baseline.
k
I’d challenge that assumption in the world of variable fonts where there can be a lot of variation across pretty much all the “axes of movement”
a
I vaguely remember seeing somewhere that font weight should not affect height or baseline, but I’m not 100% sure.
k
Go to https://v-fonts.com/fonts/roboto-flex and play with YTLC / YTUC and other Y attributes
a
Works well
No change in height as I adjust weight
k
https://fonts.google.com/knowledge/glossary/ytuc_axis - you’re not playing with the attributes I mentioned
My reply was to “I’m expecting that `Text`s with the same font and font size have the same height and baseline” and not to the more narrow bold-vs-regular
a
Ah
I meant texts whose only difference is font weight
k
I am expecting the “bold” part to become increasingly more obsolete, and be replaced with finer-grained control over these different axes that variable font spec supports
a
Ok, so it looks like it’s an issue with Helvetica Neue specifically.
Copy code
val fonts = FontCollection()
        val fontProvider = TypefaceFontProvider()
        fonts.setDefaultFontManager(FontMgr.default)
        fonts.setAssetFontManager(fontProvider)

        fun skTextStyle(weight: Int): SkTextStyle = SkTextStyle().apply {
            fontSize = 28.0f
            fontFamilies = arrayOf("Helvetica Neue")
            fontStyle = fontStyle.withWeight(weight)
        }

        fun paragraphHeight(weight: Int): Float{
            val skParagraph = SkParagraphBuilder(style = SkParagraphStyle(), fc=fonts)
                .pushStyle(skTextStyle(weight))
                .addText("Skiko")
                .build()
            skParagraph.layout(200f)
            return skParagraph.height
        }

        println(
            IntRange(1, 10)
                .map { paragraphHeight(it*100) }
                .toSet()
                .sorted()
                .joinToString()
        )
This prints 
33.0, 34.0
for “Helvetica Neue”. For any other font I’ve tried, it prints just one number.
Similar in AWT:
Copy code
val fontsByName = GraphicsEnvironment.getLocalGraphicsEnvironment().allFonts.associateBy { it.fontName }
        val awtFont = fontsByName["HelveticaNeue"]!!.deriveFont(28.0f)
        val graphics2D = BufferedImage(100, 100, BufferedImage.TYPE_INT_ARGB).createGraphics()

        println(awtFont.deriveFont(AwtFont.PLAIN).getLineMetrics("Awt", graphics2D.fontRenderContext).height)
        println(awtFont.deriveFont(AwtFont.BOLD).getLineMetrics("Awt", graphics2D.fontRenderContext).height)
prints
Copy code
33.404
34.188
Heh, this is in Firefox on Mac OS X:
No jump in Safari or Chrome. I wonder whether Firefox uses Skia for rendering.
Ok, so workaround-time. How do I detect that the font being used is Helvetica Neue and force it to use, say, (old) Helvetica?
o
Why aren’t you using alignment by baseline in the first place?
a
Because what I’m trying to do is to have a two-column table, and have the text in each row align. But even if I did, it doesn’t work:
Copy code
Row(modifier = Modifier.padding(16.dp)){
            Text("Hello", fontWeight = FontWeight.Medium, modifier = Modifier.alignByBaseline())
            Text("Desktop", fontWeight = FontWeight.Light, modifier = Modifier.alignByBaseline())
        }
Note that the baselines don’t actually align.
k
This might be an issue in how this particular font file defines its baseline
a
Yes, that’s what it seems to be. Or maybe a combination of some weirdness in the font and a bug in skia.
Unfortunately it’s the default font in CfD on mac os.
o
But you can use any font you want
Also I remember there were font issue fixes some tine ago, are you on latest? Cc @Igor Demin
a
I’m on 1.2.1
i
there were font issue fixes some tine ago,
There were fixes regarding text input and text selection. No big changes regarding fonts. One of the major changes was changing the default font to San Francisco. But it seems it doesn't work on your machine 🤔 (the "a" shape is different). What is the version of macOS?
a
@Igor Demin I’m on Ventura 13.0.1 - it’s the absolute latest. Indeed I don’t have San Francisco installed:
i
have San Francisco installed
It is a system font that isn't visible/accessible for external applications explicitly. Applications usually use alias "System Font", which can change in the future versions.
a
But 
DesktopFont.GenericFontFamiliesMapping
specifies it as 
"San Francisco"
. Maybe that’s the problem?
Replacing it with “System Font” does the trick.
It loads “.SF NS”
i
Wow, I tested the right fix, and committed the wrong one 😅. Thank you, it will be fixed soon in 1.2.2.
a
Awesome. Except now I need to adjust all my UI because SF is smaller/thinner 😅
But at least now the bold will align with the regular.
i
because SF is smaller/thinner 😅
Perhaps, we should add this change only in 1.3. Such changes better to not add as hotfixes. It was meant to be a slightly-breaking change for 
1.1 -> 1.2
1.3 stable will be later, but also soon.
a
Good idea
k
I wouldn’t necessarily focus on pixel-perfecting the metrics to one particular font. San Francisco is default UI font on macOS, but on Windows it’s going to be Segoe. And something else on various Linux flavors.
20 Views
Open in Slack
PreviousNext
Powered by