izackp/webterm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 0.5px overlap to background rects for sub-pixel gap elimination

Browse Source 
Background rects now extend 0.5px in both width and height to create
a slight overlap, eliminating visible sub-pixel gaps when viewing
SVG screenshots at high zoom levels.
This commit is contained in:
GitHub Copilot
2026-01-24 19:59:37 +00:00
parent 1f5e5c2c31
commit 3701a3df31
4 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Screenshot 2026-01-24 at 19.45.24.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

pyproject.toml
+1 -1
View File
@@ -1,6 +1,6 @@
[tool.poetry] [tool.poetry]
name = "textual-webterm" name = "textual-webterm"
version = "0.3.12" version = "0.3.13"
description = "Serve terminal sessions over the web" description = "Serve terminal sessions over the web"
authors = ["Will McGugan <will@textualize.io>"] authors = ["Will McGugan <will@textualize.io>"]
license = "MIT" license = "MIT"
src/textual_webterm/svg_exporter.py
+3 -2
View File
@@ -207,11 +207,12 @@ def render_terminal_svg(
char_cols = 2 # Wide character char_cols = 2 # Wide character
# Background rect if not default # Background rect if not default
# Add 0.5px overlap in both directions to eliminate sub-pixel gaps at high zoom
if bg != background: if bg != background:
bg_width = char_cols * char_width bg_width = char_cols * char_width + 0.5
row_bg_rects.append( row_bg_rects.append(
f'<rect x="{x:.1f}" y="{rect_y:.1f}" ' f'<rect x="{x:.1f}" y="{rect_y:.1f}" '
f'width="{bg_width:.1f}" height="{actual_line_height:.1f}" ' f'width="{bg_width:.1f}" height="{actual_line_height + 0.5:.1f}" '
f'fill="{bg}"/>' f'fill="{bg}"/>'
) )
tests/test_svg_exporter.py
+3 -3
View File
@@ -300,15 +300,15 @@ class TestRenderTerminalSvg:
self._char("", bg="red"), # Placeholder inherits bg self._char("", bg="red"), # Placeholder inherits bg
]] ]]
svg = render_terminal_svg(buffer, width=80, height=24, char_width=10.0) svg = render_terminal_svg(buffer, width=80, height=24, char_width=10.0)
# Background should span 2 columns (20px width) # Background should span 2 columns (20px width + 0.5px overlap)
assert f'fill="{ANSI_COLORS["red"]}"' in svg assert f'fill="{ANSI_COLORS["red"]}"' in svg
# Verify rect width is for 2 columns # Verify rect width is for 2 columns plus overlap
import re import re
rect_match = re.search(r'<rect[^>]*width="(\d+\.?\d*)"[^>]*fill="{}"/>' rect_match = re.search(r'<rect[^>]*width="(\d+\.?\d*)"[^>]*fill="{}"/>'
.format(ANSI_COLORS["red"]), svg) .format(ANSI_COLORS["red"]), svg)
assert rect_match is not None assert rect_match is not None
width = float(rect_match.group(1)) width = float(rect_match.group(1))
assert width == 20.0 # 2 columns * 10.0 char_width assert width == 20.5 # 2 columns * 10.0 char_width + 0.5 overlap
def test_background_same_as_terminal_bg_no_rect(self) -> None: def test_background_same_as_terminal_bg_no_rect(self) -> None:
"""Background same as terminal background doesn't create extra rect.""" """Background same as terminal background doesn't create extra rect."""