Double-width character measured incorrectly when in background of modal screen

[darrenburns]

Unconfirmed and no MRE yet, just spotted it while upgrading Elia:

(It also seems to flicker a bit)

[kwevin]

Can confirm, some Japanese characters especially https://en.wikipedia.org/wiki/Dakuten_and_handakuten (U+3099 and U+309A) will cause this issue. I come across them fairly often in my application so if you need more samples, let me know.

from textual.app import App, ComposeResult
from textual.containers import Center, Grid, Middle
from textual.screen import ModalScreen
from textual.widgets import Button, Label, Static


class QuitScreen(ModalScreen[None]):
    DEFAULT_CSS = """
    QuitScreen {
        align: center middle;
    }

    #dialog {
        grid-size: 2;
        grid-gutter: 1 2;
        grid-rows: 1fr 3;
        padding: 0 1;
        width: 60;
        height: 11;
        border: thick $primary 80%;
        background: $surface;
    }

    #question {
        column-span: 2;
        height: 1fr;
        width: 1fr;
        content-align: center middle;
    }

    Button {
        width: 100%;
    }
"""

    """Screen with a dialog to quit."""

    def compose(self) -> ComposeResult:
        yield Grid(
            Label("Are you sure you want to quit?", id="question"),
            Button("Quit", variant="error", id="quit"),
            Button("Cancel", variant="primary", id="cancel"),
            id="dialog",
        )

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == "quit":
            self.app.exit()
        else:
            self.app.pop_screen()


class MyApp(App[None]):
    def compose(self) -> ComposeResult:
        yield Middle(Center(Static("早乙女リリエル (CV: 徳井青）")))

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


app = MyApp()
app.run()

[darrenburns]

Thanks for the MRE @kwevin! I'm pretty sure it's unrelated to dakuten though as I see this problem regardless of whether there's one present (e.g. your own example).

[willmcgugan]

Issue was upstream in Rich (Textualize/rich#3506). Bloody amateurs!

New Rich release coming soon. Will be magically fixed then.

[darrenburns]

Classic Rich devs 🙄

[willmcgugan]

Alignment fixed in Rich, but found a second issue. Styles weren't being applied to a base screen if you can push_screen in on_mount. This was only visible if you are pushing a modal screen.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.