Text Rendering on macOS changed with Electron 3.0

[as-cii]

As reported in #18916 (comment), we observed a significant change in how text is rendered on a High-DPI display on macOS after upgrading Atom to use Electron >= 3.0.

Below you can find a zoomed-in screenshot of rendering the word Lorem in a variety of environments. Please, click on all of the images and quickly browse through the tabs to appreciate how stark the difference is for this pull request.

Atom on Electron 3

VS Code on Electron 3 (latest published version)

Atom on Electron 2 (Atom 1.38.0-beta0)

Lorem on TextEdit

You can reproduce the above tests by using Fira Code Retina, 15px.

Causes of the change

We believe the change was caused by upgrading to a newer Chromium version, but it is unclear whether the new rendering is wrong or not. Specifically, this seems to be related to the global "Use font smoothing when available" setting on macOS, and Atom is now just honoring that configuration. Indeed, when rendering the word Lorem in TextEdit (a native macOS application), we observe the same rendering as in Atom on Electron 3.

Next steps

@rafeca and I discussed what to do about this, and it seems okay to proceed with allowing this new rendering behavior. Users can go back to the previous behavior by adding the following CSS to their personal style sheet:

/* This will change how font-smoothing is applied to the entire Atom application */
atom-workspace {
  -webkit-font-smoothing: antialiased;
}

/* If you just want to change how text is rendered within the editor, use this instead: */
atom-text-editor {
  -webkit-font-smoothing: antialiased;
}

If needed, in the future we could provide a configuration parameter to change the aliasing behavior without needing to write any CSS.

[jasonrudolph]

@rafeca and I discussed what to do about this, and it seems okay to proceed with allowing this new rendering behavior.

I agree. 🚀

[nathansobo]

Agreed. Amazing attention to detail catching this, however. Glad we could make this decision explicitly rather than accidentally.

[net]

I greatly prefer the new rendering. 🎉

[as-cii]

Given our agreement on accepting Electron's new text rendering system on macOS, I will go ahead and close this.

[vertic4l]

Couldn't find the option for "Use font smoothing when available" but adding the css from @as-cii helped to get the much nicer looking font rendering back.

Although -webkit-font-smoothing: antialiased; should be default...

Who wants an ugly rendered font for real?

(Atom Beta 1.39)

[Aerijo]

Couldn't find the option for "Use font smoothing when available"

That's an OS setting, not an Atom setting.

Who wants an ugly rendered font for real?

It's beauty is subjective. But it matches TextEdit, the text editor provided by Apple. So there is precedence.

I do think a setting in Atom would help people with discovering there is a choice though.

[vinkla]

Toggling Use font smoothing when available in System Preferences seems to work in TextEdit but not in Atom Nightly:

Atom: 1.40.0-nightly19
macOS: 10.14.5

[as-cii]

@vinkla thank you for the feedback. Does the setting take effect if you restart Atom? If not, did you try adding that CSS snippet to your personal style sheet?

[vinkla]

Does the setting take effect if you restart Atom?

No.

If not, did you try adding that CSS snippet to your personal style sheet?

Yes, this works.

---

Maybe we should remove or alter the line below in #19356 (comment)?

Users can go back to the previous behavior by disabling "Use font smoothing when available"

[as-cii]

Maybe we should remove or alter the line below in #19356 (comment)?

@vinkla: Sounds good, I just modified it to not mention the "Use font smoothing when available" option. It's strange because I remember toggling that option worked, but maybe something has changed since then.

[vinkla]

The rendering seems to have returned to the previous behaviour (antialiased) with the merge of #19373. This can be tested in the latest nightly build: v1.41.0-nightly1.

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you can still reproduce this issue in Safe Mode then please open a new issue and fill out the entire issue template to ensure that we have enough information to address your issue. Thanks!