Option to disable subpixel rendering on Windows instead of having to use CLI argument

[vaisest]

It seems that this app by default uses subpixel rendering on Windows when ClearType is enabled, but there is no option to disable it.

Chromium however supports this option with --disable-lcd-text, and this for example works:

PS C:\Users\User\Downloads> code --disable-lcd-text cli.js
Warning: 'disable-lcd-text' is not in the list of known options, but still passed to Electron/Chromium.

This improves text quality on non-RGB (primarily OLED) screens by reducing fringing and even on RGB screens some might prefer the less sharp version. Here's a relevant issue with more ClearType examples: microsoft/PowerToys#25595)

This should probably be a separate setting. I couldn't find a method to always use specific arguments when launching VSCode, which would mean I would have to replace all shortcuts and to always add the argument when using the command line.

Here's the difference with screenshots (open separately without zoom):

--disable-lcd-text	Default

[VSCodeTriageBot]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[VSCodeTriageBot]

🙂 This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[deepak1556]

This is a good candidate for runtime arguments argv.json

[johan-boule]

As far as Windows is concerned, the better solution would be for MS to redesign and document properly their display settings so that one can eventually make sense of it and choose grayscale.
The last thing users want is per-application settings.

[jerrygreen]

UPD. I misunderstood this repo as Electron repo, sorry, but everything of these are still relatable - more like for entire Electron, and for WebKit, rather than just for VSCode!

Let me introduce more details to this issue.

Disabling lcd-text-rendering is especially important for such apps, and games, that have “pixel-art” stylistics. Like Aseprite for example (among most popular ones). Such kind of apps don’t want to rely on those better-text-readability tricks. They want to render font as pure as possible: BOTH no glowing and no antialiasing.

But this doesn’t affect only this kind of apps. It also worsens UX for people using high resolution screens like 4K. If you know history why this effect comes in first place: to improve reading among pixels. The thing is, on high resolution you aren’t seeing pixels anymore, thus you don’t need those tricks – they only pollute the font. In fact, many people with high resolution screens prefer Firefox just for this reason: Firefox doesn’t pollute their fonts. Either blue-and-red glowing, or antialiasing text (the definition of lcd rendering), they both aren’t a problem of Firefox. Only a problem on Chromium-based apps (browser and electron) – where it’s impossible to disable font antialiasing on Windows.

Another way to solving this issue, for entire WebKit, not just Electron, – is to support font-smoothing property better:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

Note: WebKit implements a similar property, but with different values: -webkit-font-smoothing. It only works on macOS.

So it kinda works already, workaround is possible… But only on macOS.

Unfortunately it’s taking ages as since it’s still a problem for so many years to Chromium. I’d be so glad if font-smoothing property gets supported on Chromium. I’d be even more glad to having global property --disable-lcd-text.

[rzhao271]

Hi all, I've added a runtime argument disable-lcd-text, but I'm unable to tell the difference on my machine.
Could you confirm whether the fix works? I've created a custom Insiders build and would like some more verification before merging in PR #211716.

win32-x64: https://vscode.download.prss.microsoft.com/dbazure/download/insider/4f0f4946ef2a7202b353a0778a1e0aa0ce046d71/VSCodeSetup-x64-1.90.0-insider.exe
win32-x64-user: https://vscode.download.prss.microsoft.com/dbazure/download/insider/4f0f4946ef2a7202b353a0778a1e0aa0ce046d71/VSCodeUserSetup-x64-1.90.0-insider.exe

win32-arm64: https://vscode.download.prss.microsoft.com/dbazure/download/insider/4f0f4946ef2a7202b353a0778a1e0aa0ce046d71/VSCodeSetup-arm64-1.90.0-insider.exe
win32-arm64-user: https://vscode.download.prss.microsoft.com/dbazure/download/insider/4f0f4946ef2a7202b353a0778a1e0aa0ce046d71/VSCodeUserSetup-arm64-1.90.0-insider.exe

[vaisest]

Yup seems to work properly! It definitely works and seems to fix the UI glyphs and text as well:

Overall aliasing is better and there is less fringing so thank you for implementing this :)

[jerrygreen]

@rzhao271 here's my comparison of VSCode 1.88.0 and your Insiders version 1.90.0:

(click and zoom if needed)

So indeed, your changes do have effect.

Yet, you did just precisely what I described a message before yours. They're still blurry. You removed blue-red-yellow glowing, considering it «lcd-text» but in fact, lcd-text technique includes both:

1. Red-blue shift in color
2. Anti-aliasing

One may argue this makes fonts better, I argue it makes them look worse and even more blurry. To make best effect, fonts should be rendered as pure as possible, i.e. without both these lcd-features. On high-resolution device you just don't need that.

If you look closely yourself, see an example:

1. Pure font as it is
2. Antialiasing enabled
3. Both anti-aliasing and red-blue shift (lcd-text)

(again, you can zoom-in to see it yourself)

To me personally, the first option is obviously the best. With higher resolution and big enough font size, that is not absolute small like this one here, they look even better. But taking into consideration the potential opinions, it's probably best to make two separate flags. To support all three cases. For example, disable-antialiasing – that will use as pure font as it is, disabling both red-blue shift and anti-aliasing.

I might be wrong but to my understanding, though, that is not possible on Blink/Chromium, as it is only a feature of Gecko/Quantum (Firefox) and WebKit (Safari) but isn't an option on Chrome and Chromium-based applications (MS Edge, Electron, etc).

So, it's more like an issue of engine itself rather than VSCode. You probably done all you could on your side. Thanks for your work.

[vaisest]

One may argue this makes fonts better, I argue it makes them look worse and even more blurry.

In that case your issue is probably not the same as mine at all.

I have an LG OLED which uses an RWBG subpixel layout. Subpixel rendering actively makes the text worse as it assumes a completely different subpixel layout and one without a white subpixel. Because of that I was specifically referring to subpixel rendering, which Chrome calls lcd-text in the flag name.

If you want to completely disable anti-aliasing you could probably disable ClearType altogether in Windows.

[rzhao271]

\closedWith 8a3f7e9

[rzhao271]

Verification steps for next week's endgame:

1. Run code-insiders --disable-lcd-text in a terminal.
2. Confirm that no warning message about unrecognized flags is generated.
3. Run the "Configure Runtime Arguments" command.
4. Confirm that you can set the disable-lcd-text option in the argv.json file.