Render is completely messed up

[lenohard]

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

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

[yorukot]

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

[lenohard]

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:

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

[Limwin94]

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

[yorukot]

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

[lenohard]

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

[yorukot]

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!

[lenohard]

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 😂.)

[yorukot]

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

[lunrenyi]

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

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

3. 缓解该问题的措施:

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

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

[lunrenyi]

@yorukot I tried the latest 1.1.4 version, but the bug persists.
I'd like to know if a complete fix for this issue is being considered for the new version or subsequent releases?

[yorukot]

@lunrenyi
Do you mean it can be solved without changing the decoding?

If so, there are currently no plans to completely solve it, mainly because this part of the calculation is implemented by bubbletea.

[lunrenyi]

@yorukot I've provided the x-cmd method for installing superfile, which might offer some help with this issue.
PR: #371