Provide an option to enable DirectWrite

[luca-moser]

I am using VS Code on a 4k monitor (ASUS PB287Q 4K) and have set Windows 10's scaling on that monitor to 150%. VSCode fonts inside the editor are extremely blurry.

Look at this example (scaling in Windows 10: 150%, editor.fontSize:: 13, window.zoomLevel: 0):

The code in the background is very blurry (please open the image in a new tab to really see it), while the dialog in the foreground is not (just for comparison).

I tried to play around with the edtior.fontSize/window.zoomLevel options, but there isn't any way to get the font crisp. Using --disable-direct-write and --force-device-scale-factor=1.0 to start VS Code also doesn't fix the issue.

[rickmed]

+1

[alexdima]

cc @egamma

@bpasero Looking at electron/electron#3349 looks like we still have a blurry font issue on windows until we adopt an Electron version with Chrome 47 -- the patch of Electron v0.34.4 only covers Linux.

[bpasero]

@alexandrudima yup

[kanreisa]

👍

[SeriousM]

Any updates on that?
The blurriness is really annoying!

(notice the blur-effect on two different documents)

[bpasero]

We can only solve this by updating Electron to a newer version but currently are blocked because of a native node crash.

[luca-moser]

For reference, he is talking about electron/electron#4299

[pprice]

FWIW, this is also true on OSX (10.11.3) with 96 DPI monitors, but setting the zoom level to vscode to anything other than default (e.g. I have "window.zoomLevel": 1).

It appears to be related to 'subpixel' scrolling of the editor text area. Might be different issue, however.

[iHuahua]

i think the issue should be fixed by electron, Chrome has no problem.
so, u can set the monitor's scaling to 100%, and font size 20+, it‘s very clear, just look like MAC retina.

[luca-moser]

