CodeMirror's default CSS should disable font ligatures

[mtaran-google]

In CodeMirror, if you use a font that has fancy ligature support (like Fira Mono from https://mozilla.github.io/Fira/), you get pretty strange behavior in the editor when moving the cursor, selecting, etc. It's also generally not something one would be likely to want in a code editor, so I'd recommend it being disabled in the default CSS, e.g. with font-variant-ligatures: none;.

[marijnh]

Good call. Done in attached patch.

[mihailik]

Is there a reproduction case?

I tend to respect typography done by professionals, so it'll be great to know what is the downside.

[marijnh]

Browsers won't create individual bounding boxes for characters when ligatures are used, which breaks CodeMirror's cursor placement (among other things)

[mihailik]

Tried to reproduce, don't see any issues whatsoever (IE11, Chrome, FF - Windows):

http://jsfiddle.net/5k94a6h2/1/

Is it platform-specific?

[marijnh]

I'm not (Chrome Linux) seeing any ligatures in that test case.

[marijnh]

I guess you mean the spacing between AV. That might be handled by the same CSS control, but doesn't cause the issue I was referring to -- that happens only when you actually get a different rendering for letter combinations.

[mihailik]

Got a reproduction case. Indeed, the cursor movement jumps over the ligature, inserting a zero-width space after:

http://jsfiddle.net/5k94a6h2/4/

Given that CodeMirror is used for much more than just editing code, would you consider a PR for a fix?

Ideally the width of the ligature should be distributed among the individual characters proportionally to the widths of the characters measured standalone. Detection can be triggered by zero-width characters.

Proper zero-width characters unrelated to ligatures should remain zero-width (based on the fact they have zero width when standalone).

Alternatively 'standalone' may be replaced with 'surrounded by spaces from both ends' to avoid being tripped by crazy Unicode.

[mihailik]

Note Visual Studio supports ligatures in code editor no issue:

Here first two fs are joined by a ligature, but there is no fff ligature so you can see a tiny space. However the cursor moves properly between all three of them.

[marijnh]

This is somewhat related to #2115 and definitely not easy to fix (especially in a performant way), because ligatures are complex and unpredictable, and querying the browser for the information you need is hard.

[geordieF]

Ligatures seem to work fine now, so maybe enabling again would be good

[marijnh]

What do you mean that they seem to work fine now?