Giters

yorukot / superfile

Pretty fancy and modern terminal file manager

Home Page:https://superfile.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Render is completely messed up

lenohard opened this issue · comments

commented

Describe the bug
There appears to be a rendering issue in the directory tree view where the text and the directory lines are overlapping or not aligned correctly.

To Reproduce
Steps to reproduce the behavior:
install it on Mac using brew
brew install superfile
open it using 'spf'
spf

Expected behavior
I expected the directories and files to be listed in a clear, non-overlapping manner with proper alignment.

Screenshots
image
I have tried on different terminals including iterm2, native terminal, Warp and Alacritty, the layout is similar.

System information (please complete the following information):

  • OS: macOS
  • Version 14.4.1
  • Superfile Version v1.1.2
commented

charmbracelet/lipgloss#30
It should be caused by font encoding. You can try change it to UTF-8 Encoding and CHCP 65001!

commented

but the encoding of my terminal is already UTF8. the result of locale is

LANG="zh_CN.UTF-8"
LC_COLLATE="zh_CN.UTF-8"
LC_CTYPE="zh_CN.UTF-8"
LC_MESSAGES="zh_CN.UTF-8"
LC_MONETARY="zh_CN.UTF-8"
LC_NUMERIC="zh_CN.UTF-8"
LC_TIME="zh_CN.UTF-8"
LC_ALL="zh_CN.UTF-8"

this is the setting of iterm2:
image

I have tried export LANG=en_US.UTF-8, the issue persists.
How should I config on MacOS?

commented

I'm using the UTF-8 setting on MacOS and have the same problem.

commented

I think this must have something to do with font decoding but I'm not sure how to set it up on macos.

commented

Thanks for your patient comments. I will make more attempts and provide more valuable feedback for diagnosis.

commented

https://github.com/charmbracelet/bubbletea?tab=readme-ov-file#bubble-tea-in-the-wild
If possible, you can try installing other programs with borders to see if you have the same problem. :)
Thanks you so much!

commented

Following the reference you provide in your first comments, I found the first FAQ of lipgloss on its README.md is exactly relavent:

Why are things misaligning? Why are borders at the wrong widths?
This is most likely due to your locale and encoding, particularly with regard to Chinese, Japanese, and Korean (for example, zh_CN.UTF-8 or ja_JP.UTF-8). The most direct way to fix this is to set RUNEWIDTH_EASTASIAN=0 in your environment.

After running 'export RUNEWIDTH_EASTASIAN=0' the layout is normal right away!
(it's interesting to note that there may not be many Chinese, Japanese, or Korean MacOS users of this useful and supercool tool yet 😂.)

commented

That really great!
I think this will be a frequently asked question in the future!

commented

Following the reference you provide in your first comments, I found the first FAQ of lipgloss on its README.md is exactly relavent:

Why are things misaligning? Why are borders at the wrong widths?
This is most likely due to your locale and encoding, particularly with regard to Chinese, Japanese, and Korean (for example, zh_CN.UTF-8 or ja_JP.UTF-8). The most direct way to fix this is to set RUNEWIDTH_EASTASIAN=0 in your environment.

After running 'export RUNEWIDTH_EASTASIAN=0' the layout is normal right away! (it's interesting to note that there may not be many Chinese, Japanese, or Korean MacOS users of this useful and supercool tool yet 😂.)

补充

  1. 复现 bug 的最小化案例:
LANG='zh_CN.UTF-8' spf

  1. RUNEWIDTH_EASTASIAN=0: 表示告诉支持该环境变量的程序，不要将东亚字符（如中文、日文、韩文）视为双宽字符。

  2. 缓解该问题的措施:

alias spf='RUNEWIDTH_EASTASIAN=0 spf'
alias spf='LANG=C.utf8 spf'

@yorukot superfile 是一个很棒的工具👍