diff --git a/src/brackets.js b/src/brackets.js index e987eb11c2b..9da34f818ef 100644 --- a/src/brackets.js +++ b/src/brackets.js @@ -359,8 +359,8 @@ define(function (require, exports, module) { } // Localize MainViewHTML and inject into tag - $("body").html(Mustache.render(MainViewHTML, Strings)); - + $("body").html(Mustache.render(MainViewHTML, { shouldAddAA: (brackets.platform === "mac"), Strings: Strings })); + // Update title $("title").text(brackets.config.app_title); diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html index d3f85e2b1a1..f8260bdd070 100644 --- a/src/htmlContent/main-view.html +++ b/src/htmlContent/main-view.html @@ -76,7 +76,7 @@ -
+
@@ -89,8 +89,8 @@
- - + +
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 9df623e1f7a..9da6657c3f7 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -754,6 +754,7 @@ define({ "DESCRIPTION_LINTING_COLLAPSED" : "True to collapse linting panel", "DESCRIPTION_FONT_FAMILY" : "Change font family", "DESCRIPTION_FONT_SIZE" : "Change font size; e.g, 13px", + "DESCRIPTION_FONT_SMOOTHING" : "Mac-only: \"subpixel-antialiased\" to enable sub-pixel antialiasing or \"antialiased\" for gray scale antialiasing", "DESCRIPTION_OPEN_PREFS_IN_SPLIT_VIEW" : "False to disable opening preferences file in split view", "DESCRIPTION_OPEN_USER_PREFS_IN_SECOND_PANE" : "False to open user preferences file in left/top pane", "DEFAULT_PREFERENCES_JSON_HEADER_COMMENT" : "/*\n * This is a read-only file with the preferences supported \n * by Brackets. \n * Use this file as a reference to modify your preferences \n * file \"brackets.json\" opened in the other pane. \n * For more information on how to use preferences inside \n * Brackets, refer to the web page at https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences\n */", diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 33e59d55dd0..75494fc2683 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -53,18 +53,15 @@ html, body { /* And make sure we get a pointer cursor even over text */ cursor: default; - - /* Turn off subpixel antialiasing on Mac since it flickers during animations. */ - -webkit-font-smoothing: antialiased; - - // This is a hack to avoid flicker when animations (like inline editors) that use the GPU complete. - // It seems that we have to put it here rather than on the animated element in order to prevent the - // entire window from flashing. - // See: http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform - // Mac-only though, since this would turn off subpixel antialiasing (ClearType) on Windows + &.platform-mac { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; + // 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; } .dark, @@ -73,7 +70,9 @@ html, body { } } - +.subpixel-aa{ + -webkit-font-smoothing: subpixel-antialiased; +} .resizing-container { position: absolute; diff --git a/src/view/ViewCommandHandlers.js b/src/view/ViewCommandHandlers.js index c4fb92ee54d..0c40edb7b6b 100644 --- a/src/view/ViewCommandHandlers.js +++ b/src/view/ViewCommandHandlers.js @@ -22,7 +22,7 @@ */ /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ -/*global define, $ */ +/*global define, brackets: false, $ */ /** * The ViewCommandHandlers object dispatches the following event(s): @@ -266,6 +266,23 @@ define(function (require, exports, module) { } } + + /** + * Font smoothing setter to set the anti-aliasing type for the code area on Mac. + * @param {string} aaType The antialiasing type to be set. It can take either "subpixel-antialiased" or "antialiased" + */ + function setMacFontSmoothingType(aaType) { + var $editor_holder = $("#editor-holder"); + + // Add/Remove the class based on the preference. Also + // default to subpixel AA in case of invalid entries. + if (aaType === "antialiased") { + $editor_holder.removeClass("subpixel-aa"); + } else { + $editor_holder.addClass("subpixel-aa"); + } + } + /** * Font family getter to get the currently configured font family for the document editor * @return {string} The font family for the document editor @@ -515,6 +532,20 @@ define(function (require, exports, module) { setFontFamily(prefs.get("fontFamily")); }); + // Define a preference for font smoothing mode on Mac. + // By default fontSmoothing is set to "subpixel-antialiased" + // for the text inside code editor. It can be overridden + // to "antialiased", that would set text rendering AA to use + // gray scale antialiasing. + if (brackets.platform === "mac") { + prefs.definePreference("fontSmoothing", "string", "subpixel-antialiased", { + description: Strings.DESCRIPTION_FONT_SMOOTHING, + values: ["subpixel-antialiased", "antialiased"] + }).on("change", function () { + setMacFontSmoothingType(prefs.get("fontSmoothing")); + }); + } + // Update UI when opening or closing a document MainViewManager.on("currentFileChange", _updateUI);