Hyper: Powerline not usable in Hyper

[b0rski]

• [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: Windows 10 with Linux Subsystem (Ubuntu)

• Hyper.app version: 1.4.8
• Link of a Gist with the contents of your .hyper.js: https://gist.github.com/b0rski/3630e9705fb547df0f8fbc9fbf960a8a#file-hyper-js
• Relevant information from devtools _(CMD+ALT+I on macOS, CTRL+SHIFT+I elsewhere)_: No idea what that is. I'm on Windows.
• The issue is reproducible in vanilla Hyper.app: Yes, even with all plugins removed, including hyperterm-base16-tomorrow-night.

Issue

When I try to use powerline in bash or zsh and tmux or the powerlevel9k theme for oh my zsh, the characters and colors are not displayed correctly. I have powerline patched fonts installed under Windows and in the Ubuntu subsystem.

I tried different patched (Inconsolata, DejaVu Sans Mono and so on) fonts and setting UTF8 for locale but nothing works.

How do I get Hyper to display everything correctly like in the gnome terminal on Fedora or Ubuntu?

[Jay1]

Just fixed this by using
updateChannel: 'canary',
In the .hyper.js file

[b0rski]

Woah... I so wanted it to work. Downloaded newest pre-release version, which is 2.1.1, but this did not fix it for me. I even disabled all plug-ins.

Oh... cool... that version additionally killed some of the plug-ins like the hyperline :)

[Jay1]

I had a similar issue with prepackaged agnoster inside oh-my-zsh earlier , #1791 was right

Could you override the included theme with a fresh powerlevel9k please

Additionally, Nerd Fonts did help to fix several symbol issues I had

[b0rski]

OK, so I re-installed powerlevel9k from the git repo and re-launched Hyper but that did not change the output. I tried several Nerd Fonts from the link you provided but this leads to much worse command prompt like in the screen shot below.

[Jay1]

Hmm you have some kind of issue with your font, it's not loading the symbol at all, either not patched font or the font itself it not loaded into Hyper.

Could you link your lastest .hyper.js file and the exact font you downloaded please

[lucasqueiroz]

I use the powerline with ZSH fine with Hyper. In Tmux it doesn't work, but outside tmux it works fine.
I use the font PragmataPro, with a theme I created myself.

[chabou]

Can you try with our canary v2.1.1?

[b0rski]

I already tried 2.1.1, as you can see above. I am once again posting my configuration and screen shots.

This configuration.
https://gist.github.com/b0rski/356e74f4af3469535380a23351512320

Produces this with powerline (not powerlevel9k theme).

And this is how powerlevel9k theme looks like.

tmux does not work at all. I never had problems on gnome-terminal in Ubuntu or Fedora.

[octalmage]

I'm using powerlevel9k and it works a bit better than yours. This is what I have for my fontFamily:

fontFamily: '"Roboto Mono for Powerline"',

[lucasqueiroz]

As you can see, it works fine for me.
I'm using the font FuraCode Nerd Font

[b0rski]

Are you guys even testing on Windows and with the Ubuntu subsystem?

[dlynchcodes]

I think you have to install the fonts into Windows, not into the WSL environment. Have you done so?

https://medium.com/@jrcharney/bash-on-ubuntu-on-windows-the-almost-complete-set-up-1dd3cb89b794

[b0rski]

Yes, the fonts are installed in Windows but this is already stated in my opening message.

[dlynchcodes]

After posting my previous comment, I've noticed that I may have the same issue as you. My hostname is not properly being styled.

[phifa]

same here, using cobalt2 by wes bos, and the icons do not work

[phifa]

was able to fix it (i am on windows btw):
install fonts manually.

• Navigate to the font you want to install.
• Right-click and select “Install”.

kudos to https://davidtranscend.com/blog/windows-terminal-workflow-guide/

[chabou]

Thank you for your feedback @phifa 🙏

[b0rski]

Currently, at least for me, it's not about the font. It's about the colors.

