Emojis in footer on Windows cause artifacts in the interface

[mzebrak]

Description

Here are some screenshots about what I mean:

After pushing screen (We can observe, there is an additional line below):

And when hovering over footer buttons (all you need is f10, no need to hover over the emoji):

This is only observable on the Windows platform. (Windows Termnial app). While using MobaXterm on Windows, this does not appear. Also, everything is fine on Ubuntu 22.04 with the x-terminal-emulator (terminator).

Here's the output of textual diagnose from the problematic Windows using Windows Terminal. Also, we already checked and this problem still occurs with 0.30.0, so please do not bother with the version in the log below:

Textual Diagnostics

Versions

Name	Value
Textual	0.17.3
Rich	13.3.5

Python

Name	Value
Version	3.10.6
Implementation	CPython
Compiler	GCC 11.3.0
Executable	/home/admin/.cache/pypoetry/virtualenvs/venv-lNdCDQsZ-py3.10/bin/python

Operating System

Name	Value
System	Linux
Release	5.15.90.1-microsoft-standard-WSL2
Version	#1 SMP Fri Jan 27 02:56:13 UTC 2023

Terminal

Name	Value
Terminal Application	Unknown
TERM	xterm
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

[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

[davep]

Do you think you could give a minimal example bit of code, that can run stand-alone, that we can test, so we know we're testing the same thing as you?

[mzebrak]

Do you think you could give a minimal example bit of code, that can run stand-alone, that we can test, so we know we're testing the same thing as you?

Here's the example:

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.widgets import Footer, Header, Placeholder


class MyApp(App[None]):
    BINDINGS = [
        Binding("enter", "enter", "🗑️"),
    ]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Placeholder("Hello, world!")
        yield Footer()

    def action_enter(self) -> None:
        pass


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

I've observed it on Windows 11:

Using Windows Terminal

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 0.30.0 |
| Rich    | 13.5.1 |

## Python

| Name           | Value                                                                      |
|----------------|----------------------------------------------------------------------------|
| Version        | 3.10.6                                                                     |
| Implementation | CPython                                                                    |
| Compiler       | MSC v.1932 64 bit (AMD64)                                                  |
| Executable     | C:\Users\vboxuser\Desktop\1workspace\textual-tests\venv\Scripts\python.exe |

## Operating System

| Name    | Value      |
|---------|------------|
| System  | Windows    |
| Release | 10         |
| Version | 10.0.22621 |

## Terminal

| Name                 | Value            |
|----------------------|------------------|
| Terminal Application | Windows Terminal |
| TERM                 | *Not set*        |
| COLORTERM            | *Not set*        |
| FORCE_COLOR          | *Not set*        |
| NO_COLOR             | *Not set*        |

## Rich Console options

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

And mintty (via git bash)

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 0.30.0 |
| Rich    | 13.5.1 |

## Python

| Name           | Value                                                                      |
|----------------|----------------------------------------------------------------------------|
| Version        | 3.10.6                                                                     |
| Implementation | CPython                                                                    |
| Compiler       | MSC v.1932 64 bit (AMD64)                                                  |
| Executable     | C:\Users\vboxuser\Desktop\1workspace\textual-tests\venv\Scripts\python.exe |

## Operating System

| Name    | Value      |
|---------|------------|
| System  | Windows    |
| Release | 10         |
| Version | 10.0.22621 |

## Terminal

| Name                 | Value          |
|----------------------|----------------|
| Terminal Application | mintty (3.6.4) |
| TERM                 | xterm          |
| COLORTERM            | *Not set*      |
| FORCE_COLOR          | *Not set*      |
| NO_COLOR             | *Not set*      |

## Rich Console options

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

[willmcgugan]

Emojis tend to render differently across platforms. Windows in particular struggles with certain emoji.

There's not much Textual can do about that I'm afraid. It's best to stick to emojis that are in the Unicode 9 database, or stick to plain text.

[davep]

Looks to be an issue with kitty on macOS too:

Terminal.app, iTerm and WezTerm seem fine, on the other hand.

[mzebrak]

So it's not just Windows that's the problem here.

Emojis tend to render differently across platforms. Windows in particular struggles with certain emoji.

There's not much Textual can do about that I'm afraid. It's best to stick to emojis that are in the Unicode 9 database, or stick to plain text.

Do you mean all up to Unicode 9 i.e. 1,2,...,9? Is each new version an extension of the previous one?
if so,

Wastebasket was approved as part of Unicode 7.0 in 2014 and added to Emoji 1.0 in 2015.

so, in theory, should be compatible.

[TomJGooding]

Try just pasting a bunch of wastebaskets in your terminal. Do you see anything strange with the cursor position and if you press backspace to delete?

[willmcgugan]

I'm assuming this is just a classic emoji issue. Terminals don't agree on how wide they should be. Not much we can do about it alas.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.