Merge pull request #2289 from Textualize/svg-tweak

Svg tweak

Author: willmcgugan

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [12.4.3] - 2022-05-23
+
+### Changed
+
+- Further tweaks to SVG character matrix
+- Added clip rect to SVG to prevent box characters overlapping bottom of terminal
+
 ## [12.4.2] - 2022-05-23
 
 ### Fixed

pyproject.toml

@@ -2,7 +2,7 @@
 name = "rich"
 homepage = "https://github.com/willmcgugan/rich"
 documentation = "https://rich.readthedocs.io/en/latest/"
-version = "12.4.2"
+version = "12.4.3"
 description = "Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal"
 authors = ["Will McGugan <[email protected]>"]
 license = "MIT"

rich/_export_format.py

@@ -56,8 +56,15 @@
 
     {styles}
     </style>
+
+    <defs>
+    <clipPath id="{unique_id}-clip-terminal">
+      <rect x="0" y="0" width="{terminal_width}" height="{terminal_height}" />
+    </clipPath>
+    </defs>
+
     {chrome}
-    <g transform="translate({terminal_x}, {terminal_y})">
+    <g transform="translate({terminal_x}, {terminal_y})" clip-path="url(#{unique_id}-clip-terminal)">
     {backgrounds}
     <g class="{unique_id}-matrix">
     {matrix}

rich/console.py

@@ -2292,7 +2292,7 @@ def get_svg_style(style: Style) -> str:
 
         padding_top = 40
         padding_right = 8
-        padding_bottom = 12
+        padding_bottom = 8
         padding_left = 8
 
         padding_width = padding_left + padding_right
@@ -2380,9 +2380,9 @@ def stringify(value: object) -> str:
                             "rect",
                             fill=background,
                             x=x * char_width,
-                            y=y * line_height,
-                            width=char_width * text_length + 1,
-                            height=line_height + 1,
+                            y=y * line_height + 1.5,
+                            width=char_width * text_length,
+                            height=line_height + 0.25,
                         )
                     )
 
@@ -2416,7 +2416,7 @@ def stringify(value: object) -> str:
             y=margin_top,
             width=terminal_width,
             height=terminal_height,
-            rx=12,
+            rx=8,
         )
 
         title_color = _theme.foreground_color.hex
@@ -2431,7 +2431,7 @@ def stringify(value: object) -> str:
                 y=margin_top + char_height + 6,
             )
         chrome += f"""
-            <g transform="translate(30,24)">
+            <g transform="translate(26,22)">
             <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
             <circle cx="22" cy="0" r="7" fill="#febc2e"/>
             <circle cx="44" cy="0" r="7" fill="#28c840"/>
@@ -2443,6 +2443,8 @@ def stringify(value: object) -> str:
             char_width=char_width,
             char_height=char_height,
             line_height=line_height,
+            terminal_width=char_width * width,
+            terminal_height=(y + 1) * line_height,
             width=terminal_width + margin_width,
             height=terminal_height + margin_height,
             terminal_x=margin_left + padding_left,

tests/test_console.py

@@ -494,7 +494,7 @@ def test_export_html_inline():
     assert html == expected
 
 
-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'
+EXPECTED_SVG = '<svg class="rich-terminal" viewBox="0 0 1238 74.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\n    <defs>\n    <clipPath id="terminal-614794459-clip-terminal">\n      <rect x="0" y="0" width="1220.0" height="24.4" />\n    </clipPath>\n    </defs>\n\n    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="1236" height="72.4" rx="8"/><text class="terminal-614794459-title" fill="#c5c8c6" text-anchor="middle" x="618" y="27">Rich</text>\n            <g transform="translate(26,22)">\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)" clip-path="url(#terminal-614794459-clip-terminal)">\n    <rect fill="#cc555a" x="0" y="1.5" width="36.6" height="24.65"/>\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'
 
 
 def test_export_svg():