Skip to content

Instantly share code, notes, and snippets.

@larsenwork
Last active July 15, 2021 14:47
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save larsenwork/255432b5101093fb07bc to your computer and use it in GitHub Desktop.
Save larsenwork/255432b5101093fb07bc to your computer and use it in GitHub Desktop.
The code below enables contextual alternates and ligatures but disables them on your `cursor-line` so you don't sacrifice "editability".
* {
-webkit-font-smoothing: antialiased;
-webkit-font-feature-settings: "liga" on, "calt" on;
}
atom-text-editor .cursor-line {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
@codepope
Copy link

Where should this snippet be placed to be effective?

@garrmark
Copy link

I believe styles.less is the place for this. "Open Your Stylesheet" will pull that up for you.

@pikinkz
Copy link

pikinkz commented Jul 27, 2015

Should that just be added at the bottom or should it replace some of the previous text in styles.less?

@Valve
Copy link

Valve commented Jul 28, 2015

On OSX+Retina adding this makes fonts look thinner.

@hostmaster
Copy link

@mrmurphy
Copy link

@hostmaster, try adjusting your font size, I think 15px is the size this font was designed for.

@mrmurphy
Copy link

@larsenwork, very cool. Thanks!

@wereHamster
Copy link

@hostmaster, I had the same problem with font size set to 11, I changed it to 12 and now the font looks good.

@mikebronner
Copy link

There also seems to be an issue with the closing quotes overlapping previous text, as well as extra spacing when using Monoisome:

screen shot 2015-07-31 at 12 49 10 pm

@csholmq
Copy link

csholmq commented Sep 25, 2015

I modified mine to avoid ligatures in the Find and replace box. Perhaps it can be better refactored.

* {
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" on, "calt" on;
}

atom-text-editor::shadow .cursor-line {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

div.find-and-replace atom-text-editor::shadow .line {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

@smlombardi
Copy link

FWIW, I find the "antialiased" too thin so I commented that out. This lets it revert to subpixel-antialiased.

Copy link

ghost commented Oct 30, 2015

Now that Atom 1.1 is out which officially supports fonts with ligatures, which they recommend enabling as seen below, do we still need to add the CSS seen above?

atom-text-editor {
text-rendering: optimizeLegibility;
}

It appears to still be necessary, but I'm wondering what the difference is, whether there are conflicts, etc.

@alflanagan
Copy link

For versions of atom >= 1.13, the "shadow DOM" is no longer used, so to turn off features for the current line you have to use

atom-text-editor .cursor-line {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

@larsenwork
Copy link
Author

@alflanagan cheers, I've updated the gist

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment