Rendering widgets with differences in different terminals

[shamyjun22]

I built a simple tool with textual and I just notice differences how the widget is rendered when running locally with WSL Ubuntu and using Amazon Linux on prod.

Local machine:
NAME="Ubuntu"
VERSION="20.04.6 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.6 LTS"

Prod:
NAME="Amazon Linux"
VERSION="2023"
ID="amzn"
ID_LIKE="fedora"
VERSION_ID="2023"
PRETTY_NAME="Amazon Linux 2023.5.20240903"

By the way, it's just a small differences but i would assume that both local and prod would look the same. But it's not.
Is it a bug or just a problem with the virtual machines?

Hopefully, will get a response. Thanks.

[github-actions]

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

• Why doesn't Textual look good on macOS?
• How do I center a widget in a screen?
• Does Textual support images?
• How can I set a translucent app background?

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

[TomJGooding]

The rendering will depend on the terminal emulator and the capabilities advertised through environment variables like COLORTERM.

As mentioned in the issue template, it might be helpful if you run the following command and paste the results:

textual diagnose

If you don't have the textual command on your path, you may have forgotten to install the textual-dev package.

[shamyjun22]

Hi @TomJGooding, I think you are correct. I will the vm when I can access it.

Here is my local diagnose:

Versions

Name	Value
Textual	2.0.0
Rich	13.7.1

Python

Name	Value
Version	3.11.7
Implementation	CPython
Compiler	GCC 9.4.0
Executable	/home/leasmolojr/Python3.11/bin/python3.11

Operating System

Name	Value
System	Linux
Release	5.15.167.4-microsoft-standard-WSL2
Version	#1 SMP Tue Nov 5 00:21:55 UTC 2024

Terminal

Name	Value
Terminal Application	Unknown
TERM	xterm-256color
COLORTERM	Not set
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=156, height=47
legacy_windows	False
min_width	1
max_width	156
is_terminal	True
encoding	utf-8
max_height	47
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

By the way, the problem I had is with the border with the Input and Select widget. I set it to:
border: round dodgerblue 90%;

Is it affected?
Thanks.

[willmcgugan]

There are differences between terminals, but I will need screenshots to suggest what is expected and what isn't.

[zed]

Here's an example: radio buttons are truncated on Ubuntu 24.04 in GNOME terminal:

where app.py:

#!/usr/bin/env -S uv run --script
# /// script
# requires-python = ">=3.11"
# dependencies = [
#     "textual",
# ]
# ///
from textual.app import App, ComposeResult
from textual.widgets import RadioButton, RadioSet


class TruncatedRadioButtonApp(App):
    def compose(self) -> ComposeResult:
        with RadioSet():
            yield RadioButton(label="<- inner button may be truncated")

    def on_mount(self) -> None:
        self.title = "Truncated Radio Button Example"

if __name__ == "__main__":
    app = TruncatedRadioButtonApp()
    app.run(inline=True)

It may be reproduced using bash:

A workaround is to use a different font in the terminal emulator e.g., DejaVu Sans Mono works fine.

$ echo -e '\u2590\u25cf\u258c'
▐●▌

There is also Compatibility -> Ambiguous-width characters: Narrow/Wide setting. "Wide" fixes radio button display but breaks other things. The help says that "Narrow" (default) should be used for ASCII art type of apps (textual case).

[willmcgugan]

Terminals do unfortunately have differences in rendering. Either from bugs or configuration.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.