My configuration looks awesome in wsl-terminal (mintty) or under Linux (with gnome terminal) and looks rather strange in Hyper. It seems a component of Hyper does not implement/interpret colors (https://misc.flogisoft.com/bash/tip_colors_and_formatting) correctly.

HYPER

WSL Terminal

[chabou]

it's not about the font

Then I think this is not the right place for your feedback 😉

@b0rski Can you open a new issue with all informations asked in template to help us to reproduce/fix?

[b0rski]

@chabou: I am the author of this issue and I still have the same problem. I already delivered all my settings twice.

[chabou]

Oh sorry, I didn't notice this.

Please try our canary (upcoming v2): https://zeit.co/blog/canary#hyper
Everything should be alright!

Let me know if anything goes wrong

[b0rski]

The screen shots from above are from 2.0.0-canary.14, I think it's super easy to reproduce on Windows 10 with the Linux Subsystem (Ubuntu) because I get same result on 2 different Windows boxes.

[chabou]

@b0rski For previous screenshot on canary, I think you used 'hyperterm-base16-tomorrow-night'.
Referring to this screenshot, this theme is using something like #8CBEB7 for blue color. And this is exactly the color I see in your prompt.

[b0rski]

@chabou: Well even if that's the case and the colors are not the same because of the used theme then why is the ">" sign printed in other color (inside first and last part/chunk of the prompt) than the background? Even if I roll back to default theme, it's still the case (see this screen).

[chabou]

I'm little bit confused.
In this comment, you said that problem is color, but I don't see bottom bar in your hyper screenshot, only in regular WSL. Is it attended? 🤔

[b0rski]

It does not matter whether the bottom bar (generated for powerline for tmux) is present or not :) It's just that background colors of the powerline bar chunks are not same color in Hyper (see my picture below).

[chabou]

Can you add screenshots made with a fresh install of 2.0.0-canary.14 (remove your config file, colorscheme has changed in our last release. Removing it with regenerate a default config)?
Please add all your config file (powerline, zsh, oh-my-zsh etc..) to let me reproduce your issue.

Thank you 🙏

[b0rski]

OK, let's start over with the simplest configuration I can come up with.
Windows 10 + Linux Subsystem (Ubuntu) + Bash + Powerline + Hyper. No zsh, no oh-my-zsh, no tmux involved.

Screen Shot

.hyper.js
https://gist.github.com/b0rski/967afc110a1efa0dd52283372506782b

.bashrc
https://gist.github.com/b0rski/598879cb7783e3dbe480cf8fd315dd21

The whole powerline directory from /usr/local/lib/python2.7/dist-packages/powerline.
https://ufile.io/xppnq

Meanwhile in WSL Terminal (mintty).

[mwdiers]

On macOS (10.13.3), in Canary.14, this is now working perfectly for me using my preferred powerline font (Iosevka Terminal Medium). Colors are also correct.

[feryardiant]

I'm having similar issue on Windows 10 WSL with fresh install of hyper few minutes ago. Here's side by side comparisons

Home user with zsh + oh-my-zsh

nvim + vim-airline plugin

Home user on tmux

_I'm not using powerline btw_

Also Cursor navigation not working naither inside nvim nor tmux. eg. scrolling, navigating between panes, tabs, etc.

[b-gran]

I had this problem on MacOS, and was able to resolve it. (Note: using latest non-canary Hyper)

TLDR: I was using the _font filename_ in my .hyper.js instead of the *_font family name_ as understood by MacOS.*

Here is the relevant snippet from the original, non-working .hyper.js. Note that the family includes the "Regular" (not actually part of the font family name).

fontFamily: '"Meslo LG M DZ Regular for Powerline"',

Here is my font directory.

$ ls -l ~/Library/Fonts
-rw-r--r--@ 1 b-gran  staff  475692 Jul 16  2017 Meslo LG M DZ Regular for Powerline.ttf

I was using the _filename_ of the font in the .hyper.js, and not the actual font family.

Here are the Font Book.app details for this font:

Notice that the _Font Family_ name is different to the filename.

I updated my .hyper.js to use the _Font Family_ from Font Book.app:

fontFamily: '"Meslo LG M DZ for Powerline"',

and now, the font is rendered correctly.

[chabou]

@b-gran Thank you for your valuable feedback 🙏

[b0rski]

@b-gran: This is a whole different story on Windows. One can clearly see in my screen shots that the font is loading correctly. There is however something broken with the background color of the Powerline segments (the arrow characters).

[feryardiant]

I don't know why everyone always said on MacOS while this issue is on WIndows also It's not about font, it's all about colors. I know my english is bad but I can see that @b0rski already clearly told everything from the begining of this issue.

Re-post the color differences between Hyper & WSL Terminal on Vim + Vim_airline.

Note:

• I'm not using powerline
• Just doing fresh install Latest Hyper v1.4.8 (stable)
• Using my own dotfiles

