Status bar goes out of bounds when displaying CJK characters or emojis

[Aether2D]

Describe the bug The status bar seems to render incorrectly when it displays emojis or Japanese,Chinese and Korean characters.

This only seems to happen with these languages as I tried Arabic,Hindi,Vietnamese and other languages that use the Cyrillic script and they all display correctly.

I thought this might be an issue with my terminal, so i tried Kitty,Alacritty & Foot but the issue persisted.

Expected behavior Here's what it's supposed to look like: Here's what it looks like with Russian: As i said before, these languages display correctly.

Now, The issue is when it displays any CJK character.

Here's what it looks like with Japanese: Here's what it looks like with Korean: Here's what it looks like with an emoji:

I think this might be an issue with how UTF-8 encodes characters. Here's a screenshot of the UTF-8 Wikipedia Page I Highlighted the important part

This mostly lines up with the problem, except for one thing. When I tried displaying these mathematical symbols: √ ≜ E⊖

they display correctly:

So now I am not so sure.

At first i thought it just wasn't rendering these characters for some reason but quickly discovered that it was rendering them, it was just out of bounds.

If i resize the window to a small enough size, you can see the characters:

Hence the "out of bounds"

Desktop (please complete the following information):

• OS: Linux EndeavourOS
• Zellij version: zellij 0.39.2
• Version: v0.11.2

Layout

How does the layout look like? Please copy it into a code block.

layout {
    pane size=1 borderless=true {
        plugin location="file:/home/aether/.config/zellij/Plugins/zjstatus.wasm" {
            format_left  "#[bg=transparent,fg=yellow]#[bg=yellow]{mode}#[bg=yellow,fg=black,bold] {session}  #[bg=transparent,fg=yellow]   {tabs}  #[bg=transparent,fg=magenta]{command_ncmpcpp}#[bg=transparent,fg=magenta]"
            format_right "#[bg=transparent,fg=black]{command_git_branch} #[bg=black,fg=blue]{command_tomato}#[bg=blue,fg=green]{command_date_day}{command_date}#[bg=green,fg=magenta]#[bg=magenta,fg=black,bold]{datetime}#[bg=transparent,fg=magenta]"
            format_space ""

            border_enabled  "true"
            border_char     "─"
            border_format   "#[fg=yellow]{char}"
            border_position "top"

            hide_frame_for_single_pane "true"

            mode_normal  "#[bg=yellow] "
            mode_tmux    "#[bg=#ffc387] "

            tab_normal   "#[bg=transparent,fg=black]#[bg=black] #[bg=black,fg=white]{name}#[bg=black] #[bg=transparent,fg=black]"
            tab_active   "#[bg=transparent,fg=blue]#[bg=blue,fg=black] #[bg=blue,fg=black,bold,italic]{name}#[bg=blue] #[bg=transparent,fg=blue]"

            command_git_branch_command     "git rev-parse --abbrev-ref HEAD"
            command_git_branch_format      "#[fg=green,bg=black]  {stdout}"
            command_git_branch_interval    "10"
            command_git_branch_rendermode  "static"

            command_tomato_command "tomato -t"
            command_tomato_format   "#[fg=black,bg=blue,bold] {stdout}"
            command_tomato_interval "0"
            command_tomato_rendermode "static"

            command_ncmpcpp_command "playerctl metadata title"
            command_ncmpcpp_format   "#[fg=black,bg=magenta,bold]󰝚 {stdout}"
            command_ncmpcpp_interval "1"
            command_ncmpcpp_rendermode "static"

            command_date_command  "date +%d-%m-%Y"
            command_date_format   "#[fg=black,bg=green,bold] {stdout}"
            command_date_interval "43200"
            command_date_rendermode "static"

            command_date_day_command  "date +%a"
            command_date_day_format   "#[fg=black,bg=green,bold] {stdout}"
            command_date_day_interval "43200"
            command_date_day_rendermode "static"

            datetime        "{format}"
            datetime_format "  %I:%M  "
            datetime_timezone "America/Mexico_City"
        }
    }
    pane
}

I was trying to make zjstatus display the currently playing song and i realized it would just break if i was listening to touhou music. I quickly realized it was because of the Japanese characters in the song name.

I often listen to a lot of Japanese music and that's kind of how i found about this.

[dj95]

Hey,

thanks a lot for the detailed bug report! It describes really good, how the issue can be reproduced and what is effected. I'll take a look at it.

[dj95]

Managed to find out, what went wrong. It will be fixed in the next release. Now you can print e.g. Japanese characters and emojis without zjstatus escaping the line.