@iHuahua that is definitely not a workaround. Having a Windows 10 installation on a 4k monitor without scaling is absolutely tedious to say the least (I'd like to preserve my eyesight for the next years...).

[daniel-dia]

I just found the problem found a "translate3d" CSS transform that makes it blurry.
I disabled the CSS and it becomes SHARP!!! take a look

Left side is folder tree, and right side is code panel.

[bpasero]

Interesting, so you say the explorer is always sharp but the editor is not for you?

[daniel-dia]

exactaly. and It realy seems to be a GPU rendering issue.
Removing the"translate3d" CSS transform (GPU Process) it becomes sharp.
Starting code with "--disable-gpu" too.

[alexdima]

@artsjedi What settings are you using and what theme is that?

[daniel-dia]

@alexandrudima default dark theme. using windows 10, febury updated, on surface pro 3. 2016-02 build.

[bpasero]

We pushed a major update to the UI framework to our insiders release and would appreciate feedback if this issue got resolved. You can give it a try from our insiders release today: http://code.visualstudio.com/Download#insiders

Happy for feedback!

[phraemer]

Unfortunately not on Windows 10
150% text size on a 3840x2160 monitor.

Beware how you view the image below. Your browser might rescale it.

[lediur]

On a Surface Pro (150% scaling) attached to an external monitor (100% scaling), 1.0.1-insider still has blurry UI elements. All the screenshots below are scaled so the 100% versions are shown at actual size.

I think it's definitely getting better though.

External monitor (100%)

Surface Pro screen (150%)

For comparison, on 1.0.0:
External monitor (100%)

Surface Pro screen (150%)

[DanTup]

I'm not sure this is specific to Windows; here's screenshots of VS Code (1.20.0) from my MacBook (Mac OS High Sierra) connected to a monitor. Left is the MacBook (2017 12" MacBook) screen and right is the external screen (an LG 29" 1080p Ultrawide).

As mentioned above; it's not just the editor, all of the text including tabs and explorer are blurry on the external screen. Happens even if I launch Code on the second display, so I don't think it's related to dragged the window from one to the other.

[seppemarotta]

I fixed my resolution by enabling "Disable display scaling on high DPI settings" under the preference tab of Visual Studio Code Properties.

[alien2003]

The same thing on Manjaro

[anacondaq]

This is the very strange thing, that people trying different solutions related to GPU, and did not realize that the issues in some cases (I can confirm that) with Nvidia control panel and FXAA (and option below)

Try to play with Antialiasing FXAA option if you have Nvidia graphics card, and the issue will be solved.
What about internal graphics cards on resolutions nonstandart and not native (not 1080p with any scaling) thanks to direct-write bugs you will have blurry text. I don't know if someone will be able to fix this blurry text in direct-write, and will be greatly grateful if someone shares it to me because it fills fix tons of issues with other apps based on the electron.

[alien2003]

@Anacondaqq where is Aliasing FXAA option on Manjaro Gnome?

[anacondaq]

@alien2003 Sorry, I do not know. But my comment is correct, and I can, again and again, confirm that.
On Windows 1804 the situation MUCH MUCH better with font rendering.

[jacob-arlington]

I solved this with update my driver and set

conservative morphological anti-aliasing to off

https://goo.gl/TtNi7K

[alien2003]

@jacob-arlington how to do it on Manjaro Gnome?

[jacob-arlington]

@alien2003 what is your graphic card?

[alien2003]

@jacob-arlington Intel® HD Graphics 620 (Kaby Lake GT2)

[jacob-arlington]

@alien2003 try driver here
https://01.org/linuxgraphics/downloads/2018q1-intel-graphics-stack-recipe

[hectorfarahani]

My issue on second monitor fixed by changing DPI setting to 100%.

[bpasero]

We are building exploration builds that use a much newer version of Electron (our UI framework). I wonder if this issue reproduces with one of these builds, could you try? Download:

• Windows: Download
• macOS: Download
• Linux: Download

[anacondaq]

@bpasero the problem with DirectWrite on windows. If you have a way to return back DirectWrite flag (chrome://flags) like on CentBrowser to turn off DirectWrite and render all text via GDI+ the solution will solve the issue.

Btw, these 1.28 builds run SO smoothly and fast. Noticeable differences. Good work.

[merill]

@bpasero This exploration build fixed the blurriness on my 43' 4K monitor scaled to 125% on 3840 x 2160. Thanks!!

[unode]

I'm experiencing a similar issue in Linux although in this case it seems to be due to a non-uniform aliasing effect across the screen.

The following are 2 screenshots taken on:

The font used is Envy Code R at 2 different sizes:

Size 13:

Here you can see a rainbow-like effect across the screen. The pattern changes every 14 characters cycling 4 different color patterns. green, orange, violet, blue, green, ...
m was used as it makes the aliasing effect more noticeable.

Size 14:

Similar situation but here the rendering cycles every character and contrary to the previous it alternates between 2 patterns only.

Using --disable-gpu has no effect.

In contrast the same font and size on rxvt-unicode displays no such artifacts:

What is even more disturbing is that the font renders perfectly in the embedded terminal:

Even better than in rxvt-unicode (IMO).

[bpasero]

Given #15211 (comment) there will be a way to configure Chrome command line switches to be used on each startup. If there is a specific flag that makes the situation better for users, please let me know and we can think about supporting it there.

Otherwise I would like to close this issue as it seems not actionable from the VSCode side of things.

[jeanabraham]

I'm not sure this is specific to Windows; here's screenshots of VS Code (1.20.0) from my MacBook (Mac OS High Sierra) connected to a monitor. Left is the MacBook (2017 12" MacBook) screen and right is the external screen (an LG 29" 1080p Ultrawide).

As mentioned above; it's not just the editor, all of the text including tabs and explorer are blurry on the external screen. Happens even if I launch Code on the second display, so I don't think it's related to dragged the window from one to the other.

@DanTup I'm noticing the same with my macbook vs ultrawide monitor. However, I find that the fonts of my Terminal window are extremely clear even on the ultrawide. Were you able to figure out how to make the text sharp on VScode by any chance? Thanks!

[DanTup]

@jeanabraham I didn't figure it out - I tend to always use VS Code directly on the MacBook screen instead. My terminal is also fuzzy on the external screen - though I remember seeing some popup about terminal performance once offering to change renderer - I don't remember if I agreed or not, but maybe that's a reason for a difference.

[jeanabraham]

@DanTup thanks! Ok. I decided I'll just trade in my ultrawide for 4k instead!

[DanTup]

It's kinda funny that that might be the easiest fix 😄