Extra space when saved to SVG

[davidbrochart]

Running the DirectoryTree widget example gives this:

But when saved to SVG with the command palette, an extra space is added:

# Textual Diagnostics

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 0.77.0 |
| Rich    | 13.7.1 |

## Python

| Name           | Value                                                                     |
|----------------|---------------------------------------------------------------------------|
| Version        | 3.12.5                                                                    |
| Implementation | CPython                                                                   |
| Compiler       | GCC 12.4.0                                                                |
| Executable     | /home/david/.local/share/hatch/env/virtual/jpterm/N1y3coPp/dev/bin/python |

## Operating System

| Name    | Value                                                       |
|---------|-------------------------------------------------------------|
| System  | Linux                                                       |
| Release | 6.8.0-40-generic                                            |
| Version | #40-Ubuntu SMP PREEMPT_DYNAMIC Fri Jul  5 10:34:03 UTC 2024 |

## Terminal

| Name                 | Value                              |
|----------------------|------------------------------------|
| Terminal Application | WezTerm (20240203-110809-5046fc22) |
| TERM                 | xterm-256color                     |
| COLORTERM            | truecolor                          |
| FORCE_COLOR          | *Not set*                          |
| NO_COLOR             | *Not set*                          |

## Rich Console options

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

[github-actions[bot]]

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]

It looks like this may be some weird interaction between the emoji and the added style for the extension - presumably the usual issue of emoji widths? If you remove the styling for the extension, the screenshot no longer shows that empty space.

I didn't think the screenshots in the docs had this empty space before, so I quickly checked the history using git bisect. It looks like this was introduced with the normalisation of the SVGs in #4675.

from textual.app import App, ComposeResult
from textual.widgets import DirectoryTree

class DirectoryTreeApp(App):
    CSS = """
    DirectoryTree > .directory-tree--extension {
        text-style: none;
    }
    """

    def compose(self) -> ComposeResult:
        yield DirectoryTree("./")

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

[willmcgugan]

That rings a bell. It is an issue with Textual's notion of character widths not matching the browser's.

Segments are positioned according to where Textual things the character starts. When segments are combined, it can result in emoji not being where you would expect.

The normalization of segments is a good thing for tests. It means that inconsequential changes don't break all the snapshots. But it can produce lower quality SVGs.

I think the solution may be to offer the normalization on a switch, so that screenshots are exported without it, but tests are still normalized.

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.