[BUG] multibyte characters in Progressbar TextColumn mess up render

[glensc]

• I've checked docs and closed issues for possible solutions.
• I can't find my issue in the FAQ.

Describe the bug

So, I have a Progressbar:

            TextColumn("{task.fields[play_state]}  [bold blue]{task.description}", justify="left"),

and I put play_state an unicode character, for example "⏸️" (2 bytes), it messes up display:

also, if I put that character literally to TextColumn, display is still messed up:

            TextColumn("⏸️ [bold blue]{task.description}", justify="left"),

but progressbar is okay if I put some other character there "▶" (1 byte)

---

more complete Progress creation:

        progress = Progress(
            TextColumn("{task.fields[play_state]} [bold blue]{task.description}", justify="left"),
            BarColumn(bar_width=None),
            "[progress.percentage]{task.percentage:>3.1f}%",
            "•",
            TimeRemainingColumn(),
            console=console,
        )
        progress.start()
        progress.update(task_id, completed=progress, play_state="⏸️")

Platform

Click to expand

What platform (Win/Linux/Mac) are you running on? What terminal software are you using?

I may ask you to copy and paste the output of the following commands. It may save some time if you do it now.

If you're using Rich in a terminal:

╭───────────────────────── <class 'rich.console.Console'> ─────────────────────────╮
│ A high level console interface.                                                  │
│                                                                                  │
│ ╭──────────────────────────────────────────────────────────────────────────────╮ │
│ │ <console width=142 ColorSystem.TRUECOLOR>                                    │ │
│ ╰──────────────────────────────────────────────────────────────────────────────╯ │
│                                                                                  │
│     color_system = 'truecolor'                                                   │
│         encoding = 'utf-8'                                                       │
│             file = <_io.TextIOWrapper name='<stdout>' mode='w' encoding='utf-8'> │
│           height = 41                                                            │
│    is_alt_screen = False                                                         │
│ is_dumb_terminal = False                                                         │
│   is_interactive = True                                                          │
│       is_jupyter = False                                                         │
│      is_terminal = True                                                          │
│   legacy_windows = False                                                         │
│         no_color = False                                                         │
│          options = ConsoleOptions(                                               │
│                        size=ConsoleDimensions(width=142, height=41),             │
│                        legacy_windows=False,                                     │
│                        min_width=1,                                              │
│                        max_width=142,                                            │
│                        is_terminal=True,                                         │
│                        encoding='utf-8',                                         │
│                        max_height=41,                                            │
│                        justify=None,                                             │
│                        overflow=None,                                            │
│                        no_wrap=False,                                            │
│                        highlight=None,                                           │
│                        markup=None,                                              │
│                        height=None                                               │
│                    )                                                             │
│            quiet = False                                                         │
│           record = False                                                         │
│         safe_box = True                                                          │
│             size = ConsoleDimensions(width=142, height=41)                       │
│        soft_wrap = False                                                         │
│           stderr = False                                                         │
│            style = None                                                          │
│         tab_size = 8                                                             │
│            width = 142                                                           │
╰──────────────────────────────────────────────────────────────────────────────────╯
╭─── <class 'rich._windows.WindowsConsoleFeatures'> ────╮
│ Windows features available.                           │
│                                                       │
│ ╭───────────────────────────────────────────────────╮ │
│ │ WindowsConsoleFeatures(vt=False, truecolor=False) │ │
│ ╰───────────────────────────────────────────────────╯ │
│                                                       │
│ truecolor = False                                     │
│        vt = False                                     │
╰───────────────────────────────────────────────────────╯
╭────── Environment Variables ───────╮
│ {                                  │
│     'TERM': 'xterm-kitty',         │
│     'COLORTERM': 'truecolor',      │
│     'CLICOLOR': None,              │
│     'NO_COLOR': None,              │
│     'TERM_PROGRAM': None,          │
│     'COLUMNS': None,               │
│     'LINES': None,                 │
│     'JUPYTER_COLUMNS': None,       │
│     'JUPYTER_LINES': None,         │
│     'JPY_PARENT_PID': None,        │
│     'VSCODE_VERBOSE_LOGGING': None │
│ }                                  │
╰────────────────────────────────────╯

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[glensc]

Seems, to be an issue with Kitty terminal on macOS. iTerm2 works fine.

Also, python -m rich.spinner is messed up with Kitty but ok with iTerm2.

[github-actions]

I hope we solved your problem.

If you like using Rich, you might also enjoy Textual

[glensc]

But with given Progressbar, how could I avoid the problem? I would make the whole progress shorter by some bytes, but that bar_width=None applies just to the TextColumn...

[willmcgugan]

There is no way for Rich to know how wide some characters will render on any given terminal. This mostly effects emoji. There's no real solution to this, other than avoid the characters that are problematic.

[glensc]

@willmcgugan but I know I will be inserting 2-byte character there. how can I tell whole progressbar to be 1 byte (or, say 6 bytes to be sure) shorter?

btw, there's some wcwidth project, it doesn't help?

• https://github.com/jquast/wcwidth/releases

[willmcgugan]

The number of bytes in a codepoint has little to do with the width it will be rendered as. That is defined by the Unicode database, but different terminals use different versions of that database.

We use the same data as wcwidth.

[glensc]

so. the question again. can I make the progressbar not so wide as whole terminal:

        progress = Progress(
            TextColumn("{task.fields[play_state]} [bold blue]{task.description}", justify="left"),
            BarColumn(bar_width=None),
            "[progress.percentage]{task.percentage:>3.1f}%",
            "•",
            TimeRemainingColumn(),
            console=console,
        )

where do I put console.width - 6 to make it 6 cells narrower? can the progressbar be boxed somehow?

[glensc]

Solved with Panel and Live:

• https://github.com/Taxel/PlexTraktSync/pull/1717/files

Panel accepts width parameter, Live is needed to keep it rendered. Seems Progress internally uses Live, so didn't use Live before.

[github-actions]

I hope we solved your problem.

If you like using Rich, you might also enjoy Textual

[glensc]

@willmcgugan do you have an answer to my question:

How can I make the progressbar not so wide as whole terminal?

and have you checked my implementation? comments on that?