Width of Static is miscalulated when markup is used

[valentingregoire]

When adding markup to a text in a Static (markup=True), then the width of the text is based on the content with the style characters.

Example without markup:

Example with markup:

I think the width is calculated by the amount of characters (columns) before parsing. Perhaps if markup=True, the width can be calculated after parsing?

[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

[TomJGooding]

What version of Textual are you using? I seem to remember this issue (or something like it) was fixed a few months back.

[valentingregoire]

Version info:

rich              13.7.1 Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal
textual           0.54.0 Modern Text User Interface framework
textual-dev       1.5.1  Development tools for working with Textual

[TomJGooding]

Thanks, could you possibly provide a minimal reproducible example (MRE): i.e. a short piece of code that can reproduce the issue?

[valentingregoire]

Here you go:

from rich.style import Style
from textual.app import App, ComposeResult
from textual.widgets import Static


class BorkedApp(App):
    """The main application class for the Songbook TUI."""

    text = "Hello, world!"
    style = Style(bgcolor="#333333", bold=True)
    text_styled = style.render(text)

    CSS_PATH = "app.tcss"
    DEFAULT_CSS = """
        Static {
            width: auto;
            border: round green;
        }
    """
    BINDINGS = [("q", "exit", "Quit")]

    def compose(self) -> ComposeResult:
        """Compose the main application."""
        yield Static(self.text)
        yield Static(self.text_styled)


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

Result:

[valentingregoire]

This also causes some weird see-through issues with the screen below btw. I can solve that by adding another entire black screen behind, it's just inconvenient, but I might open up a separate ticket for that.

[TomJGooding]

Style.render from Rich returns the ANSI style codes. I thought you were talking about using console markup? Try instead simply something like the below:

styled_text = "[green bold]Hello World[/]"

[valentingregoire]

You are right, this works well. Styling with Style objects is then not what is supposed to be done, thanks for the info!

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[darrenburns]

@valentingregoire You can style with Style objects e.g. Text("hello", style=Style(...)). Then you can shove that inside a Static as you were doing before.