Skip to content

Instantly share code, notes, and snippets.

@larsenwork
Last active July 15, 2021 14:47
Show Gist options
  • Select an option

  • Save larsenwork/255432b5101093fb07bc to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

Where should this snippet be placed to be effective?

@garrmark

Copy link
Copy Markdown

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

@pikinkz

pikinkz commented Jul 27, 2015

Copy link
Copy Markdown

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

@Valve

Valve commented Jul 28, 2015

Copy link
Copy Markdown

On OSX+Retina adding this makes fonts look thinner.

@hostmaster

Copy link
Copy Markdown

@mrmurphy

Copy link
Copy Markdown

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

@mrmurphy

Copy link
Copy Markdown

@larsenwork, very cool. Thanks!

@wereHamster

Copy link
Copy Markdown

@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
Copy Markdown

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

csholmq commented Sep 25, 2015

Copy link
Copy Markdown

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
Copy Markdown

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

ghost commented Oct 30, 2015

Copy link
Copy Markdown

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
Copy Markdown

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
Copy Markdown
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