Cropped icon rendering with Powerline+Font Awesome font . 'Fix' with opening split panes.

[paulklemm]

• 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: macOS Sierra 10.12.4
• Hyper.app version: 1.3.1.1628
• Link of a Gist with the contents of your .hyper.js: https://gist.github.com/paulklemm/5ee36a36930a7ba0a895f2bcdc8c915d
• Relevant information from devtools (CMD+ALT+I on Mac OS, CTRL+SHIFT+I elsewhere): N/A
• The issue is reproducible in vanilla Hyper.app: Is Vanilla

Issue

I'm using ZSH with the powerlevel9k theme and SourceCodePro+Powerline+Awesome Regular font (https://github.com/gabrielelana/awesome-terminal-fonts).

The icons are cropped in hyper.

When I open a new split pane horizontally, the problem disappears, while the new pane is still rendered wrong.

Opening a third one doesn't help.

If you, however, split horizontally, you can also get the opposing pane fixed.

[fsegouin]

Same issue here, noticed it on the previous version as well.

[paulklemm]

Update: Still relevant for 1.3.3.1754

[fsegouin]

Any update on this?

[fsegouin]

If it helps: I am using fish with the oh-my-fish/theme-bobthefish theme, as well as MesloLGS Nerd Font as hyper font.

[sjoeboo]

+1 also having the same 'icons cut off' issue. Using Zsh w/ InputMono Nerd Font. Also seeing a split fixing it in the original window.

[tomsturge]

I've now encountered this issue. ZSH, PowerLevel9K with FureCode Nerd Font

[paulklemm]

Update:

Related issues I could find:

• Unicode characters are crowded together, display unreadable #1336
• Meslo powerline font renders incorrectly on Hyper 1.3.3 #1845

It seems that PR #1536 solves the problem. It was merged into master end of May and should therefore be in the next Hyper.js release.

🤞🏽

[deiga]

@paulklemm AFAIK #1536 has been reverted in #1847

[paulklemm]

@deiga You're right. Just compiled the current codebase and the problem still persists.

[lucasqueiroz]

The interesting thing is that it only happens when there is a background color.
With colored background:

With default color background:

[paulklemm]

@lucasqueiroz For me it's independent of the background color. Can you share your config?

[fsegouin]

@lucasqueiroz The bug you mentioning has something to do with your theme, nothing is cropped out.

[lucasqueiroz]

It's not the theme. I've removed the theme, added again. It only works when there is no background color for the text.

[tomsturge]

Switched to iTerm as a result of this issue and it's working fine. Problem persists in Hyper with same config

Top: iTerm2
Bottom: Hyper

[tomsturge]

Any progress on this issue? Still present in v1.4.3

[zfwf]

Seems like vscode terminal also has the same issue: microsoft/vscode#30289. Potentially issue upstream in xterm.js?

[paulklemm]

@chhschou is right, VS Code has the same problem:

[Tabrizian]

Any improvement on this issue?

[jobarbo]

mine works in vscode but have the same issue in Hyper

[lucasqueiroz]

For me, it has been fixed in 2.x

[jobarbo]

2.x ? isn't the last version 1.4.8?

[Tabrizian]

Check the prerelease section On Sep 30, 2017, at 12:12 AM, jobarbo <notifications@github.com<mailto:notifications@github.com>> wrote: 2.x ? isn't the last version 1.4.8? — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#1769 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AJoxV-mCE-GuP2IRW0MWDVPUIN80i3Etks5snVYigaJpZM4NKph1>.

[zfwf]

On Hyper v2.0.3, still not fixed:

However it did seem to have improved left prompt:

[zfwf]

I believe this is a simple fix, we should be using the xterm-wide-char to display the powerline characters css class instead of xterm-normal-char. Changing to xterm-wide-char in devtools looks like this:

I believe this is fixed upstream in xterm.js. I don't know how is xterm.js changes applied in hyper to verify this theory atm.

[fsegouin]

Seems to be fixed as of 2.0.4 (might be related to the recent fix in xterm.js).

[paulklemm]

@fsegouin It's partially fixed. I still experience problems as @chhschou describes. Some Icons are still cropped.

[gabrieldrs]

Hey, 2.0.4 didn't fix it for me, what did work for me though was adding this to .hyper.js config file:

termCSS: 'x-row .unicode-node {display:inline}'

[PabiGamito]

@gabrieldrs Doing this seems to mess with the cursor, slightly offsetting it to the left when there are icons on the same line. Do you happen to know of any other fix for this?

[Stanzilla]

Hey there, to verify if this is indeed a Hyper issue or upstream at https://github.com/xtermjs/xterm.js/ could you please test if another xterm.js powered terminal shows the same problem you are experiencing? I suggest using https://github.com/Microsoft/vscode for testing. Thanks!

[PabiGamito]

@Stanzilla I was indeed experiencing the same issues in the vscode terminal. I have removed any icons to avoid this, so I haven't tested it since a bit after posting here.

[ghost]

Special indicators (like the branch icon and less noticeable the git dot) are cropped in 2.1.0-canary.1:

Surprisingly this is bugged in VSCode as well.