[feryardiant]

Now, on 2.0.0-canary.15 frest install not much different.

In the gif

• Mouse is unusable inside vim neither tmux

[LukasPolak]

I have a problem with agnoster theme on zsh. I have same bash on vs code and it looks fine.
this is in hyper

this is in VS Code

Windows 10 version: 1709
Windows build: 16299
ZSH version: zsh 5.1.1 (x86_64-ubuntu-linux-gnu)
Hyper version: 1.4.8(stable)

[chabou]

@LukasPolak We have replaced hterm by xtermjs (used by VSCode too) in our canary (upcoming v2). Your issue has been fixed.
Please try it: https://zeit.co/blog/canary#hyper

[b0rski]

Tried canary.16. Still same color issue.

[LukasPolak]

For me it is fixed with canary.16

[b0rski]

Why ist this closed? Still not working under Windows with bash.exe.

[feryardiant]

Hahaha, this is so funny to see the mainteners only want to hear the good things & don't even want to listen the bad things.

[Stanzilla]

@b0rski Which Hyper version are you testing this with?

[b0rski]

See https://github.com/zeit/hyper/issues/2470#issuecomment-379279886.

[Stanzilla]

@b0rski can you try with 2.0.0 release then please?

[feryardiant]

I think this issue might related to #1706 & #1733

