fix log formatting for y axis

Author: nvaytet

src/matplotgl/axes.py

@@ -11,7 +11,7 @@
 from .line import Line
 from .mesh import Mesh
 from .points import Points
-from .utils import latex_to_html
+from .utils import html_to_svg, latex_to_html
 from .widgets import ClickableHTML
 
 
@@ -147,7 +147,7 @@ def __init__(self, *, ax: MplAxes, figure=None) -> None:
                 "grid_area": "cursor",
                 "padding": "0",
                 "margin": "0",
-                "width": "80px",
+                "width": "6em",
             },
         )
 
@@ -353,7 +353,9 @@ def _make_xticks(self):
 
         bottom_string = (
             f'<svg height="calc(1.2em + {tick_length}px + {label_offset}px)" '
-            f'width="{self.width}"><line x1="0" y1="0" x2="{self.width}" y2="0" '
+            f'width="{self.width}"><line x1="0" y1="0" '
+            # f'width="calc(0.5em + {self.width}px)"><line x1="0" y1="0" '
+            f'x2="{self.width}" y2="0" '
             f'style="stroke:black;stroke-width:{self._spine_linewidth}" />'
         )
 
@@ -375,7 +377,7 @@ def _make_xticks(self):
             bottom_string += (
                 f'<text x="{x}" y="{tick_length + label_offset}" '
                 'text-anchor="middle" dominant-baseline="hanging">'
-                f"{latex_to_html(label)}</text>"
+                f"{html_to_svg(latex_to_html(label), baseline='hanging')}</text>"
             )
 
         bottom_string += "</svg></div>"
@@ -431,7 +433,7 @@ def _make_yticks(self):
             left_string += (
                 f'<text x="{width2}" '
                 f'y="{y}" text-anchor="end" dominant-baseline="middle">'
-                f"{latex_to_html(label)}</text>"
+                f"{html_to_svg(latex_to_html(label), baseline='middle')}</text>"
             )
 
         left_string += "</svg></div>"

src/matplotgl/utils.py

@@ -147,10 +147,10 @@ def latex_to_html(latex_str: str) -> str:
     # Special cases that don't follow the pattern (optional overrides)
     special_replacements = {
         "ċ": "·",
-        "<sup>": '<tspan dy="-7%" font-size="10">',
-        "</sup>": "</tspan>",
-        "<sub>": '<tspan dy="7%" font-size="10">',
-        "</sub>": "</tspan>",
+        # "<sup>": '<tspan dy="-7%" font-size="70%">',
+        # "</sup>": "</tspan>",
+        # "<sub>": '<tspan dy="7%" font-size="10">',
+        # "</sub>": "</tspan>",
     }
 
     for entity, replacement in special_replacements.items():
@@ -159,6 +159,42 @@ def latex_to_html(latex_str: str) -> str:
     return s
 
 
+def html_to_svg(text: str, baseline: str) -> str:
+    """Convert HTML text to SVG-compatible text using tspan for subscripts/superscripts.
+
+    Parameters
+    ----------
+    text:
+        The input HTML text.
+    baseline:
+        The dominant baseline alignment for the text ('hanging', 'middle', 'baseline').
+
+    Returns
+    -------
+    str
+        The SVG-compatible text.
+    """
+    replacements = {
+        "hanging": {
+            "<sup>": '<tspan dy="-7%" font-size="70%">',
+            "</sup>": "</tspan>",
+            "<sub>": '<tspan dy="7%" font-size="70%">',
+            "</sub>": "</tspan>",
+        },
+        "middle": {
+            "<sup>": '<tspan dy="-2%" font-size="70%">',
+            "</sup>": "</tspan>",
+            "<sub>": '<tspan dy="2%" font-size="70%">',
+            "</sub>": "</tspan>",
+        },
+    }
+
+    for entity, replacement in replacements[baseline].items():
+        text = text.replace(entity, replacement)
+
+    return text
+
+
 # def html_tags_to_svg(text: str) -> str:
 #     """Convert <sup> and <sub> HTML tags to SVG superscript/subscript using tspan."""