Brackets 1.9 and earlier: If you have multiple stylesheets in Quick Edit panel the code is rendered with Grayscale antialiasing (a bit blurry text) instead of ClearType

[r4p7or]

Windows 7 64bit Brackets Release 1.9 build 1.9.0-17305 (font rendering on my system is enhanced with MacType (for sharper text than default Win7 ClearType) - but this should be irrelevant)

Hi, I've noticed that Brackets in some cases uses inferior Grayscale antialiasing (a bit blurry text not comfortable for the eyes) instead of sharper ClearType. The most serious case is that Quick Edit switches to Grayscale antialiasing if you have more than one stylesheet in the QE panel (when a list with multiple stylesheets is displayed on the right):

One interesting observation - if you fold all the stylesheets in the stylesheet list, font rendering inside the Quick Edit panel switches back to ClearType. I have made an animated GIF illustrating this strange behavior:

This bug also manifests itself in the right click menu:

Another examples of a text with Grayscale (blurry) antialiasing in the Brackets application:

[Blackweda]

This looks like something I'll look at.

After 45 minutes of perusing through the code I think this is a good start:

https://github.com/adobe/brackets/blob/master/src/styles/brackets.less

&.platform-mac { // Use gray scale antialiasing for UI. Code view editor-holder // overrides this to use subpixel antialiasing on Mac, which then // can be overridden by setting "fontSmoothing" preference to // "antialiased". Gray scale AA is used for UI parts which use // SourceSansPro font, which does't look good with subpixel AA, // especially on low resolution monitors. -webkit-font-smoothing: antialiased;

So my question is, "Is this something I should try to fix.. or its not considered a real 'problem' for brackets right now?"

[r4p7or]

Hi, thank you for trying to fix this issue.

So my question is, "Is this something I should try to fix.. or its not considered a real 'problem' for brackets right now?"

I think the blurry text in the Quick Edit panel is very real problem and it would be great if it was fixed ASAP.

As for the other cases of Grayscale AA inside the application - it's not exactly a show stopper for me right now but one day it would be great if developers finally solved all the font rendering issues once and for all (Brackets has always had various issues of font rendering from the start).

&.platform-mac {

I am not a programmer and don't know how Brackets is built so maybe I am missing something but I am facing these issues on Windows (7). I'm not saying that Brackets doesn't have font rendering issues on Mac, but I cannot check these since I don't have a Mac.

[Blackweda]

I'll work on it this weekend.

[Blackweda]

Hey guys, I am working on this issue, and in my research through the code, you guys seemed to be part of coding the stuff that relates to this issue. I had a few questions:

1. When you click Quick Edits, what kind of element is that? (like I'm not sure if its some sort of Widget like ModalBar / popUp / dropDown, etc...) Or even when you right click the screen for the (Save, Save As...) stuff, what are those things?

2. It appears to me that the anti-aliasing probably happens when the focus changes to something else. In the code, there are .css rules for when the focus is on something. How do I know what the rules are for when the focus comes off? I am thinking to disable the anti-aliasing altogether when the focus drops or completely comment out anything related to anti-aliasing.

3. Do you guys think that trying to fix this issue is WORTH it, or there is an important reason for having it set up that way? And if you guys are open to changing it, do you have any suggestions where I can just shut it down from one place in the code?

By the way, I have already reproduced this on my Windows laptop, so it definitely is happening.

Here are some of the commits you guys made:

@nethip // I think you did the anti aliasing part https://github.com/adobe/brackets/commit/5efe7a82a8565c8798d960fb26ef3965f6bd2d47 https://github.com/adobe/brackets/commit/0582f1cc2bd7712bf25f0cd66f88f0b47da5a826 https://github.com/adobe/brackets/commit/7e769b494b0a19b0e69274b36a237451c12ef0de

@JeffryBooher // I think you control the focusing of the panes (are they related to this? Like the refocus part?) https://github.com/adobe/brackets/commit/16587883c81a99134072bd64dec694127e551a09

@larz0
https://github.com/adobe/brackets/commit/0f0d60e2b19698c8b79bd9f45007ee6debc57c61 https://github.com/adobe/brackets/commit/9e04009970b49c6fa7cff5a8b65d230b4da0f444

@peterflynn https://github.com/adobe/brackets/commit/4d2f59bac2af79759b71ef9cc3718fd78686476b

Any suggestions would be much helpful!! :D

[nethip]

@Blackweda Apologies for the late reply. And thanks for investigating this issue.

AFAIK The change I had done was for MAC only. Commits made by @larz0 @peterflynn should be a good starting point to fix this issue. You could remove the gray scale antialiasing in 0f0d60e 9e04009 , to see if the issue goes away. Historically, if I recall correctly, we switched to using gray scale anti-aliasing for performance reasons. But with later versions of CEF integrated in Brackets, we should not be seeing this issue. Once done trying, please update us with your results.

[Blackweda]

I think I made the necessary changes, I just need to test it out. Will make a PR tonight so we can hopefully close this issue :)