From c4f23bf4b37cb0ed4b42fb723a65b5ad78e9c661 Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Wed, 22 Feb 2023 16:34:38 -0600
Subject: [PATCH] LaTeX fix attempt #2 (#3276)

* latex fix 2

* fix latex height

* latex

* fix test

* avoid hardcoding
---
 CHANGELOG.md                             | 2 +-
 gradio/utils.py                          | 8 ++++++--
 test/test_components.py                  | 2 +-
 ui/packages/markdown/src/Markdown.svelte | 1 -
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21eaa2cea1..7416b85911 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@
 - Ensure `mirror_webcam` is always respected by [@pngwn](https://github.com/pngwn) in [PR 3245](https://github.com/gradio-app/gradio/pull/3245)
 - Fix issue where updated markdown links were not being opened in a new tab by [@gante](https://github.com/gante) in [PR 3236](https://github.com/gradio-app/gradio/pull/3236)
 - Added a timeout to queue messages as some demos were experiencing infinitely growing queues from active jobs waiting forever for clients to respond by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3196](https://github.com/gradio-app/gradio/pull/3196)
-- Fixes the height of rendered LaTeX images so that they match the height of surrounding text by [@abidlabs](https://github.com/abidlabs) in [PR 3258](https://github.com/gradio-app/gradio/pull/3258)
+- Fixes the height of rendered LaTeX images so that they match the height of surrounding text by [@abidlabs](https://github.com/abidlabs) in [PR 3258](https://github.com/gradio-app/gradio/pull/3258) and in [PR 3276](https://github.com/gradio-app/gradio/pull/3276)
 - Fix bug where matplotlib images where always too small on the front end by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3274](https://github.com/gradio-app/gradio/pull/3274) 
 
 ## Documentation Changes:
diff --git a/gradio/utils.py b/gradio/utils.py
index e4b3c9debb..0e6b626e0d 100644
--- a/gradio/utils.py
+++ b/gradio/utils.py
@@ -886,8 +886,12 @@ def tex2svg(formula, *args):
     svg_start = xml_code.index("<svg ")
     svg_code = xml_code[svg_start:]
     svg_code = re.sub(r"<metadata>.*<\/metadata>", "", svg_code, flags=re.DOTALL)
-    svg_code = re.sub(r' width="[^"]+"', "", svg_code)
-    svg_code = re.sub(r' height="[^"]+"', "", svg_code)
+    svg_code = re.sub(r' width="[^"]+"', '', svg_code)
+    height_match = re.search(r'height="([\d.]+)pt"', svg_code)
+    if height_match:
+        height = float(height_match.group(1))
+        new_height = height / FONTSIZE   # conversion from pt to em
+        svg_code = re.sub(r'height="[\d.]+pt"', f'height="{new_height}em"', svg_code)
     copy_code = f"<span style='font-size: 0px'>{formula}</span>"
     return f"{copy_code}{svg_code}"
 
diff --git a/test/test_components.py b/test/test_components.py
index 12a7168c09..b8db18afc2 100644
--- a/test/test_components.py
+++ b/test/test_components.py
@@ -1784,7 +1784,7 @@ class TestMarkdown:
     def test_component_functions(self):
         markdown_component = gr.Markdown("# Let's learn about $x$", label="Markdown")
         assert markdown_component.get_config()["value"].startswith(
-            """<h1>Let’s learn about <span class="math inline"><span style=\'font-size: 0px\'>x</span><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 11.6 19.35625" xmlns="http://www.w3.org/2000/svg" version="1.1">\n \n <defs>\n  <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>\n </defs>\n <g id="figure_1">\n  <g id="patch_1">\n   <path d="M 0 19.35625"""
+            """<h1>Let’s learn about <span class="math inline"><span style=\'font-size: 0px\'>x</span><svg xmlns:xlink="http://www.w3.org/1999/xlink" height="0.9678125em" viewBox="0 0 11.6 19.35625" xmlns="http://www.w3.org/2000/svg" version="1.1">\n \n <defs>\n  <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>\n </defs>\n <g id="figure_1">\n  <g id="patch_1">"""
         )
 
     def test_in_interface(self):
diff --git a/ui/packages/markdown/src/Markdown.svelte b/ui/packages/markdown/src/Markdown.svelte
index bef92b566d..fd4c6d0d92 100644
--- a/ui/packages/markdown/src/Markdown.svelte
+++ b/ui/packages/markdown/src/Markdown.svelte
@@ -35,7 +35,6 @@
 	div :global(.math.inline svg) {
 		display: inline;
 		margin-bottom: 0.22em;
-		height: 1em;
 	}
 
 	div {