Italic ligatures not working as expected

[mskelton]

Maybe I just did something wrong, but the italic ligatures aren't showing up for me in VS Code or IntelliJ. Below is a screenshot showing what I'm seeing.

Without the comments, they show just fine.

This is the case for all weights.

[mskelton]

If I remove the letters in the comments, then they start to work. 🤷‍♂

[Kryptonov]

Seeing the same here in VIM. Regular ligatures are fine, Italics seem "borky", sometimes they behave irratic, sometimes they don't show up at all. Thanks for your work, btw, and of course to Kiliman.

Using: VIM - Vi IMproved 8.1 (2018 May 18, compiled Aug 3 2019 18:05:22) macOS version (10.14.6 (18G87)) Including 'patches': 1-1800

Of course ping me if I can help.

[kiliman]

Yeah, I've noticed it too. The odd thing is that the ligatures work, but it depends on the context.

For example, here's VS Code. Notice in the editor, the ligatures break when mixed with letters. But in Polacode (literally side-by-side) the ligatures show up. I believe it's because Polacode uses a web view to render.

Here's the sample.js file viewed on GitHub using Chrome. Notice how the italic ligatures work there as well. Don't mind the regular ligatures. That's just GitHub not tokenizing correctly since some of those are not valid Javascript.

And finally, I went and changed the font to always be Italic and this is what it looks like in Code. Notice how the non-commented text is displaying the italic ligatures just fine. But it's still broken inside the comments.

Anyway, I'm not saying there is NO issue with the font/ligatures. It's hard to say what is causing it.

Fira Code displays the "italics" just fine, because it doesn't have true italics, so the OS is giving VS Code a synthetic italic.

I've also tried Victor Mono (includes ligatures and true italics), and it works fine, however, they are using double and triple width ligatures like my v1.0 font, so VS Code only sees one glyph, not the 2-3 glyphs I use. So it's not really comparing apples to apples.

I haven't tried Dank Mono (also has ligatures and true italics). I don't know if they use the "liga" method (v1) or "calt" method (v2).

This has been a low priority because I rarely comment out big blocks of code, so italic ligatures aren't that important to me. If anyone is willing to do the research, I'll be willing to try and fix it.

[kiliman]

There is a workaround to get italic ligatures to show up properly.

Add the following setting: "editor.renderWhitespace": "all",

The drawback is that you now have all those "whitespace" dots. I'm not sure why VS Code renders text differently here.

I wonder if there's a setting to specify which glyph to use for the whitespace dot. If so, we can just replace it with a space!

[kiliman]

Figured out a work around.

As I stated above, the italic ligatures display properly if you set "editor.renderWhiteSpace": "all"

However, that results in lots of dots being displayed on the screen.

It turns out you can set the color of the "whitespace" dots.

Add this setting:

  "editor.renderWhitespace": "all",
  "workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#FFFFFF00"
  },

The color is RGBA. By setting the alpha to 0, we make the dots invisible. Voila! It works.

There's still some quirks as you can see in the screenshot below. Not sure why that line is rendered in red, but unfortunately the whitespace dots still show up there.

Anyway, unless anyone else figures out why this isn't working properly, I'm going to consider this issue "closed". I'll leave it open a while longer.

[kiliman]

I figured out why the comment is in red above. I have the Better Comments[1] extension and one of the features is that if you start your comment with a ! it will highlight the comment in red.

The first ligature in the line above is the != ligature. That is why it's highlighted in red. Still doesn't explain why whitespace rendering is busted (but that's probably due to the extension doing its own rendering).

Anyway, mystery solved!

[1] https://github.com/aaron-bond/better-comments

[kufii]

unfortunately this workaround doesn't really work for me because I like to set render whitespace to selection (and it's actually a feature I use very frequently)

[Kryptonov]

Also, this seems to be VSCode specific, the issue is much wider than that. Unfortunately I know little to nothing about type and fonts so I can only comment, which is a bit frustrating.

[kiliman]

Yes, I agree this isn't really a "solution". Unfortunately I'm not sure what's causing it. The ligatures do show up under certain circumstances, so I don't believe it's an issue with the font itself.

[kufii]

