Browse Source

docs: add FAQ entry about subpixel anti-aliased text (#18101)

* docs: add FAQ entry about subpixel anti-aliased text

Co-Authored-By: Nils-Hero Lindemann <[email protected]>

* Fix linting errors

Co-Authored-By: Nils-Hero Lindemann <[email protected]>

* Fix image link

Co-Authored-By: Nils-Hero Lindemann <[email protected]>
John Kleinschmidt 6 years ago
parent
commit
e63f527e76
1 changed files with 23 additions and 0 deletions
  1. 23 0
      docs/faq.md

+ 23 - 0
docs/faq.md

@@ -168,6 +168,27 @@ is very likely you are using the module in the wrong process. For example
 `electron.app` can only be used in the main process, while `electron.webFrame`
 is only available in renderer processes.
 
+## The font looks blurry, what is this and what can i do?
+
+If [sub-pixel anti-aliasing](http://alienryderflex.com/sub_pixel/) is deactivated, then fonts on LCD screens can look blurry. Example:
+
+![subpixel rendering example]
+
+Sub-pixel anti-aliasing needs a non-transparent background of the layer containing the font glyphs. (See [this issue](https://github.com/electron/electron/issues/6344#issuecomment-420371918) for more info).
+
+To achieve this goal, set the background in the constructor for [BrowserWindow][browser-window]:
+
+```javascript
+const { BrowserWindow } = require('electron')
+let win = new BrowserWindow({
+  backgroundColor: '#fff'
+})
+```
+
+The effect is visible only on (some?) LCD screens. Even if you dont see a difference, some of your users may. It is best to always set the background this way, unless you have reasons not to do so.
+
+Notice that just setting the background in the CSS does not have the desired effect.
+
 [memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
 [variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
 [electron-module]: https://www.npmjs.com/package/electron
@@ -175,3 +196,5 @@ is only available in renderer processes.
 [local-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
 [session-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
 [indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
+[browser-window]: api/browser-window.md
+[subpixel rendering example]: images/code_coverage_infra_diagram.png