Hyper: emojis inside PS1 offset cursor by 1

[aaronatmycujoo]

• OS version and name: High Sierra 10.13.2 (17C88)
• Hyper.app version: Hyper 1.4.8 (stable)

Issue

If I include an emoji inside PS1 my terminal cursor has an offset of 1.

export PS1="\w " # works
export PS1="\w 🐱" # issue

Any idea on what to do?

I took a screenshot to show the issue: https://imgur.com/a/Z2yxV

[albinekb]

Add a space after the emoji, emojis are not monospaced so they can't fit inside a column. If you add a space as "padding" it will look correct 👍 @aaronatmycujoo

export PS1="\w 🐱 " # no probs

[aaronatmycujoo]

The problem is still there with the space. Maybe I didn't explain properly :, )

I made a video: https://streamable.com/sgqww

The space is in there, but it looks like it is being truncated. When I am in .bash_profile I am deleting the space between the emoji and the " and you can see the " going behind the cat.

[albinekb]

I can't see the error there, maybe someone else can reproduce. Hyper handles emojis like iterm does for me, that's what I expect :)

[aaronatmycujoo]

I use

- export PS1="\w - "
+ export PS1="\w 🐱 "

and here is my album to help demonstrate once again:

https://imgur.com/a/VsRJQ

[albinekb]

Oh I see. Can you try running the latest code via our canary release? see https://zeit.co/blog/canary for more info. In there we have changed the terminal rendering lib to xterm which is better than hterm used in 1.x, it should be fixed there :) coming to stable ASAP. @aaronatmycujoo thanks for the info 👀

[aaronatmycujoo]

Hm that does not seem to help.

I do not think the problem is with your software? If I compare before and after:

https://imgur.com/a/DYySY

This is with an emoji and a space. The emoji seems to take up 2 columns and the cursor does not respects that, but the text does.

Maybe it has something to do with: https://www.youtube.com/watch?v=sTzp76JXsoY

[rikumi]

The problem is that Hyper treats all Unicode characters as half-width character, and forces them to fit in 8.4px width:

.unicode-node {
    display: inline-block;
    vertical-align: top;
    width: 8.4px;
}

Apart from emojis, this problem affects all CJK characters because they are full-width.

Additionally, when multiple CJK characters appear in sequence, one of the characters is repeated after the last by mistake. For example, paste あいうえお into Hyper, they may appear as あいうえおえ.

Also, typing in Hyper with CJK input methods will result in a total mess. Hyper will catch some of the letters into the terminal, prevent the input method bar from appearing, bring strange characters after the cursor, and turn the cursor into yellow. Here is an example with a Chinese input method typed ceshiceshiceshi. Hyper caught csiehcsi into the terminal, turned the cursor yellow, and brought some special glitch (maybe part of a character) right of the cursor.

Use one of the CJK input methods to reproduce the bug.

[aaronatmycujoo]

Nice write up! So it is possible to detect halfwidth unicode characters and only force those to fit into the 8.4px width? Trying to help solve the problem here but I have no experience with this 😅

[rikumi]

@aaronatmycujoo

8.4px for half-widths; 16.8px for full-widths.
The font size can be customized, so this number may be generated. You may want to find the code that generated this number and that part of CSS.

Again, please also look into the other bugs I just mentioned apart from this one.

[rikumi]

There's an NPM package about this: is-fullwidth-code-point. Use this to solve the problem.

[curiouscrusher]

As a halfway hack for my setup I just added a width: auto !important to the unicode class.
It's not a great fix, and some emoji still seem to make the terminal rendering a bit funky until you run the command or clear the window.

I seem to have the most issues when using a 🐛 emoji, see the gif below for the odd rendering that occurs when you paste one in. The irony of a bug emoji causing a bug...

// custom css to embed in the terminal window
    termCSS: '.unicode-node {width: auto !important;}',

[Stanzilla]

Hey there, please try again with the new Hyper v2 release and open a new issue if the problem stills exists. Thank you!

[Elderry]

I'm afraid that this issue remains in the 2.0 version, at least for the powerline character :
OS version: Windows 10 Pro Build 16299.371

Before input anything:

After input abc:

[Stanzilla]

Thanks for reporting bag!

[Stanzilla]

@Elderry that looks like https://github.com/xtermjs/xterm.js/issues/1059, right?

[Elderry]

@Stanzilla Nope, I don't think they are the same issue. But I can confirm this problem also happens in vscode, so it's fine to mark this as an upstream issue.

[rikumi]

Seems like in Hyper v2 the terminal is rendered in a canvas instead of with CSS. The problem with CJK characters has been fixed.

[youngboy]

About emoji unicode version and its width problem,
after https://github.com/xtermjs/xterm.js/pull/1714 merge, this issue will be fixed

tested successful in my local build...
https://github.com/youngboy/hyper/releases/tag/2.1.0-canary.3

[aaronatmycujoo]

For me the issue has been sovled with 2.1.0-canary.3 🎉

[LabhanshAgrawal]

Fixed in https://github.com/vercel/hyper/pull/4679

[bitttttten]

I am still hitting this isse in Hyper 3.0.2 on stable and on canary.

PROMPT='%F{yellow}%/ 👻 %f'

Notice the space after the ghost. It appears in hyper like so:

You can see the ghost is taking up two character spaces. If I replace the ghost with a letter, like A you'll get:

To compare, this is what it looks like in my IDE. Ghost+space+"clear" against "A"+space+"clear".