Merge branch 'master' of github.com:Textualize/rich into render-heigh…

…t-fix
Textualize · May 3, 2022 · 7dd4b96 · 7dd4b96
2 parents 49d4c92 + da3d59d
commit 7dd4b96
Show file tree

Hide file tree

Showing 11 changed files with 891 additions and 1,296 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ 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).
 
+## [Unreleased]
+
+### Changed
+
+- Change SVG export to create a simpler SVG
+
 ## [12.3.0] - 2022-04-26
 
 ### Added

diff --git a/docs/images/svg_export.svg b/docs/images/svg_export.svg
diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -19,7 +19,6 @@
 
 
 import pkg_resources
-
 import sphinx_rtd_theme
 
 html_theme = "sphinx_rtd_theme"
@@ -72,3 +71,7 @@
 intersphinx_mapping = {"python": ("http://docs.python.org/3", None)}
 
 autodoc_typehints = "description"
+
+html_css_files = [
+    "https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/fira_code.min.css"
+]
diff --git a/docs/source/console.rst b/docs/source/console.rst
@@ -278,7 +278,10 @@ You can customize the theme used during SVG export by importing the desired them
     console = Console(record=True)
     console.save_svg("example.svg", theme=MONOKAI)
 
-Alternatively, you can create a them of your own by constructing a :class:`rich.terminal_theme.TerminalTheme` instance yourself and passing that in.
+Alternatively, you can create a theme of your own by constructing a :class:`rich.terminal_theme.TerminalTheme` instance yourself and passing that in.
+
+.. note::
+    The SVGs reference the Fira Code font. If you embed a Rich SVG in your page, you may also want to add a link to the `Fira Code CSS <https://cdnjs.com/libraries/firacode>`_
 
 Error console
 -------------

diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -40,7 +40,7 @@ jupyter = ["ipywidgets"]
 [tool.poetry.dev-dependencies]
 pytest = "^7.0.0"
 black = "^22.3"
-mypy = "^0.942"
+mypy = "^0.950"
 pytest-cov = "^3.0.0"
 attrs = "^21.4.0"
 types-dataclasses = "^0.6.4"

diff --git a/rich/_export_format.py b/rich/_export_format.py
@@ -20,123 +20,47 @@
 """
 
 CONSOLE_SVG_FORMAT = """\
-<svg width="{total_width}" height="{total_height}" viewBox="0 0 {total_width} {total_height}"
-     xmlns="http://www.w3.org/2000/svg">
+<svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
     <style>
-        @font-face {{
-            font-family: "{font_family}";
-            src: local("FiraCode-Regular"),
-                 url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
-                 url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
-            font-style: normal;
-            font-weight: 400;
-        }}
-        @font-face {{
-            font-family: "{font_family}";
-            src: local("FiraCode-Bold"),
-                 url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
-                 url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
-            font-style: bold;
-            font-weight: 700;
-        }}
-        .{classes_prefix}-terminal-wrapper span {{
-            display: inline-block;
-            white-space: pre;
-            vertical-align: top;
-            font-size: {font_size}px;
-            font-family:'{font_family}','Cascadia Code',Monaco,Menlo,'DejaVu Sans Mono',consolas,'Courier New',monospace;
-        }}
-        .{classes_prefix}-terminal-wrapper a {{
-            text-decoration: none;
-            color: inherit;
-        }}
-        .{classes_prefix}-terminal-body .blink {{
-           animation: {classes_prefix}-blinker 1s infinite;
-        }}
-        @keyframes {classes_prefix}-blinker {{
-            from {{ opacity: 1.0; }}
-            50% {{ opacity: 0.3; }}
-            to {{ opacity: 1.0; }}
-        }}
-        .{classes_prefix}-terminal-wrapper {{
-            padding: {margin}px;
-            padding-top: 100px;
-        }}
-        .{classes_prefix}-terminal {{
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            background-color: {theme_background_color};
-            border-radius: 14px;
-            box-shadow: 0 0 0 1px #484848;
-        }}
-        .{classes_prefix}-terminal:after {{
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            content: '';
-            border-radius: 14px;
-            background: rgb(71,77,102);
-            background: linear-gradient(90deg, #804D69 0%, #4E4B89 100%);
-            transform: rotate(-4.5deg);
-            z-index: -1;
-        }}
-        .{classes_prefix}-terminal-header {{
-            position: relative;
-            width: 100%;
-            background-color: #2e2e2e;
-            margin-bottom: 12px;
-            font-weight: bold;
-            border-radius: 14px 14px 0 0;
-            color: {theme_foreground_color};
-            font-size: 18px;
-            box-shadow: inset 0px -1px 0px 0px #4e4e4e,
-                        inset 0px -4px 8px 0px #1a1a1a;
-        }}
-        .{classes_prefix}-terminal-title-tab {{
-            display: inline-block;
-            margin-top: 14px;
-            margin-left: 124px;
-            font-family: sans-serif;
-            padding: 14px 28px;
-            border-radius: 6px 6px 0 0;
-            background-color: {theme_background_color};
-            box-shadow: inset 0px 1px 0px 0px #4e4e4e,
-                        0px -4px 4px 0px #1e1e1e,
-                        inset 1px 0px 0px 0px #4e4e4e,
-                        inset -1px 0px 0px 0px #4e4e4e;
-        }}
-        .{classes_prefix}-terminal-traffic-lights {{
-            position: absolute;
-            top: 24px;
-            left: 20px;
-        }}
-        .{classes_prefix}-terminal-body {{
-            line-height: {line_height}px;
-            padding: 14px;
-        }}
-        {stylesheet}
+
+    @font-face {{
+        font-family: "Fira Code";
+        src: local("FiraCode-Regular"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+        font-style: normal;
+        font-weight: 400;
+    }}
+    @font-face {{
+        font-family: "Fira Code";
+        src: local("FiraCode-Bold"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+        font-style: bold;
+        font-weight: 700;
+    }}
+
+    .{unique_id}-matrix {{
+        font-family: Fira Code, monospace;
+        font-size: {char_height}px;
+        font-variant: east-asian-width-values;
+        line-height: {line_height}px;
+    }}
+
+    .{unique_id}-title {{
+        font-size: 18px;
+        opacity: 0.8;
+        font-weight: bold;
+        font-family: arial;
+    }}
+
+    {styles}
     </style>
-    <foreignObject x="0" y="0" width="100%" height="100%">
-        <body xmlns="http://www.w3.org/1999/xhtml">
-            <div class="{classes_prefix}-terminal-wrapper">
-                <div class="{classes_prefix}-terminal">
-                    <div class="{classes_prefix}-terminal-header">
-                        <svg class="{classes_prefix}-terminal-traffic-lights" width="90" height="21" viewBox="0 0 90 21" xmlns="http://www.w3.org/2000/svg">
-                            <circle cx="14" cy="8" r="8" fill="#ff6159"/>
-                            <circle cx="38" cy="8" r="8" fill="#ffbd2e"/>
-                            <circle cx="62" cy="8" r="8" fill="#28c941"/>
-                        </svg>
-                        <div class="{classes_prefix}-terminal-title-tab">{title}</div>
-                    </div>
-                    <div class="{classes_prefix}-terminal-body">
-                        {code}
-                    </div>
-                </div>
-            </div>
-        </body>
-    </foreignObject>
+    {chrome}
+    <g transform="translate({terminal_x}, {terminal_y})">
+    {backgrounds}
+    <text alignment-baseline="baseline" class="{unique_id}-matrix" font-variant="east-asian-width-values">{matrix}</text>
+    </g>
 </svg>
 """