[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!

[b0rski]

@Stanzilla: Tried with the 2.0.0 release. I get exactly same result.

[Stanzilla]

@b0rski please try what I posted above.

[solshark]

Same issue on Mac. Hyper 2.1.0-canary.1 (canary)

[albinekb]

Please open a new issue and fill in the issue template so we can reproduce if you still got this error 👍

[jdheyburn]

I get the squares and colour issue. @Stanzilla I believe it to be an issue upstream at xterm.js. Let me demonstate:

Expected behaviour working in powershell:

VSCode:

Hyper v2.0.0

Same issue on Hyper 2.1.0-canary.2

[Stanzilla]

Hey there, if this is indeed a issue upstream at https://github.com/xtermjs/xterm.js/ could you please open a ticket over there? Thanks!

[jdheyburn]

In case anyone else has this issue, I didn't specify in my hyper.js config file to use the Powerline font.
fontFamily: '"Ubuntu Mono derivative Powerline", DejaVu Sans Mono for Powerline, Consolas, Lucida Console, monospace',

For VSCode, change the terminal.integrated.fontFamily setting for the same above

[mkarpusiewicz]

@jdheyburn Yeah, I had the same issue and that helped. Also, if you're using a theme in hyper (like verminal) check if it doesn't override font setting. I has this issue while using verminal. Adding verminal settings to config fixed the issue:

module.exports = {
  config: {
    updateChannel: 'canary',

    verminal: {
        fontFamily: '"Ubuntu Mono derivative Powerline"',
        fontSize: 14
    },
...

[infn8]

Ok so i had a LOT of trouble here with this but the BIG thing i needed to get it to work was to use Oh My ZSH & nerd fonts (I used the hack nerd font) and the big deal is to add:

POWERLEVEL9K_MODE='nerdfont-complete'

into my ~/.zshrc file _before_ the line

ZSH_THEME="powerlevel9k/powerlevel9k"

It says that in the install instructions but I thought it meant _temporally_ before, as in save it and reload _before you activate the theme_ but it means that the line has to _precede_ the other. So here are all the lines in my files to do this

~/.hyper.js

module.exports = {
  config: {
    fontFamily: '"Hack Nerd Font", monospace',
  }
};

~/.zshrc

POWERLEVEL9K_MODE='nerdfont-complete'
ZSH_THEME="powerlevel9k/powerlevel9k"

[davidnagli]

What's the status of this issue? Is there a fix? Has an issue been open upstream in xterm?

[b0rski]

The issue is closed, nobody is assigned and they basically don't care.

[davidnagli]

For anybody stuck with this issue, I was able to find a quickfix: Simply reinstall the font.

In my case I was using powerline, so I went to they’re repo, followed the install instructions and everything seems to be working now. I’m not sure if this advice will work for everybody, but it’s certainly worth a try.

As for the root cause of this “issue” (for any contributors trying to fix it), I think this might not be an issue with Hyper at all... at least in my case and several others from what I’ve read. If you try to use the fonts on Chrome/Chromium (which as far as I understand is an upstream of Hyper) it doesn’t work either indicating that the problem might be on the OS/Browser level.

So to anybody experiencing an issue with Hyper and setting custom fonts, please first check if you can use the font anywhere else (try Chrome!) as this might be an issue elsewhere. Then try reinstalling the font.

[b0rski]

How many times do I have to write this? IT IS NOT ABOUT THE FONTS. THE COLORS ARE WRONG. IF YOU "MANAGED" TO INSTALL CORRECT FONTS. WOW, GOOD JOB SPORT.
(sorry about the caps lock, it seems to be broken)

[infn8]

ok @b0rski let's take it down a notch. This is free software and these people are not paid to help. They don't owe you - or anyone else - anything, and do not deserve your beration. I get that this is frustrating for you, I spent a solid day myself trying to get al this to work as well, but it's not going to get better treating others that way.

After reviewing all of this my guess is that you're mixing up configs somehow. Here is how I came to that conclusion. in this comment:

https://github.com/zeit/hyper/issues/2470#issuecomment-345999296

you link to this config file:

https://gist.github.com/b0rski/356e74f4af3469535380a23351512320

which lists your shell as C:\\Windows\\System32\\bash.exe and then you say:

"this is how powerlevel9k theme looks like."

but powerlevel9k is not a bash theme. it's a zsh theme. so _something_ is likely amiss here. no matter how it shakes out you're using free software, with free support doing something it's not built to do out of the box. That configuration requires a little patience.

Let me know if I can help you out. I posted my issues and solution on a mac cause that's all i got and i hoped it could be helpful. I'm gonna take a VM copy of Windows 10 with Linux Subsystem and see if i can get powerlevel9k working with nerd fonts on hyper but that will take me a bit. until then, please refrain from aggressive caps lock or verbal condescension with the volunteers who are being as helpful as they are able to be

[b0rski]

@infn8:
I think you (and maybe others) misunderstand what I wanted to say. I don't think someone owes me something, where do I expose this attitude? I'm just tired of random people (_not_ the devs of hyper) writing random messages in my ticket instead of opening their own. My comment above was directed at @davidnagli (sorry for not mentioning him in my comment).

Your guess is wrong. You can start bash.exe and still use zsh. And even if not, the problem still remains unsolved with bash and tmux.

Thank you for offering the help but I gave up on this issue and just use wsl-terminal instead. I don't think this is a configuration issue.

[davidnagli]

@b0rski Sorry about your broken caps lock key, glad you got that fixed :)

I don't wanna spam everyone by going back and forth, but the simple explanation for why everybody is writing "on your ticket" is because it's not a "ticket", it's a Github issue on an open source project, and common practice is to post your solution, issue reproduction instructions and any other details in an existing issue if possible to make the lives of maintainers easier. Many bright people work very hard (often for no pay) to help make these open source projects possible, so the least we can do is to keep everything organized and provide them with a clear and concise issue thread with everything in one place, so that if somebody wants to put together a PR fixing the issue they could do so without scrambling across 20 different issues.

Feel free to unwatch this thread if this continues to bother you.

[b0rski]

@davidnagli Keeping issues on topic helps people solve problems because issues are way less chaotic this way. It does not help to post the same for the Nth time in the same thread. It only makes clear that the poster didn't even bother to read the history of the issue. I have absolutely no problem with other people posting about their color problems in my ticket (on topic).

Hell, there are even Hyper maintainers in this issue who explicitly write "Please open a new issue and fill in the issue template so we can reproduce if you still got this error" if users come here with different problems.

I have no idea what the argument of bright hard working people has to do with anything. Almost everyone is hard working today and many are bright. So what?

Feel free to stop discussing off topic stuff in this ticket.

[shinokada]

For Mac user, I added the following and it worked.

fontFamily: '"Hack Nerd Font", monospace'

[Menci]

I think it should be reopened. I still can't use powerline since July.

There'll be extra spaces before cursor after characters.

Conhost works well (even if it doesn't have Roboto Mono for Powerline font).

[st-schneider]

@jdheyburn Yeah, I had the same issue and that helped. Also, if you're using a theme in hyper (like verminal) check if it doesn't override font setting. I has this issue while using verminal. Adding verminal settings to config fixed the issue:

module.exports = {
  config: {
    updateChannel: 'canary',

  verminal: {
      fontFamily: '"Ubuntu Mono derivative Powerline"',
      fontSize: 14
  },
...

Thank you, finally found where this happend