hyper: Font ligatures don't work v3

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 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.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 27
Comments: 60 (8 by maintainers)

Commits related to this issue

clarify Hyper Ligature support (currently broken) see https://github.com/vercel/hyper/issues/3607 — committed to vorburger/FiraCode by vorburger 4 years ago
clarify Hyper Ligature support (currently broken) see https://github.com/vercel/hyper/issues/3607 — committed to tonsky/FiraCode by vorburger 4 years ago
Move to WebGL renderer For performance reasons. This makes ligatures break. Tracking in this issue: https://github.com/vercel/hyper/issues/3607 — committed to jacob-israel-turner/jt-vim-config by jacob-israel-turner 3 years ago
Upgrade xterm-addon-ligatures for WebGL support See discussions here for context: https://github.com/vercel/hyper/issues/3607#issuecomment-904832810 https://github.com/xtermjs/xterm.js/pull/3286 http... — committed to jacob-israel-turner/hyper-font-ligatures by jacob-israel-turner 3 years ago

Most upvoted comments

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

+25

orangecoloured on May 8, 2019

@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.

+18

nurtext on May 8, 2019

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

+14

dhouck on Aug 17, 2020

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.

+14

mhall on May 6, 2019

I’m confused why this is still an issue - it seems that xterm.js has resolved most issues with ligatures: https://github.com/xtermjs/xterm.js/pull/3286 https://github.com/xtermjs/xterm.js/pull/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: https://github.com/vercel/hyper/blob/dd0ae33ddad21ce2f1270399955165fcad7df7dd/lib/components/term.tsx#L179

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! https://github.com/vercel/hyper/pull/5888

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

jacob-israel-turner on Aug 24, 2021

Yeah, I would recommend reopening this as well.

mhall on May 8, 2019

Does not work for me, even with WebGL disabled.

alexgalkin1994 on Oct 11, 2019

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

GitSquared on Oct 9, 2019

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

thoernle on Jun 5, 2023

Also having this issue with Fira Code from nerd fonts:

jaanli on Jan 12, 2021

@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.

GitSquared on Oct 14, 2019

MAC OS

IceMan81 on Mar 24, 2020

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.

GitSquared on Sep 17, 2019

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

Stanzilla on Sep 27, 2019

@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: https://github.com/tolbertam/hyper-font-ligatures/pull/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.

jacob-israel-turner on Sep 5, 2021

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

IceMan81 on Mar 26, 2020

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

Stanzilla on Mar 24, 2020

Oh alright, thanks @Stanzilla!

obahareth on Dec 23, 2019

Working for me on mac (also using Fira Code)

LabhanshAgrawal on Oct 12, 2019