Rendering issue with soft hyphens (~~long/wrapped text in `OptionList`~~)

[davep]

At the suggestion of @willmcgugan I'm recording this without an MRE (although I have tried to make one; see below). In an application I'm currently toying with, over the weekend, I ran into this curious rendering bug:

Note the effect seen to the right of question 9.

The widget is an OptionList, the Options within are made up of Rich renderables which in turn are made up of a Group that contains two Table.grids.

I've attempted to isolate the issue from the wider application, adding all the relevant styles (also doing it as a ModalScreen as this was part of such):

from rich.table import Table
from rich.console import Group

from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.screen import ModalScreen
from textual.widgets import OptionList

NAMES = [
    "Cardiff",
    "Swansea",
    "Aberdare",
    "Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch",
    "Mountain Ash",
    "Hirwaun"
]

class Names(ModalScreen[None]):

    CSS = """
    Names {
        align: center middle;

        Vertical {
            width: auto;
            max-width: 60%;
            height: auto;
            max-height: 80%;
            padding: 1 2 0 2;
            background: $surface;
            border: panel $primary;
            border-title-color: $accent;

            OptionList {
                height: 1fr;
                margin: 1 0 1 0;
                &> .option-list--option {
                    padding: 0 5 1 0;
                }
            }
        }
    }
    """

    def gridify(self, n: int, name: str) -> Group:
        question = Table.grid()
        question.add_column(width=3, justify="right")
        question.add_column(width=1)
        question.add_column(ratio=1)
        question.add_row(str(n), "", f"{name} is the name of a place in Wales." )
        answer = Table.grid()
        answer.add_column(width=4)
        answer.add_column(ratio=1)
        answer.add_row("", "[red]Here is the[/] [green]second line[/]")
        return Group(question, answer)

    def compose(self) -> ComposeResult:
        with Vertical():
            yield OptionList(*[self.gridify(n, name) for n, name in enumerate(NAMES)])

class TruncatedTextOptionApp(App[None]):

    CSS = """
    Screen#_default {
        background: red;
    }
    """

    def on_mount(self) -> None:
        self.push_screen(Names())

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

the result however seems fine:

[davep]

Update: I'm starting to suspect it doesn't have much to do with long/wrapped text at all, and it could be there is a problematic character or similar in the underlying data. I'm thinking this based on the fact that, while testing/developing some more just now, I got the same issue, only this time, if I make the window wide enough that the suspect word itself doesn't overflow, I still see the rendering issue:

I'll leave this open for now and see if I can hunt down the question itself (it's simply pulled down from the API and used in-app; no copy is stored locally, so I an't view the underlying data), but this seems less of an issue now.

[davep]

Found it. And if I copy the question from the web view and paste it into a scratch buffer in Emacs:

Inspecting what it is:

[davep]

And, just for final confirmation, plugging that into the test code above:

[willmcgugan]

Good catch. Soft hyphens. Zero length, they indicate where the word is permitted to wrap.

Rich is reporting them as having a length of 1, where they should have a cell length of 0.

[davep]

We should make @darrenburns's day by plugging this into soft-wrapped TextArea. 😏

[willmcgugan]

I think this may be fixable from Rich. If you tackle this, ask @willmcgugan for an overview of how Rich calculates cell lengths.