it is really weird and I have no idea why it would be happening, but I tried it out in several different applications (Chrome, Firefox, iTerm) and in all of them the ligatures don't display correctly in italics. That makes me think it's some obscure issue with the font itself

[cybergrunge]

I can confirm ligatures in italic (light) don't work anywhere in the system (macOS).

[kiliman]

@cybergrunge I'm not sure what the issue is for you, but I just set my default font to Light Italic, and VS Code displays them just fine. macOS Catalina

Email me kiliman@gmail.com and I'll send you a test font.

[cybergrunge]

In Sublime Text on macOS you'll have to convert the fonts to TrueType (ttf) in order to have italic ligatures.

[amitkparekh]

@kiliman

I'm having issues with the ligatures outside of VSCode, I have a feeling its the font file as no other font is having the issue, but I have no idea why.

[kiliman]

I think I figured out what's going on with the Italic fonts. Apparently there's an issue with the GSUB tables in the original font. Since I append my calt tables after, there must be some kind of conflict, and my tables are being ignored.

As a test of my hypothesis, I edited the TTX file of the original and removed the existing GSUB tables, then ran my build and sure enough, the ligatures came out perfectly.

I'm going to see if I can adjust the table ordering before going with the drastic option of removing the existing tables. Anyway, it looks like a solution if close at hand.

[amitkparekh]

@kiliman Have you managed to make any progress towards a possible solution?

[kiliman]

Is it just me or are italic ligatures finally working? I just updated to v1.45 (April 2020) version and noticed it said syntax highlighting was improved, so I figured I'd check to see if that fixed the italics and sure enough it does (at least for me)

Anyway, please check in and let me know if you are still having issues.

Thanks!

[mskelton]

Nope, still broken for me. I believe it has something to do with the variable names

// a == b
// a === b
// a <= b

Even more interesting is that when I highlight the selection it works but when it isn't highlighted it doesn't 😕

[kiliman]

Ha, you'll need to post a screenshot, because I have updated GitHub to use the ligature font, so I actually see it properly (using my Cobalt2 theme)

Anyway, I think I realized what it is. I had patched the original TTX file and removed the GSUB node, so the only thing added was the calt tables for the ligature substitution. That seems to be the trick. It looks like something in the original tables are causing a conflict with the ligatures.

I'm going to create a flag to --italics-hack so we can test it before making it the default.

[kiliman]

Ugh... I added the hack and regenerated the font and now it stopped working 😭

I'll have to compare with the original font I used.

Back to the drawing board.

[kiliman]

Ok, I think I figured out the problem. It's now working for me. I was applying the hack in the buildGsubTables() function, which was called per ligature. So it was wiping out the tables that I was creating 🤦‍♂️. I moved the hack to initGsubTables() and it appears to be working.

Try checking out the feature/italics-hack branch and run ./build.sh --italics-hack then reinstall the fonts and let me know if it's working for you.

Thanks!

[kiliman]

You can also build for just a single font by running:

./build.sh --italics-hack OperatorMonoSSmLig-BookItalic

[mskelton]

I'll give this a try tonight

[kiliman]

Another weird thing.

Works fine non-italic, but drops the ! in italics. 🤷‍♂️ 

[mskelton]

It still is broken for me. I ran the build command you sent and installed the font but it still didn't fix the italics.

[amitkparekh]

There might be font cache issues causing these differences? Glyphs recommends using their TextPreview tool as a way of testing the fonts without running into these issues.

Is it still working/not working if you put a freshly built version of the fonts into TextPreview?

[kiliman]

I sent you both a copy of the working italic. Let me know if it works for you.

[amitkparekh]

I loaded it up in TextPreview to see how it looks; entire screenshot of it is below. It appears that some of the ligatures are not showing up? I can't see www, <!--, but the arrows and equals are now starting to show.

[kiliman]

Yeah, I'm not sure what makes the italic version different. But at least the bulk of them work.

Thanks for testing. I'm going to go ahead and merge my hack into master.

[kufii]

I tried rebuilding with the latest version and the italics ligatures still don't work for me

[mskelton]

For anyone following this issue, it has been resolved in version 2.4.0.