Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

codepope commented Jul 27, 2015

Where should this snippet be placed to be effective?

@garrmark

This comment has been minimized.

Copy link

garrmark commented Jul 27, 2015

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

@pikinkz

This comment has been minimized.

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

This comment has been minimized.

Copy link

Valve commented Jul 28, 2015

On OSX+Retina adding this makes fonts look thinner.

@hostmaster

This comment has been minimized.

@mrmurphy

This comment has been minimized.

Copy link

mrmurphy commented Jul 30, 2015

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

@mrmurphy

This comment has been minimized.

Copy link

mrmurphy commented Jul 30, 2015

@larsenwork, very cool. Thanks!

@wereHamster

This comment has been minimized.

Copy link

wereHamster commented Jul 30, 2015

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

@mikebronner

This comment has been minimized.

Copy link

mikebronner commented Jul 31, 2015

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

smlombardi commented Oct 7, 2015

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

@ghost

This comment has been minimized.

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

This comment has been minimized.

Copy link

alflanagan commented Jan 9, 2017

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

This comment has been minimized.

Copy link
Owner Author

larsenwork commented Feb 18, 2017

@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
You can’t perform that action at this time.