Dynamic widgets like Tooltip and Select sometimes fail to render some characters

[Kourion]

The Bug

When using some utf-8 characters like japanese 「ひらがなカタカナ漢字」 the rendering in certain widgets seems to break non-deterministically. That is for example for tooltips and the select widget, some characters will not be rendered some of the time. For tooltips for example hovering away and back to the widget with tooltip can fix the issue or cause other glyphs to fail to render.

Render failure is as follows, imagine we want to render the string "ひらがなカタカナ漢字" then sometimes this will be displayed as "ひらが　カタカナ漢字", or "ひらが　カタカナ　字" or "ひらがなカ　カナ漢字" or something like that. In essence the width of the string is retained, but some characters seem to be rendered as whitespace (they will have the background color).

I tried the following (none of these have helped):

• overriding the width calculation for the characters
• increase available space for the tooltips
• interleaving 0 space characters between the actual characters
• normalization via unicodedata.normalize
• wrapping the string in rich.text.Text
• wrapping the string in rich.pretty.Pretty

Reproduction

The tooltips in the following app will have this issue. Note however that this is only sometimes so repeated hovering over several tooltips will be necessary to show the issue. I estimate it occurs on 5-10% of attempts.

from textual import app
from textual import widgets
from textual import containers

class MyApp(app.App):

    CSS = """
        Label {
            background: $panel;
            padding: 1;
        }
    """

    def compose(self):
        # Create a label that, when hovered, shows our "tooltip".

        labels = []
        for i in range(10):
            label = widgets.Label("Hover over me!", id=f"label-{i}").with_tooltip(f"{i}ヶ月間の平均")
            labels.append(label)
        yield containers.VerticalGroup(*labels)

if __name__ == "__main__":
    app = MyApp()
    app.run()

Textual Diagnostics

textual diagnose

Versions

Name	Value
Textual	2.1.2
Rich	13.9.4

Python

Name	Value
Version	3.13.2
Implementation	CPython
Compiler	GCC 11.4.0
Executable	/home/kourion/git/textual-bug/venv/bin/python3.13

Operating System

Name	Value
System	Linux
Release	5.15.167.4-microsoft-standard-WSL2
Version	#1 SMP Tue Nov 5 00:21:55 UTC 2024

I confirmed the same bug on windows 11 powershell and windows 10 powershell.

Terminal

Name	Value
Terminal Application	Windows Terminal
TERM	xterm-256color
COLORTERM	Not set
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=124, height=38
legacy_windows	False
min_width	1
max_width	124
is_terminal	True
encoding	utf-8
max_height	38
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

Video

Here you can see that the string "4ヶ月間の平均" gets rendered as "4ヶ月間の　均"

textual-bug.mp4

[github-actions]

We found the following entries in the FAQ which you may find helpful:

• How do I center a widget in a screen?
• No widget called TextLog

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory