Skip to content

Commit 58bfa48

Browse files
willmcguganwillmcgugan
authored
Merge pull request #2288 from Textualize/svg-firefox
Firefox fixes for SVG
2 parents 1772458 + b423f74 commit 58bfa48

File tree

5 files changed

+40
-25
lines changed

5 files changed

+40
-25
lines changed

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [12.4.2] - 2022-05-23
9+
10+
### Fixed
11+
12+
- Fix for SVG on Firefox
13+
14+
### Changed
15+
16+
- Removed excess margin from SVG, tweaked cell sizes to better render block characters
17+
818
## [12.4.1] - 2022-05-08
919

1020
### Fixed

‎pyproject.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
name = "rich"
33
homepage = "https://github.com/willmcgugan/rich"
44
documentation = "https://rich.readthedocs.io/en/latest/"
5-
version = "12.4.1"
5+
version = "12.4.2"
66
description = "Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal"
77
authors = ["Will McGugan <[email protected]>"]
88
license = "MIT"

‎rich/_export_format.py

+3-2
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
5151
.{unique_id}-title {{
5252
font-size: 18px;
53-
5453
font-weight: bold;
5554
font-family: arial;
5655
}}
@@ -60,7 +59,9 @@
6059
{chrome}
6160
<g transform="translate({terminal_x}, {terminal_y})">
6261
{backgrounds}
63-
<text alignment-baseline="baseline" class="{unique_id}-matrix" font-variant="east-asian-width-values">{matrix}</text>
62+
<g class="{unique_id}-matrix">
63+
{matrix}
64+
</g>
6465
</g>
6566
</svg>
6667
"""

‎rich/console.py

+25-21
Original file line numberDiff line numberDiff line change
@@ -2282,18 +2282,18 @@ def get_svg_style(style: Style) -> str:
22822282

22832283
width = self.width
22842284
char_height = 20
2285-
char_width = char_height * 0.62
2286-
line_height = char_height * 1.32
2285+
char_width = char_height * 0.61
2286+
line_height = char_height * 1.22
22872287

2288-
margin_top = 20
2289-
margin_right = 16
2290-
margin_bottom = 20
2291-
margin_left = 16
2288+
margin_top = 1
2289+
margin_right = 1
2290+
margin_bottom = 1
2291+
margin_left = 1
22922292

22932293
padding_top = 40
2294-
padding_right = 12
2294+
padding_right = 8
22952295
padding_bottom = 12
2296-
padding_left = 12
2296+
padding_left = 8
22972297

22982298
padding_width = padding_left + padding_right
22992299
padding_height = padding_top + padding_bottom
@@ -2385,16 +2385,18 @@ def stringify(value: object) -> str:
23852385
height=line_height + 1,
23862386
)
23872387
)
2388-
text_group.append(
2389-
make_tag(
2390-
"tspan",
2391-
escape_text(text),
2392-
_class=f"{unique_id}-{class_name}",
2393-
x=x * char_width,
2394-
y=y * line_height + char_height,
2395-
textLength=char_width * len(text),
2388+
2389+
if text != " " * len(text):
2390+
text_group.append(
2391+
make_tag(
2392+
"text",
2393+
escape_text(text),
2394+
_class=f"{unique_id}-{class_name}",
2395+
x=x * char_width,
2396+
y=y * line_height + char_height,
2397+
textLength=char_width * len(text),
2398+
)
23962399
)
2397-
)
23982400
x += cell_len(text)
23992401

24002402
styles = "\n".join(
@@ -2421,17 +2423,19 @@ def stringify(value: object) -> str:
24212423
if title:
24222424
chrome += make_tag(
24232425
"text",
2424-
title,
2426+
escape_text(title),
24252427
_class=f"{unique_id}-title",
24262428
fill=title_color,
24272429
text_anchor="middle",
24282430
x=terminal_width // 2,
24292431
y=margin_top + char_height + 6,
24302432
)
24312433
chrome += f"""
2432-
<circle cx="40" cy="40" r="7" fill="#ff5f57"/>
2433-
<circle cx="62" cy="40" r="7" fill="#febc2e"/>
2434-
<circle cx="84" cy="40" r="7" fill="#28c840"/>
2434+
<g transform="translate(30,24)">
2435+
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
2436+
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
2437+
<circle cx="44" cy="0" r="7" fill="#28c840"/>
2438+
</g>
24352439
"""
24362440

24372441
svg = code_format.format(

‎tests/test_console.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -494,7 +494,7 @@ def test_export_html_inline():
494494
assert html == expected
495495

496496

497-
EXPECTED_SVG = '<svg class="rich-terminal" viewBox="0 0 1296 118.4" xmlns="http://www.w3.org/2000/svg">\n <!-- Generated with Rich https://www.textualize.io -->\n <style>\n\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Regular"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");\n font-style: normal;\n font-weight: 400;\n }\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Bold"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");\n font-style: bold;\n font-weight: 700;\n }\n\n .terminal-614794459-matrix {\n font-family: Fira Code, monospace;\n font-size: 20px;\n line-height: 26.400000000000002px;\n font-variant-east-asian: full-width;\n }\n\n .terminal-614794459-title {\n font-size: 18px;\n\n font-weight: bold;\n font-family: arial;\n }\n\n .terminal-614794459-r1 { fill: #608ab1;font-weight: bold }\n.terminal-614794459-r2 { fill: #c5c8c6 }\n </style>\n <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="16" y="20" width="1264" height="78.4" rx="12"/><text class="terminal-614794459-title" fill="#c5c8c6" text-anchor="middle" x="632" y="46">Rich</text>\n <circle cx="40" cy="40" r="7" fill="#ff5f57"/>\n <circle cx="62" cy="40" r="7" fill="#febc2e"/>\n <circle cx="84" cy="40" r="7" fill="#28c840"/>\n \n <g transform="translate(28, 60)">\n <rect fill="#cc555a" x="0" y="0" width="38.2" height="27.4"/>\n <text alignment-baseline="baseline" class="terminal-614794459-matrix" font-variant="east-asian-width-values"><tspan class="terminal-614794459-r1" x="0" y="20" textLength="37.2">foo</tspan><tspan class="terminal-614794459-r2" x="37.2" y="20" textLength="12.4">&#160;</tspan><tspan class="terminal-614794459-r2" x="49.6" y="20" textLength="62">Click</tspan><tspan class="terminal-614794459-r2" x="111.6" y="20" textLength="1128.4">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</tspan><tspan class="terminal-614794459-r2" x="1240" y="20" textLength="12.4">\n</tspan></text>\n </g>\n</svg>\n'
497+
EXPECTED_SVG = '<svg class="rich-terminal" viewBox="0 0 1238 78.4" xmlns="http://www.w3.org/2000/svg">\n <!-- Generated with Rich https://www.textualize.io -->\n <style>\n\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Regular"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");\n font-style: normal;\n font-weight: 400;\n }\n @font-face {\n font-family: "Fira Code";\n src: local("FiraCode-Bold"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),\n url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");\n font-style: bold;\n font-weight: 700;\n }\n\n .terminal-614794459-matrix {\n font-family: Fira Code, monospace;\n font-size: 20px;\n line-height: 24.4px;\n font-variant-east-asian: full-width;\n }\n\n .terminal-614794459-title {\n font-size: 18px;\n font-weight: bold;\n font-family: arial;\n }\n\n .terminal-614794459-r1 { fill: #608ab1;font-weight: bold }\n.terminal-614794459-r2 { fill: #c5c8c6 }\n </style>\n <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1236" height="76.4" rx="12"/><text class="terminal-614794459-title" fill="#c5c8c6" text-anchor="middle" x="618" y="27">Rich</text>\n <g transform="translate(30,24)">\n <circle cx="0" cy="0" r="7" fill="#ff5f57"/>\n <circle cx="22" cy="0" r="7" fill="#febc2e"/>\n <circle cx="44" cy="0" r="7" fill="#28c840"/>\n </g>\n \n <g transform="translate(9, 41)">\n <rect fill="#cc555a" x="0" y="0" width="37.6" height="25.4"/>\n <g class="terminal-614794459-matrix">\n <text class="terminal-614794459-r1" x="0" y="20" textLength="36.6">foo</text><text class="terminal-614794459-r2" x="48.8" y="20" textLength="61">Click</text><text class="terminal-614794459-r2" x="1220" y="20" textLength="12.2">\n</text>\n </g>\n </g>\n</svg>\n'
498498

499499

500500
def test_export_svg():

0 commit comments

Comments
 (0)