Font ligatures don't work v3

[orangecoloured]

• I am on the latest Hyper.app version
• 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 #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: #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.

[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 xtermjs/xterm.js#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.

[jaanli]

Also having this issue with Fira Code from nerd fonts:

[Mantrayana]

Also happens to me on macOS Catalina with vanilla installation, is there a fix? It's the only thing that prevents me from using Hyper regularly.

[Abusagit]

Hello everyone, removing the qoutes in fonts settings in .hyper.js accidently worked for me, but when I tried to reset it and redo for making some guide for you, guys, it didn`t work for the second time. Also it worked when I removed another qoutes from other fonts in the list but for one single terminal run. I had idea about wrong font recognition because of those quotes, nevertheless now I guess they are used for multi-word-fonts.

So it`s not the solution yet... But you can try.

[Abusagit]

And also it doesn`t work fine while are being typed by me but when they are represented everything is fine

Seems little broken:

[ryanerwin]

Also having this issue with Fira Code from nerd fonts:

Using "Hack Nerd Font" on Ubuntu 21.04 with Hyper 3.0.2, I'm getting the same powerline alignment issue that @altosaar reported.

[jezmck]

Not working for me with latest version on MacOS, and with no changes to the settings other than:

...
        fontFamily: '"Fira Code", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
...

[jacob-israel-turner]

I'm confused why this is still an issue - it seems that xterm.js has resolved most issues with ligatures:
xtermjs/xterm.js#3286
xtermjs/xterm.js#2847

Is there a bug in Hyper that's preventing ligatures from working?

Turning off WebGL is, unfortunately, a non-starter for a lot of us. The stuttering caused by using Vim in Canvas gives me a headache.

EDIT: Looks like we're just not enabling ligatures if webgl is enabled:

hyper/lib/components/term.tsx

Line 179 in dd0ae33

if (props.disableLigatures !== true && !useWebGL) {

EDIT2: I tried updating that line to ignore the WebGL check, but ligatures still appear broken. Might need a core contributor to dig into this.

EDIT3: Figured it out, had wonky config locally. Here's a PR to enable ligatures with the WebGL renderer! #5888

CC: @Stanzilla @GitSquared since you both seemed invested in this issue.

[LabhanshAgrawal]

We're not enabling ligatures with webgl as it's causing issues with rendering #5757

[jacob-israel-turner]

@LabhanshAgrawal has requested that we not enable WebGL + Ligatures in hyper directly, so I've instead opened a PR with hyper-font-ligatures that enables WebGL + Ligatures: tolbertam/hyper-font-ligatures#11

EDIT: As I'm playing with this again, I'm seeing more issues than I thought. Especially while using Vim. The WebGL + Ligature combination appears to be better than what's been released, but people should still be cautious when enabling both.

[thoernle]

Has this issue been resolved? This was the reason I stopped using Hyper

[kizerkizer]

Unfortunate this was never fixed as I understand? Back to iTerm2 it is...

[kizerkizer]

Well, I owe you an apology! iTerm2 doesn't use Metal (GPU accelerated rendering) if ligatures are enabled either. Apparently it's difficult to render ligatures given the current methods for rendering text on the GPU (remember that the GPU just knows about triangles and textures). But don't give up. Those ligatures look cool, lol.

[Tyriar]

xterm.js does support GPU rendering with ligatures now, last month I fixed some bugs in xterm.js and added official support to VS Code via the terminal.integrated.fontLigatures setting. Hyper was always on the very early support that had bugs that sat for years without getting any attention unfortunately.

[regisbsb]

Does it mean that if hyper updates to the latest xterm it will get the "fix" for free?

[Tyriar]

@regisbsb not sure why it's not working, but yes if Hyper updates to the latest beta tag of @xterm/xterm and @xterm/addon-ligatures and removes the webgl restriction it would probably work just fine. I see Hyper is still on xterm/xterm-addon-ligatures so the update might be a little more involved than that.

[raidenxu]

{
fontFamily: '"CaskaydiaCove Nerd Font", "Fira Code",
webGLRenderer: false,
disableLigatures: false,
}

This works for me on macOS 15.2 (24C101)