Textualize/textual

Width of Static is miscalulated when markup is used

Closed this issue · 10 comments

valentingregoire commented

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:
image

Example with markup:
image

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 commented

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 commented

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

valentingregoire commented

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 commented

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

valentingregoire commented

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:

image

valentingregoire commented

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 commented

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 commented

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 commented

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

darrenburns commented

@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.

  • 👍1