New nodejs character positioned incorrectly

[adamshaylor]

Bug Report

Current Behavior

The prompt for nodejs directories uses a new nerd-font character that does not render correctly. It’s positioned incorrectly and results in a collision with neighboring characters.

Expected Behavior

The nodejs character should not collide with neighboring characters.

Additional context/Screenshots

Possible Solution

Revert #1649.

Environment

• Starship version: starship 0.51.0
• Shell type: zsh
• Shell version: zsh 5.8 (x86_64-apple-darwin20.0)
• Shell plugin manager: none
• Terminal emulator: Terminal
• Operating system: macOS 11.2.3

Relevant Shell Configuration

# Bash style word boundaries (including / and -)
autoload -U select-word-style
select-word-style bash

# Git completions
autoload -Uz compinit && compinit

# rbenv (Ruby version manager)
# [Disabled for performance reasons]
# eval "$(rbenv init -)"

# nvm (node version manager)
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

export PATH="/usr/local/sbin:$PATH"

eval "$(starship init zsh)"

Starship Configuration

# Don't print a new line at the start of the prompt
add_newline = false

# Replace the "❯" symbol in the prompt
[character]
success_symbol = "[❯]()"

# Disable the package module, hiding it from the prompt completely
# [package]
# disabled = true

[adamshaylor]

For others encountering this, the config workaround is:

[nodejs]
symbol = "⬢ "

[vladimyr]

Thanks for reporting. Which font do you use?

[adamshaylor]

I tried a few from the latest release (2.1.0), all with the same result. Here are their names as they appear in macOS’ Font Book:

• BlexMono Nerd Font Mono – Text
• iMWritingMonoS Nerd Font – Bold
• iMWritingMonoS Nerd Font Mono – Regular
• RobotoMono Nerd Font Mono – Regular
• RobotoMono Nerd Font Mono – Medium

The one in the screen shot is RobotoMono Nerd Font Mono – Medium.

[Overflow0xFFFF]

@andytom, I thought I'd pick up this issue for Hacktoberfest 🎃, but can't seem to reproduce it.

I used a Dockerfile to reproduce the target environment, as I don't own any devices that run OS X. I'm running on Fedora 33, so for glibc compatibility, I created a Fedora-based container:

FROM fedora:latest

COPY ./target/debug/starship /usr/local/bin/starship

RUN dnf -y update && \
    dnf install -y curl wget git zsh && \
    useradd -ms /usr/bin/zsh -u 1001 starship && \
    curl -fsSL https://rpm.nodesource.com/setup_16.x | bash - && \
    dnf install -y nodejs && \
    dnf clean all && \
    rm -rf /var/cache/yum

WORKDIR /home/starship
USER 1001

Commands run:

# From the starship repo root
docker build -f Dockerfile -t starshiptest .
docker run -it --rm starshiptest

# Inside the container
zsh
eval "$(starship init zsh)"
git clone https://github.com/mqttjs/MQTT.js.git
cd MQTT.js

I pulled Roboto Mono from NerdFonts and switched my personal terminal to it. Things seem to be working as expected:

I'm willing to pitch in and help if there's still a change needed.

[chipbuster]

@Overflow0xFFFF This is going to depend on terminal emulator being used in addition to possibly shell, OS, and font (depending on exactly which combinations of things are being used).

#3150 seems to suggest that this bug is still seen with the default MacOS terminal, but I don't know if it'd be seen anywhere else. You'd probably want a very simple terminal that doesn't do a lot of adapting to wcswidth, maybe xterm, urxvt, or st would be good candidates (but I don't know for sure).

[Overflow0xFFFF]

@chipbuster: Thanks for the heads up! I did some more testing on Fedora 33. xterm and st are both happy-ish, which leads me to think that this is indeed related to some MacOS terminal constraints.

[ismay]

Maybe you can try with kitty as that's cross platform. I see the bug with kitty and fish shell on macOS 11.4 using an Ubunto mono nerdfont:

Top is the default (i.e. the bug, though it no longer seems to be colliding), bottom is with my config applied: format = "via [⬢ $version](bold green) ". As you can see the git branch icon has a proper space after it, the nodejs icon seems to have less space for the default. For my config files see here: https://github.com/ismay/dotfiles

[ismay]

I suspect the difference in rendering between the node.js symbol and (for example) the git branch symbol, is that kitty will render a glyph a different size depending on, amongst other things, the amount of spaces after it: kovidgoyal/kitty#2672.

This does not affect the git branch icon (maybe because it is already tall), but for the node.js icon it will render small if there is no space after it:

and larger if there is one space after it:

So the icon size is basically not static. Which leads to the discrepancy we're seeing for the node.js glyph. Starship prints a space after the node.js glyph, which is eaten up by the glyph increasing in size, instead of being used as whitespace between the glyph and the version string.

[Overflow0xFFFF]

I installed kitty and applied the config mentioned earlier in the thread to change the symbol back to a hexagon just to compare:

