Why is the text display inferior to Sublime 3?


#1

One thing preventing me from using Atom as much as I’d like to is the display of text.

Attached is the same file, using the same theme (Twilight) on Sublime Text 3 (left) and Atom 0.119.0 (right). This screenshot is taken on a 15" Retina MBP connected to a Thunderbolt display, 10.9.4. The font in both is Inconsolata-G.

While it may be hard to see in screen shots, the Sublime text is a bit heavier and smoother, with better anti-aliasing than the Atom text.

Is there any way to improve this on my end? An Atom setting, or a preferred font or color scheme?


Very flat curly braces on Ubuntu
#2

Assuming that it is SublimeText on the left you may want to add this to your stylesheet:

html {
  -webkit-font-smoothing: subpixel-antialiased;
}

It really is personal preference whether you like the bolder-looking more anti-aliased text or the sharper- and thinner-looking but slightly more jaggy text.

For a basic explanation of the differences, see here:

http://maxvoltar.com/archive/-webkit-font-smoothing


#3

I have just tried -webkit-font-smoothing, but it did not make any difference for me.

You could also give this a try:

.editor {
    font-weight: bold;
}

#4

On my machine, I have the above suggested style in my stylesheet and other than the fact that I’m using Source Code Pro, it looks almost identical to your Sublime Text screenshot.


#5

That does help, thanks.


#6

Should be related to how Chromium handles DirectWrite on Windows. Right?


#7

That looks promising.
There are some issues open asking for high DPI support and they’re basically just waiting for Chromium to get around to it.


#8

Is that selector meant to be a class (.html) or an element (html)? Just curious.


#9

It is supposed to be an element. Transcription error, sorry :blush:


#10

No problem. Wanted to clarify in case anyone else was confused. :slight_smile:


#11

This made me much happier in Linux:

.editor {
  font-size: 12.5px;
  font-family: DejaVu Sans Mono;
}

DejaVu is free at http://dejavu-fonts.org/ and is pre-installed in many Linux distros. This had me looking almost identical to Sublime 3 (with the Monokai theme installed of course)… the line space was a tiny, tiny bit larger but I actually preferred it that way so left it untouched.


#12

P.S. In some fonts (but not DejaVu Mono) you can change { font-weight: 400 }; 400 is normal, 700 is bold, in 100 unit increments - https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight


#13

I tried bold and -webkit-font-smoothing: subpixel-antialiased; but nothing worked for me, maybe it’s the font rendering bug in Chrome?


#14

This is an old thread, but it seems people keep finding it and posting to it.

FWIW, with recent versions of Atom (.153 as of this writing) I have no issues with fonts on the Mac OS. I have used several different fonts, currently I am using Liberation Mono. Looks as good as Sublime 3 and Brackets. Textmate 2 looks better than them all, especially on retina display.

FWIW, this is what I have in my LESS:

 html {
   -webkit-font-smoothing: auto;
}

.tree-view {
  -webkit-font-smoothing: auto;
}

.editor {
  -webkit-font-smoothing: auto;
  @media (-webkit-min-device-pixel-ratio: 2) {
    font-size: 12px;
  }
}

The last bit is so I can set the settings page to 13px for my Thunderbolt display, but have it switch to 12px when just using the Retina MBP on its own.


#15

First, I wanted to point out that this is just about the greatest idea ever. Thanks for sharing it.

Second, to allow code like this to function under the new Shadow DOM stuff, you can alias .editor with atom-text-editor::shadow like so:

.editor, atom-text-editor::shadow { /* fancy font sizes */ }

#16

You should put another selector after the ::shadow. Now you’re trying to style the ::shadow pseudo-element, which isn’t stylable. Like this:

.editor, atom-text-editor::shadow * { /* fancy font rules here */ }

(note that this is just an example, you should replace the * with something else)

But… You can also apply styles to the atom-text-editor and it will also work. Like this

atom-text-editor { /* fancy font rules here */ }

Just make sure to not style both, or Weird Things will happen. Take a look at this:

The text gets rendered at 16px, but the cursor size and position are calculated by the 20px from the atom-text-editor rule…


#17

In the meantime, is there any way to just enable DirectWrite at our own risk?


#18

I was able to get really close with the following

mac osx:

html {
  -webkit-font-smoothing: subpixel-antialiased;
}
.editor {
  font-family: Menlo;
  font-size: 12px;
}

linux:

html {
  -webkit-font-smoothing: subpixel-antialiased;
}
.editor {
  font-family: Monospace;
  font-size: 10px;
}

windows:

html {
  -webkit-font-smoothing: subpixel-antialiased;
}
.editor {
  font-family: Consolas;
  font-size: 10px;
}

#19

For making the tabs less blurry on all platforms I used:

.tab-bar .tab .title {
  -webkit-font-smoothing: auto;
}

.tab-bar .tab.active .title {
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
}

#20

I am with linux and

* {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: subpixel-antialias ;

}

didn’t work

also tried:

-webkit-font-smoothing: none/auto/subpixel-antialias/antialias ;
no difference at all.

Compared vs sublime/kate , they all render better. including chrome.