mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

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

Co-Authored-By: Nils-Hero Lindemann <nilsherolindemann@gmail.com>

* Fix linting errors

Co-Authored-By: Nils-Hero Lindemann <nilsherolindemann@gmail.com>

* Fix image link

Co-Authored-By: Nils-Hero Lindemann <nilsherolindemann@gmail.com>
This commit is contained in:
John Kleinschmidt 2019-05-07 12:49:09 -07:00 committed by Shelley Vohr
parent 0ab3d7a0be
commit e63f527e76
1 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
docs/faq.md
View file

@ -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` `electron.app` can only be used in the main process, while `electron.webFrame`
is only available in renderer processes. 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 [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 [variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
[electron-module]: https://www.npmjs.com/package/electron [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 [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 [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 [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