When programming on low-resolution screens,
I like to use 10pt Monaco with antialiasing turned off.
But when switching to my MacBook’s retina display,
I want antialiasing turned back on.
Until now, I would manually comment/uncomment some CSS
in Atom’s styles.less file to change this.
Turns out, you can define
CSS rules based on the current screen resolution.
By adding the following to styles.less,
Atom automatically switches the font and antialiasing settings
as soon as you move the window from one screen to the other:
atom-text-editor {
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 150dpi) {
.line {
-webkit-font-smoothing: none;
font-family: Monaco;
font-size: 10;
transform: translateX(1px);
font-style: normal !important;
* {
font-style: normal !important;
}
}
}
}
The transform line is there because
Atom will sometimes cut off the first column of pixels
when antialiasing is turned off.