Grapheme clusters width miscalculation

[haliphax]

It seems as though grapheme clusters (e.g. anything using skin tone modifiers, emoji variant selector, flags, etc.) are not properly accounted for when calculating the width of things. In the example program below, the scroll bar on initial load looks like a jagged mess. While it will smooth out after scrolling around a bit, a periodic refresh will break it again. I have seen some similar issues with placement of widgets on top of widgets containing grapheme clusters, as well (e.g. modal screens).

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widgets import Static


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        yield VerticalScroll(Static())

    def on_mount(self) -> None:
        widget = self.query_one(Static)
        widget.update("Grapheme clusters ✌️ 🧑‍🚒\n\n" * self.size.height)


if __name__ == "__main__":
    ExampleApp().run()

[github-actions]

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

• How do I center a widget in a screen?
• How do I pass arguments to an app?

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

[haliphax]

Example with overlaying widgets:

[TomJGooding]

Unfortunately there's nothing Textual can do about it, based on a reply by @willmcgugan to this similar issue #3040 about emojis:

I'm assuming this is just a classic emoji issue. Terminals don't agree on how wide they should be. Not much we can do about it alas.

[willmcgugan]

Yes, terminals render multi-codepoint emojis differently. And there is no way to know exactly how they will render