[TEST] Text rendering comparison #13

c5inco · 2022-05-20T21:53:58Z

Branch to show and discuss text rendering differences between Swing and Compose for Desktop.

Font styles are based on the current typography spec for IntelliJ. You can also run an internal action to see the Swing demo with Tools > Internal Actions > UI > Demos > Test Label Sizes (this is also where I pulled the Swing code for comparison).

c5inco · 2022-05-20T21:59:14Z

Test code is setup, but it seems there's some issues with loading the SF font (at least in macOS) with Skiko

2022-05-20 14:55:24,761 [   8328]   WARN - ains.compose.desktop.ide.theme - Unable to convert font .SFNS-Regular into a Skiko typeface, fallback to 'Typeface.makeDefault()'

The result is this, which I have no idea what font it is:

I've also tried to set fontFamily to FontFamily.Default, hoping CfD would load the system font in the context it's running. Seems that font in IntelliJ is Helvetica?

rock3r

Just a couple minor things

rock3r · 2022-05-21T06:22:11Z

themes/intellij/idea/build.gradle.kts

@@ -26,7 +26,7 @@ intellij {
 //    pluginName.set("Compose support for IJ UI development")
    version.set("LATEST-EAP-SNAPSHOT")
    plugins.set(listOf("org.jetbrains.kotlin", "org.jetbrains.compose.desktop.ide:${libs.versions.composeDesktop.get()}"))
-    version.set("2021.2.4")
+    version.set("2021.3.3")


We had to use 21.2 because 21.3+ would crash, happy to see that's fixed now ✨

Oh I didn't know that. I did try 22.1 and that crashed. Did you test this change locally?

I just did. Is this the crash you get?

Seems fine when using 21.3.3 at least :)

CC @igordmn

Thanks! Reproduced it.

rock3r · 2022-05-21T06:23:55Z

...tellij/idea/src/main/kotlin/org/jetbrains/jewel/theme/idea/CurrentIntelliJThemeDefinition.kt

@@ -157,8 +159,24 @@ suspend fun CurrentIntelliJThemeDefinition(): IntelliJThemeDefinition {
        )
    )

+    val baseTextStyle = retrieveFont("Label.font", palette.text)
+
+    fun TextStyle.scaleFont(amount: Float): TextStyle {


Just a nit, but I'd expect a function called scale* to take in a float scale factor, not an offset amount

That's fair. I think given text units in Compose use SP we get scaling for free, unlike these utility functions (biggerOn, lessOn) in JBUI. That is what I modeled it after with some simplification.

lamba92 · 2022-05-23T13:12:24Z

Test code is setup, but it seems there's some issues with loading the SF font (at least in macOS) with Skiko
2022-05-20 14:55:24,761 [   8328]   WARN - ains.compose.desktop.ide.theme - Unable to convert font .SFNS-Regular into a Skiko typeface, fallback to 'Typeface.makeDefault()' 
The result is this, which I have no idea what font it is:

I've also tried to set fontFamily to FontFamily.Default, hoping CfD would load the system font in the context it's running. Seems that font in IntelliJ is Helvetica?

@igordmn any clue?

igordmn · 2022-05-24T08:13:25Z

@igordmn any clue?

FontFamily.Default in Compose for MacOs is Helvetica Neue.

About loading SF issue. How it is loaded, from file, or by family name?

rock3r · 2022-05-24T14:22:54Z

@jimgoog will get someone from the text team on the Google side to help out with the text-specific issues here

rock3r · 2022-05-24T14:58:06Z

@c5inco I've taken the liberty to push a fix so that the text demo now shows up with the right background, and removed some redundant asBold() calls on the JBFonts side. I was wondering whether we should update our typography definitions to match the JBFont ones; h0, h1, and h4 are always bold:

jimgoog · 2022-05-24T15:04:21Z

cc @objcode

jimgoog · 2022-05-24T15:10:23Z

@c5inco @rock3r Can you point to the line where this font is being loaded by Compose/Skia?

objcode · 2022-05-24T15:11:35Z

@c5inco can you the font code in a minimal repro, may be a framework issue but hard to tell from this CL

rock3r · 2022-05-24T15:29:02Z

@jimgoog sure, it starts in org.jetbrains.jewel.theme.idea.CurrentIntelliJThemeDefinitionKt#CurrentIntelliJThemeDefinition. I was just double checking that and it's working fine, as in it loads the right font family (e.g., Segoe UI on Windows, SF Sans on macOS), but the weights are all over the place.

There's a significant difference in the font rendering that is quite apparent (Windows, darcula):

Looks like our definition of bold and Swing's are pretty different. Swing's bold looks ExtraBold, or even Black. I tried setting our weights to ExtraBold and Black but that has no effect. Is this a matter of the weights not being included in the fontfamily on the Skia side? Not sure.

c5inco · 2022-05-24T19:54:30Z

@c5inco I've taken the liberty to push a fix so that the text demo now shows up with the right background, and removed some redundant asBold() calls on the JBFonts side. I was wondering whether we should update our typography definitions to match the JBFont ones; h0, h1, and h4 are always bold:

@rock3r did you make these changes in the IJ platform as well?

rock3r · 2022-05-24T19:57:52Z

@c5inco no I've updated our typography to match the existing platform stuff

jimgoog · 2022-07-14T18:14:58Z

@igordmn It seems font loading isn't working in the Jewel bridge. But it seems it might not be Jewel and it's more on the Compose Desktop side?

c5inco · 2022-07-14T18:16:04Z

FontFamily.Default in Compose for MacOs is Helvetica Neue.
About loading SF issue. How it is loaded, from file, or by family name?

@igordmn why is the default Helvetica Neue in Compose when the default in macOS generally appears to be SF?
@rock3r I believe the loading is done by the Jewel bridge, but is it from file or family name? Through a string?

rock3r · 2022-07-14T18:58:50Z

@c5inco the bridge only gets the font from the IJ theme (it's an AWT font), and tries to find it by name in the available fonts list as provided by Skiko (see these lines)

You can follow through the call to Skiko's toSkikoTypeface(), which in turn is a wrapper around AwtFontManager. @igordmn can explain better how that works — it's slightly different from the solution we had initially hacked with @lamba92 (and may not be able to find all fonts if they're not installed in standard paths on some OSes) but the basics are similar.

igordmn · 2022-07-20T20:54:43Z

@igordmn why is the default Helvetica Neue in Compose when the default in macOS generally appears to be SF

I don't remember the exact reason. Maybe it is because in Skia itself we have it by default. Chrome also has Helvetica as a default font (not Helvetica Neue though).

But we'll investigate whether we should change it to San Francisco.

I was just double checking that and it's working fine, as in it loads the right font family

@igordmn It seems font loading isn't working in the Jewel bridge

I am confused :). Does font loading work or doesn't work?

c5inco · 2022-07-26T16:57:54Z

@igordmn thanks on the SF check - I think we should change it if possible since Helvetica is mainly used by older macOS apps. And for font loading, no loading doesn't seem to be working when using the name pulled from the AWT theme - this is the error seen in the log from Jewel:

2022-05-20 14:55:24,761 [   8328]   WARN - ains.compose.desktop.ide.theme - Unable to convert font .SFNS-Regular into a Skiko typeface, fallback to 'Typeface.makeDefault()'

Sebastiano's previous comment has more links to the code where Jewel is trying to load the font.

igordmn · 2022-09-14T01:32:19Z

JetBrains/compose-multiplatform-core#296

San Francisco by default

c5inco · 2022-09-16T19:13:50Z

@igordmn what stable version of CfD will this land in?

igordmn · 2022-09-16T19:29:42Z

This is already in 1.2.0-beta01. 1.2.0 will be released on October, 10.

Also, will try to look on other font issues

c5inco · 2022-09-16T21:08:10Z

Awesome great to hear. Yes I'll test it after that release (update this PR) and see if there are more issues.

jimgoog · 2022-09-18T23:25:49Z

@c5inco This is already in 1.2.0-beta01 (which is released). It would be good if we can get this tested/verified prior to 1.2.0 (stable) October 10, such that if there are still bugs or if it otherwise doesn't meet expectations, that can be fixed prior to the final release.

igordmn · 2022-09-19T11:45:55Z

It would be good if we can get this tested/verified prior to 1.2.0 (stable)

The change of changing the default font was primarily for usual Compose applications. It probably should not affect Jewel, because we should always use the font defined in the IDEA settings, not the system default font. And to use this font, we should define a separate component, something like org.jetbrains.jewel.Text, similar to androidx.compose.material.Text, which reads fonts from a MaterialTheme.

c5inco · 2022-09-27T20:41:48Z

It seems this isn't working yet in 1.2.0-beta01. I've tried this by updating dependencies in Jewel and the respective sample projects, as well as trying it in a new Compose Desktop project and manually upgrading to 1.2.0-beta0.

@igordmn do you have the sample code that generated the screenshots here (JetBrains/compose-multiplatform-core#296)?

igordmn · 2022-09-28T10:41:03Z

It seems this isn't working yet in 1.2.0-beta01

You mean, the default font isn't San Francisco? That was the only change, and there were no bug fixes.

The code is usual:

Text("Rat's")
Button({}) {
   Text("Rat's")
}

Unable to convert font .SFNS-Regular into a Skiko typeface, fallback to 'Typeface.makeDefault()'

I haven't looked on this issue yet

c5inco · 2022-09-29T21:13:41Z

Yes the default is still Helvetica Neue it seems. Used the same "Rat's" content in Button to compare as well as digits.

I haven't looked on this issue yet

Yeah, I'm getting the same issue in the logs output on Unable to convert font .SFNS-Regular into a Skiko typeface. I wonder if this is more a problem with Jewel now. @rock3r thoughts?

rock3r · 2022-09-30T05:58:51Z

I'm not really sure what's going on, haven't had time to test it on Mac yet. I'll take a look today, hopefully 🤞

igordmn · 2022-09-30T13:33:12Z

Yes the default is still Helvetica Neue it seems. Used the same "Rat's" content in Button to compare as well as digits.

Could you write here your macOs version?

rock3r · 2022-09-30T14:49:16Z

I have checked and this happens for me as well — the Skiko AwtFontManager doesn't find the font. I debugged it and it's simply not in the map:

I suppose this is happening because the fonts starting with . aren't maybe using their "real" names, those are more like aliases. The same happens with .AppleSystemUIFont. The bug is in Skiko, or rather, in Skiko's naive font discovery algorithm. I feel like we're going to have similar issues on Windows as well, where some fonts aren't located in the default folders but are still registered. That is why we had, back in the day, created all the machinery you can find in org.jetbrains.jewel.font, which (at least on Windows) relies on the registry as well as file-based discovery.

If you look at what Qt does, for example, on macOS they'll be scanning for aliases using CoreFont. I don't really think we have much of a workaround for this, we'll need Skiko to do some serious JNI work; then it'll know about all the fonts, and this will be fixed.

rock3r · 2022-09-30T14:50:45Z

PS: I have just pushed a rebase on top of master, should get in some improvements/fixes (and up-to-date dependencies)

c5inco · 2022-10-13T20:47:17Z

Yes the default is still Helvetica Neue it seems. Used the same "Rat's" content in Button to compare as well as digits.

Could you write here your macOs version?

@igordmn my macOS version is 12.6. Looking at @rock3r response it looks like we need to make fixes to Skiko?

igordmn · 2022-10-13T22:09:58Z

Looking at @rock3r response it looks like we need to make fixes to Skiko?

It seems so. We need to implement more complex font searching. Not sure yet if we need native API for that

rock3r · 2023-06-19T15:05:05Z

This is beyond obsolete by now; I'll close it

c5inco changed the title ~~Text rendering comparison~~ [TEST] Text rendering comparison May 20, 2022

c5inco requested review from rock3r, lamba92 and jimgoog May 20, 2022 21:54

rock3r approved these changes May 21, 2022

View reviewed changes

c5inco and others added 2 commits September 30, 2022 16:23

Initial commit for text rendering comparison

39f12eb

Fix IDE demos background/theming

b0b0a79

Cleanup code and styling

adbc958

rock3r force-pushed the text-rendering branch from 66919d6 to adbc958 Compare September 30, 2022 14:50

rock3r mentioned this pull request Nov 30, 2022

Some fonts don't get loaded JetBrains/skiko#624

Closed

lamba92 approved these changes Dec 20, 2022

View reviewed changes

rock3r marked this pull request as draft December 21, 2022 09:14

rock3r closed this Jun 19, 2023

rock3r deleted the text-rendering branch July 7, 2023 16:39

[TEST] Text rendering comparison #13

[TEST] Text rendering comparison #13

Conversation

c5inco commented May 20, 2022 • edited Loading

c5inco commented May 20, 2022

rock3r left a comment

Choose a reason for hiding this comment

rock3r May 21, 2022

Choose a reason for hiding this comment

c5inco May 23, 2022

Choose a reason for hiding this comment

rock3r May 24, 2022

Choose a reason for hiding this comment

igordmn May 24, 2022

Choose a reason for hiding this comment

rock3r May 21, 2022

Choose a reason for hiding this comment

c5inco May 23, 2022

Choose a reason for hiding this comment

lamba92 commented May 23, 2022

igordmn commented May 24, 2022

rock3r commented May 24, 2022

rock3r commented May 24, 2022

jimgoog commented May 24, 2022

jimgoog commented May 24, 2022

objcode commented May 24, 2022

rock3r commented May 24, 2022

c5inco commented May 24, 2022

rock3r commented May 24, 2022

jimgoog commented Jul 14, 2022

c5inco commented Jul 14, 2022 • edited Loading

rock3r commented Jul 14, 2022 • edited Loading

igordmn commented Jul 20, 2022

c5inco commented Jul 26, 2022

igordmn commented Sep 14, 2022

c5inco commented Sep 16, 2022

igordmn commented Sep 16, 2022

c5inco commented Sep 16, 2022 • edited Loading

jimgoog commented Sep 18, 2022

igordmn commented Sep 19, 2022 • edited Loading

c5inco commented Sep 27, 2022

igordmn commented Sep 28, 2022 • edited Loading

c5inco commented Sep 29, 2022

rock3r commented Sep 30, 2022

igordmn commented Sep 30, 2022

rock3r commented Sep 30, 2022

rock3r commented Sep 30, 2022

c5inco commented Oct 13, 2022

igordmn commented Oct 13, 2022 • edited Loading

rock3r commented Jun 19, 2023

c5inco commented May 20, 2022 •

edited

Loading

c5inco commented Jul 14, 2022 •

edited

Loading

rock3r commented Jul 14, 2022 •

edited

Loading

c5inco commented Sep 16, 2022 •

edited

Loading

igordmn commented Sep 19, 2022 •

edited

Loading

igordmn commented Sep 28, 2022 •

edited

Loading

igordmn commented Oct 13, 2022 •

edited

Loading