I'm using the RobotoMono Nerd Font used in the original issue. Tested with kitty v0.21.2.

Likewise, for the record, I'm running Fedora 33 with a GNOME desktop and I'm using xorg, not wayland.

[ismay]

Strange. Maybe it's platform related? I wonder if anyone else can reproduce it on macos.

[ylieder]

On macOS, the bug occurs on Apple's default Terminal.app, but not on iTerm2.

Terminal.app:

iTerm2:

(Using Fira Code Nerd Font in both terminals, but seems to be independent of used font)

Update:
The problem seems to be that Terminal.app renders the default nodejs symbol very strange, shifted into the succeeding characters.

Both symbols in vim:

[chipbuster]

Left: MacOS Terminal. Middle: iTerm2. Right: kitty.

MacOS Terminal has some pretty fun issues with emoji fonts. Consider the following image:

Here's what it looks like in iTerm2:

Note that iTerm2 has shrunken and shifted so that all emojis are displayed. There are also some emoji sequences where both terminals screw up horrendously: consider the following 5 (yes, 5!) character sequence:

iTerm2 doesn't really do any better on this one.

---

If you want to try this on your own platform, here's the emoji string I used to test with:

⭐️🕝🎯☘🚼🚐⚓️🍰🎻🏠🌟🎈📡▶️🌘💏💕⚠️🛏 🍺👸👔👩❕🍇🔷🐈👡🚤🕟🍵❣🕓🔷🈸💸😹🍲🌾🎇✋🍯🕋🚴🈹🆑👟☄☎️🎯⏮🚫🎮🐻🎊🎦🌰🏅😆🙏

[chipbuster]

For anyone being affected by this: we used to have two spaces after the nodejs symbol to avoid this problem. However, at some point, we got rid of this because it didn't work and also broke other terminals. (I am unable to locate the PR at the moment).

We can use a similar setting to undo the overlap issue. It gives us a slightly spaced out prompt, but the character overlapping is gone:

So as I see it, you have four options:

Options for a fix

• Use the following configuration to insert enough spaces that the overlap no longer happens. This will cause excessive spacing when using other terminal emulators.

  [nodejs]
  symbol = "   " # The symbol doesn't render correctly on GitHub,
                  # but this is the NodeJS symbol (grab it with copy-paste) 
                  # with *three* extra spaces afterwards.
  

• Change the symbol to a non-NerdFont symbol, e.g. the "Black Hexagon" symbol, which are usually a little better-behaved across most terminal emulators.

  [nodejs]
  symbol = "⬢ "
  

• Use a different terminal emulator which is less bad about finding symbol widths (iTerm2 is popular, as are Hyper, Alacritty, and Kitty).

• Wait for Apple to fix their software.

[ismay]

Use a different terminal emulator which is less bad about finding symbol widths (iTerm2 is popular, as are Hyper, Alacritty, and Kitty).

I use kitty on macos and have this problem as well. So I don't think the above suggestion (i.e. moving to kitty) will fix it if my personal setup is anything to go by. It's not just the macos default terminal.app that's having this problem.

As mentioned here: #2546 (comment)

[alper]

@ismay Kitty for me on macOS renders this properly. No clue what the difference could be.

[ismay]

@ismay Kitty for me on macOS renders this properly. No clue what the difference could be.

That's strange, and yeah me neither. Ah well 🤷‍♂️

[chipbuster]

@ismay Would you be comfortable sharing your kitty.conf so we can test if that affects this in any ways? Also, what version of MacOS are you running, and is it Intel or Apple?

[ismay]

@ismay Would you be comfortable sharing your kitty.conf so we can test if that affects this in any ways? Also, what version of MacOS are you running, and is it Intel or Apple?

Sure no problem. My kitty overrides are here: https://github.com/ismay/dotfiles/blob/main/config/kitty/kitty.conf (as well as my other configuration). I'm running macOS 11.4 on an early 2015 Intel MBP.

[chipbuster]

@ismay No idea what to make of this.

kitty, fish, font-ubuntu-mono-nerd-font, and starship installed from homebrew, latest version.

I've copied everything from your repo at macbook/config into my ~/.config directory. Here's what I get:

I appear to have the exact same setup as you do, but things look pretty much fine here. Is it possible that differences in the version of the font somehow cause this?

EDIT: One thing I do notice is that the arrow emoji use as the character doesn't display properly in iTerm2 at all.

[ismay]

Strange. Well might just be linked to the exact state my laptop was at at that time. I'd be fine with closing as resolved until we can find a reliable way to reproduce.

[TrickyPi]

should we change the default of symbol to e718? currently it is f898,
https://github.com/starship/starship/blob/master/src/configs/nodejs.rs#L24
they seem similar.

after adding following config in starship.toml.

[nodejs]
symbol = " "

this problem is solved.

[chipbuster]

Huh. That's a surprisingly simple solution.

I'd want to see that tested on other OS/terminal combos, but if that works in general I'd be happy to merge it.

[TrickyPi]

I will test it on other popular terminal.