Hyper: Font ligatures don't work v3

[orangecoloured]

• [x] I am on the latest Hyper.app version
• [x] I have searched the issues of this repo and believe that this is not a duplicate

• OS version and name: 10.14.4 macOS Mojave
• Hyper.app version: 3.0.0
• Link of a Gist with the contents of your .hyper.js:
• Relevant information from devtools _(CMD+ALT+I on macOS, CTRL+SHIFT+I elsewhere)_:
• The issue is reproducible in vanilla Hyper.app: Is Vanilla or with the hyper-font-ligatures add-on.

Issue

I'm using Fira Code font and the ligatures don't work. I found this issue https://github.com/zeit/hyper/issues/914 and tried installing the hyper-font-ligatures add-on or adding this css

termCSS: `
  x-screen x-row {
    font-variant-ligatures: initial;
  }
`,

but none of these seem to work.

[mhall]

At least on Windows 10, setting webGLRenderer: false in your config file will bring them back (assuming you still have the hyper-font-ligatures plugin installed). This will also fix some of the other rendering anomalies of v3, although sadly not all.

[orangecoloured]

Oh. Yes, working now.
So, ligatures in exchange for performance :)

[nurtext]

@orangecoloured So why did you close this bug?

[orangecoloured]

@nurtext Because technically this bug was resolved. The ligatures work without WebGL renderer.
I think another issue should be created addressing this.

[nurtext]

@orangecoloured I understand, but for me it's still open because turning off the newly introduced renderer isn't a valid fix. Ever tried tailing or cating some logs with the old renderer? It made Hyper almost useless for me. Now Hyper is back in the game (at least for me), but ligatures are a must have in 2019 IMHO.

[mhall]

Yeah, I would recommend reopening this as well.

[depadiernos]

So, based on this comment, looks like there's a fix for this in xterm.js. Would be really awesome to get that pulled in so ligatures will work without a performance hit.

[GitSquared]

xTerm 4 supports this through the new Addon system: https://github.com/xtermjs/xterm-addon-ligatures

However, the xterm fork used by Hyper is severely out of date: 56 commits ahead, 1290 commits behind.

Edit: Switching the fork for latest xTerm works... except the WebGL renderer is quite broken - I believe it should be possible to fix it but I haven't researched that much. Also, the fork contains valuable work that needs to be rebased on xterm@4.

[nurtext]

@GitSquared Looks like they're already on it: https://github.com/zeit/hyper/pull/3830

[Stanzilla]

@GitSquared our effort in that PR is currently stuck on broken resizing

[GitSquared]

Now that #3830 has been merged, I'm sending a PR for enabling font ligatures.

[alexgalkin1994]

Does not work for me, even with WebGL disabled.

[GitSquared]

@alexgalkin1994 You're testing on the canary version, right?

[Stanzilla]

Reopening since I don't see them working as well here, something broke during the Electron update?

[GitSquared]

@Stanzilla They still work for me under Linux, could this be platform-specific? (Still using Fira Code.)

[Stanzilla]

Could be yea, anything known about issues with that on Windows @Tyriar?

[LabhanshAgrawal]

Working for me on mac (also using Fira Code)

[alexgalkin1994]

@alexgalkin1994 You're testing on the canary version, right?

I installed it via Homebrew. (brew cask install hyper)
Version 3.0.2 is installed

[GitSquared]

@alexgalkin1994 That's the latest release. This issue has been closed on the canary branch, which is the development version - ligatures will be enabled in the next release.

[obahareth]

I upgraded to Hyper 3.0.1-canary.4 (canary) on macOS and I'm using the Nerd Fonts version of Fira Code, and I also tried Pragmata Pro Mono Liga and I don't see ligatures.

[Stanzilla]

You need to use a build from CI or compile your own

[obahareth]

Oh alright, thanks @Stanzilla!

[lispy]

Just built (yarn run dev) and ran (yarn run app) the latest on canary (f40496f). I can see ligatures with fontFamily set to "Fira Code", but not with any of the variants of either Iosevka or PragmataPro that I've tried. I assume either should work (they properly work in VS Code/IDEA), what might I be doing incorrectly?

[dagadbm]

any idea when this will become live for everyone?

[Stanzilla]

Sadly not

[IceMan81]

Will the fix in canary make it into 3.0.1? Can a build be put out for this fix? I couldn't find any build artifacts on CI.

[Stanzilla]

No, not soon, for which OS are you looking for?

[IceMan81]

MAC OS

[Stanzilla]

Can you try this then? https://github.com/zeit/hyper/releases/tag/v3.1.0-canary.3

[IceMan81]

Should that be v3.1.0-canary.5? since v3.1.0-canary.4 is already published

[Stanzilla]

Ah yes, my bad, try https://github.com/zeit/hyper/releases/tag/v3.1.0-canary.4

[IceMan81]

It kind of works, see screenshot. The font is Iosevka

If I remove the first "=" then the ligatures for the double arrow get disabled. See 2nd screenshot.

[IceMan81]

@Stanzilla btw, the font rendering has also changed in v3.1.0-canary.4, in my opinion it has improved. Earlier fonts used to rendered very thin.

[Stanzilla]

Sounds good, thank you! The bug you mentioned might be something to report over at xterm, does it happen in VSCode for you as well?

[IceMan81]

I don't use VS Code, so wouldn't know. But I was wondering if its a font specific issue. I switched to PragmataPro Liga, which has ligatures and they don't work.
The same was reported here

[Stanzilla]

that was canary 3.0.1-canary4 though, in theory it should work in 3.1.0-canary4. Can you please install VSCode and see if it works there?

[IceMan81]

Sorry, didnt see the difference in the versions. Here's a screenshot from VSCode, its behaving correctly there.

[Stanzilla]

Well "great" then it's probably a hyper bug.

[IceMan81]

Unfortunately, I think so too.

[bet4it]

@IceMan81 You should try this in the integrated terminal provided by VSCode.

[Stanzilla]

Oh damn it, good call, I did not actually look at the screenshot -.-

[IceMan81]

@IceMan81 You should try this in the integrated terminal provided by VSCode.

Do you need to do something to enable ligatures for the integrated terminal in VSCode?

[IceMan81]

Another example of the weird behavior. See how the right arrows are behaving.

[IceMan81]

@IceMan81 You should try this in the integrated terminal provided by VSCode.

Do you need to do something to enable ligatures for the integrated terminal in VSCode?

It looks like VSCode's integrated terminal does not currently support ligatures. There used to be a ligatures setting which has been disabled.
https://github.com/microsoft/vscode/issues/34103

[Tyriar]

@Stanzilla btw vscode's terminal doesn't support ligatures, it never ended up making it that far and the work on the addon has pretty much all been external. It may be broken on some renderers now I'm not sure, that's because we're waiting on https://github.com/xtermjs/xterm.js/pull/2847 so it can stay up to date.

[Stanzilla]

That explains that, thank you

[MarkLyck]

Ligatures still aren't working for me on 3.1.0-canary4

I have tried with several powerline fonts including Fira Code, with and without hyper-font-ligatues, with and without webGLRenderer enabled.

I just get these square boxes.

[regisbsb]

Looks like https://github.com/xtermjs/xterm.js/pull/2847 is merged now.

[dhouck]

If ligatures are merged upstream whatʼs the next step here then?

[necromancerthedark]

Another example of the weird behavior. See how the right arrows are behaving.

I am getting same problem now! can anybody suggest something to fix it? arrow symbol works only sometimes! I am on Windows.

[altosaar]

Also having this issue with Fira Code from nerd fonts: