m.math: use em units instead of pt.

So it's possible to actually scale the formulas relative to surrounding
text.

diff --git a/doxygen/dox2html5.py b/doxygen/dox2html5.py
index 3df5c40823a8a81a71cea3f654b5792049561e4d..474ecf0afb950ca4176baddb64b25ec8efaed567 100755 (executable)
--- a/doxygen/dox2html5.py
+++ b/doxygen/dox2html5.py
@@ -1225,15 +1225,13 @@ def parse_desc_internal(state: State, element: ET.Element, immediate_parent: ET.
                 has_block_elements = True
                 out.parsed += '<div class="m-math{}">{}</div>'.format(
                     ' ' + add_css_class if add_css_class else '',
-                    latex2svgextra.patch(i.text, svg, ''))
+                    latex2svgextra.patch(i.text, svg, None, ''))
             else:
                 # CSS classes and styling for proper vertical alignment. Depth is relative
                 # to font size, describes how below the line the text is. Scaling it back
                 # to 12pt font, scaled by 125% as set above in the config.
-                attribs = ' class="m-math{}" style="vertical-align: -{:.1f}pt;"'.format(
-                    ' ' + add_inline_css_class if add_inline_css_class else '',
-                    (depth or 0.0)*12*1.25)
-                out.parsed += latex2svgextra.patch(i.text, svg, attribs)
+                attribs = ' class="m-math{}"'.format(' ' + add_inline_css_class if add_inline_css_class else '')
+                out.parsed += latex2svgextra.patch(i.text, svg, depth, attribs)
 
         # Inline elements
         elif i.tag == 'linebreak':

diff --git a/doxygen/test/contents_custom/math.html b/doxygen/test/contents_custom/math.html
index ed83d1eaed417179074e43bf361212c1a80d0c8d..49b9c5414c13f950c122ddde6607a0dded0eeea7 100644 (file)
--- a/doxygen/test/contents_custom/math.html
+++ b/doxygen/test/contents_custom/math.html
@@ -22,7 +22,7 @@
         <h1>
           Math
         </h1>
-<p>A green formula:</p><div class="m-math m-success"><svg height='12.5906pt' version='1.1' viewBox='188.371 -10.0725 11.3035 10.0725' width='14.1293pt'>
+<p>A green formula:</p><div class="m-math m-success"><svg style="width: 1.177em; height: 1.049em;" viewBox="188.371 -10.0725 11.3035 10.0725">
 <title>
 \[ \pi^2 \]
 </title>
@@ -34,7 +34,7 @@
 <use x='188.371' xlink:href='#eq1-g0-25' y='0'/>
 <use x='195.44' xlink:href='#eq1-g1-50' y='-4.93619'/>
 </g>
-</svg></div><p>A yellow  <svg class="m-math m-warning" style="vertical-align: -0.0pt;" height='10.2117pt' version='1.1' viewBox='0 -8.16937 8.45432 8.16937' width='10.5679pt'>
+</svg></div><p>A yellow  <svg class="m-math m-warning" style="width: 0.881em; height: 0.851em; vertical-align: -0.000em;" viewBox="0 -8.16937 8.45432 8.16937">
 <title>
 $ \Sigma $
 </title>

diff --git a/doxygen/test/contents_math/index.html b/doxygen/test/contents_math/index.html
index 46dc9a1f25158a64db8a02864b0620989b1c7c16..6c9b959259d724d88ee38c9cd97dc516c9af4762 100644 (file)
--- a/doxygen/test/contents_math/index.html
+++ b/doxygen/test/contents_math/index.html
@@ -22,7 +22,7 @@
         <h1>
           My Project
         </h1>
-<p>Here&#x27;s a block formula:</p><div class="m-math"><svg height='27.0023pt' version='1.1' viewBox='148.249 -21.6018 92.0442 21.6018' width='115.055pt'>
+<p>Here&#x27;s a block formula:</p><div class="m-math"><svg style="width: 9.588em; height: 2.250em;" viewBox="148.249 -21.6018 92.0442 21.6018">
 <title>
 \[ \hat q = [\boldsymbol 0, 1] + \epsilon [\frac{\boldsymbol v}{2}, 0] \]
 </title>
@@ -60,7 +60,7 @@
 <use x='231.189' xlink:href='#eq1-g3-48' y='-8.20066'/>
 <use x='237.042' xlink:href='#eq1-g3-93' y='-8.20066'/>
 </g>
-</svg></div><p>And <svg class="m-math" style="vertical-align: -2.9pt;" height='13.2835pt' version='1.1' viewBox='0 -8.30219 6.71157 10.6268' width='8.38946pt'>
+</svg></div><p>And <svg class="m-math" style="width: 0.699em; height: 1.107em; vertical-align: -0.243em;" viewBox="0 -8.30219 6.71157 10.6268">
 <title>
 $ \hat q $
 </title>
@@ -72,7 +72,7 @@ $ \hat q $
 <use x='0.858581' xlink:href='#eq2-g1-94' y='0'/>
 <use x='0' xlink:href='#eq2-g0-113' y='0'/>
 </g>
-</svg> is how quaternion is denoted.</p><div class="m-math"><svg height='13.7321pt' version='1.1' viewBox='164.011 -10.9857 60.0231 10.9857' width='75.0289pt'>
+</svg> is how quaternion is denoted.</p><div class="m-math"><svg style="width: 6.252em; height: 1.144em;" viewBox="164.011 -10.9857 60.0231 10.9857">
 <title>
 \[ a^2 + b^2 = c^2 \]
 </title>
@@ -94,7 +94,7 @@ $ \hat q $
 <use x='214.762' xlink:href='#eq3-g0-99' y='-0.913201'/>
 <use x='219.8' xlink:href='#eq3-g1-50' y='-5.84939'/>
 </g>
-</svg></div><p><svg class="m-math" style="vertical-align: -0.0pt;" height='11.8434pt' version='1.1' viewBox='0 -9.47474 9.27217 9.47474' width='11.5902pt'>
+</svg></div><p><svg class="m-math" style="width: 0.966em; height: 0.987em; vertical-align: -0.000em;" viewBox="0 -9.47474 9.27217 9.47474">
 <title>
 $c^2$
 </title>
@@ -106,7 +106,7 @@ $c^2$
 <use x='0' xlink:href='#eq4-g0-99' y='0'/>
 <use x='5.03799' xlink:href='#eq4-g1-50' y='-4.33844'/>
 </g>
-</svg> should be part of a new paragraph, not stuck out of it. The following formula has a custom environment:</p><div class="m-math"><svg height='48.331pt' version='1.1' viewBox='136.775 -38.6648 114.495 38.6648' width='143.118pt'>
+</svg> should be part of a new paragraph, not stuck out of it. The following formula has a custom environment:</p><div class="m-math"><svg style="width: 11.926em; height: 4.028em;" viewBox="136.775 -38.6648 114.495 38.6648">
 <title>
 \begin{eqnarray*} g &=& \frac{Gm_2}{r^2} \\ &=& 9.82066032\,\mbox{m/s}^2 \end{eqnarray*}
 </title>

diff --git a/doxygen/test/contents_math_cached/math.html b/doxygen/test/contents_math_cached/math.html
index 8e56824b593477b40b1e0f4fb5a03ebc3d70f2fc..d1a28679142d2541ceecaf6441dde0e2c903aa79 100644 (file)
--- a/doxygen/test/contents_math_cached/math.html
+++ b/doxygen/test/contents_math_cached/math.html
@@ -22,7 +22,7 @@
         <h1>
           Math
         </h1>
-<p>In order to actually test use of the cache, I need to cheat a bit. Inline formula which is pi in the source but <svg class="m-math" style="vertical-align: -5.2pt;" height='15.3267pt' version='1.1' viewBox='1.19551 -8.1387 4.67835 12.2613' width='5.84794pt'>
+<p>In order to actually test use of the cache, I need to cheat a bit. Inline formula which is pi in the source but <svg class="m-math" style="width: 0.487em; height: 1.277em; vertical-align: -0.431em;" viewBox="1.19551 -8.1387 4.67835 12.2613">
 <title>
 $ \pi $
 </title>
@@ -35,7 +35,7 @@ $ \pi $
 <rect height='0.478187' width='4.67835' x='1.19551' y='-3.22789'/>
 <use x='1.4176' xlink:href='#eq1-g1-50' y='4.12263'/>
 </g>
-</svg> here. Then a block formula which is a Pythagorean theorem in source but not in the output:</p><div class="m-math"><svg height='15.4964pt' version='1.1' viewBox='164.011 -12.3971 60.0231 12.3971' width='75.0289pt'>
+</svg> here. Then a block formula which is a Pythagorean theorem in source but not in the output:</p><div class="m-math"><svg style="width: 6.252em; height: 1.291em;" viewBox="164.011 -12.3971 60.0231 12.3971">
 <title>
 \[ a^2 + b^2 = c^2 \]
 </title>

diff --git a/pelican-plugins/latex2svgextra.py b/pelican-plugins/latex2svgextra.py
index 5cca1da516ddb87475b019c2968d65307439599b..a782d30e0454e4eba01f61928412a46a182b63fd 100644 (file)
--- a/pelican-plugins/latex2svgextra.py
+++ b/pelican-plugins/latex2svgextra.py
@@ -49,15 +49,20 @@ params.update({
 
 _patch_src = re.compile(r"""<\?xml version='1.0' encoding='UTF-8'\?>
 <!-- This file was generated by dvisvgm \d+\.\d+\.\d+ -->
-<svg (?P<attribs>.+) xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+<svg height='(?P<height>[^']+)pt' version='1.1' viewBox='(?P<viewBox>[^']+)' width='(?P<width>[^']+)pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
 """)
 
-_patch_dst = r"""<svg{attribs} \g<attribs>>
+# version ignored by all UAs, safe to drop https://stackoverflow.com/a/18468348
+_patch_dst = r"""<svg{attribs} style="width: {width:.3f}em; height: {height:.3f}em;{style}" viewBox="{viewBox}">
 <title>
 {formula}
 </title>
 """
 
+# 1 pt is 1.333 px, base font size is 16px. TODO: make this configurable,
+# remove the 1.25 scaling
+pt2em = 1.333333/16.0
+
 _unique_src = re.compile(r"""(?P<name> id|xlink:href)='(?P<ref>#?)(?P<id>g\d+-\d+|page\d+)'""")
 _unique_dst = r"""\g<name>='\g<ref>eq{counter}-\g<id>'"""
 
@@ -122,8 +127,22 @@ def pickle_cache(file):
 # Patches the output from dvisvgm
 # - w/o the XML preamble and needless xmlns attributes
 # - unique element IDs (see `counter`)
+# - adjusts vertical align if depth is not none
 # - adds additional `attribs` to the <svg> element
-def patch(formula, svg, attribs):
+def patch(formula, svg, depth, attribs):
     global counter
     counter += 1
-    return _unique_src.sub(_unique_dst.format(counter=counter), _patch_src.sub(_patch_dst.format(attribs=attribs, formula=formula.replace('\\', '\\\\')), svg))
+
+    if depth is None: style = ''
+    else: style = ' vertical-align: -{:.3f}em;'.format(depth*1.25)
+
+    def repl(match):
+        return _patch_dst.format(
+            width=pt2em*float(match.group('width')),
+            height=pt2em*float(match.group('height')),
+            style=style,
+            viewBox=match.group('viewBox'),
+            attribs=attribs,
+            formula=formula)
+
+    return _unique_src.sub(_unique_dst.format(counter=counter), _patch_src.sub(repl, svg))

diff --git a/pelican-plugins/m/math.py b/pelican-plugins/m/math.py
index a0108c4dff9e88dd97b10f902b185663f13b2be6..28010dfbfe43708d150dce2ec3ba7ca803e04094 100644 (file)
--- a/pelican-plugins/m/math.py
+++ b/pelican-plugins/m/math.py
@@ -64,7 +64,7 @@ class Math(rst.Directive):
 
             container = nodes.container(**self.options)
             container['classes'] += ['m-math']
-            node = nodes.raw(self.block_text, latex2svgextra.patch(block, svg, ''), format='html')
+            node = nodes.raw(self.block_text, latex2svgextra.patch(block, svg, None, ''), format='html')
             node.line = self.content_offset + 1
             self.add_name(node)
             container.append(node)
@@ -101,12 +101,8 @@ def math(role, rawtext, text, lineno, inliner, options={}, content=[]):
 
     depth, svg = latex2svgextra.fetch_cached_or_render("$" + text + "$")
 
-    # CSS classes and styling for proper vertical alignment. Depth is relative
-    # to font size, describes how below the line the text is. Scaling it back
-    # to 12pt font, scaled by 125% as set above in the config.
-    attribs = ' class="{}" style="vertical-align: -{:.1f}pt;"'.format(classes, depth*12*1.25)
-
-    node = nodes.raw(rawtext, latex2svgextra.patch(text, svg, attribs), format='html', **options)
+    attribs = ' class="{}"'.format(classes)
+    node = nodes.raw(rawtext, latex2svgextra.patch(text, svg, depth, attribs), format='html', **options)
     return [node], []
 
 def configure_pelican(pelicanobj):

diff --git a/pelican-plugins/m/test/math/page.html b/pelican-plugins/m/test/math/page.html
index 035c39b3cf91caccc1cfaf94048d92f8841570a4..8c1669a3861e2d4c8be5acd622b0aef9ce4f682c 100644 (file)
--- a/pelican-plugins/m/test/math/page.html
+++ b/pelican-plugins/m/test/math/page.html
@@ -23,7 +23,7 @@
       <div class="m-col-l-10 m-push-l-1">
         <h1>m.math</h1>
 <!-- content -->
-<p>Inline colored math <svg class="m-math m-primary" style="vertical-align: -0.0pt;" height='11.8434pt' version='1.1' viewBox='0 -9.47474 10.3791 9.47474' width='12.9739pt'>
+<p>Inline colored math <svg class="m-math m-primary" style="width: 1.081em; height: 0.987em; vertical-align: -0.000em;" viewBox="0 -9.47474 10.3791 9.47474">
 <title>
 a^2
 </title>
@@ -37,7 +37,7 @@ a^2
 </g>
 </svg> and colored math block:</p>
 <div class="m-success m-math">
-<svg height='13.7321pt' version='1.1' viewBox='164.011 -10.9857 60.0231 10.9857' width='75.0289pt'>
+<svg style="width: 6.252em; height: 1.144em;" viewBox="164.011 -10.9857 60.0231 10.9857">
 <title>
 a^2 + b^2 = c^2
 </title>
@@ -61,7 +61,7 @@ a^2 + b^2 = c^2
 </g>
 </svg></div>
 <p>Properly align <em>huge</em> formulas vertically on a line:
-<svg class="m-math" style="vertical-align: -7.7pt;" height='21.2063pt' version='1.1' viewBox='0 -10.8498 46.8022 16.965' width='58.5028pt'>
+<svg class="m-math" style="width: 4.875em; height: 1.767em; vertical-align: -0.639em;" viewBox="0 -10.8498 46.8022 16.965">
 <title>
 \hat q^{-1} = \frac{\hat q^*}{|\hat q|^2}
 </title>
@@ -94,7 +94,7 @@ a^2 + b^2 = c^2
 <use x='42.6512' xlink:href='#eq3-g4-50' y='1.85337'/>
 </g>
 </svg>
-and make sure there's enough space for all the complex <svg class="m-math" style="vertical-align: -0.0pt;" height='10.2117pt' version='1.1' viewBox='0 -8.16937 12.6773 8.16937' width='15.8467pt'>
+and make sure there's enough space for all the complex <svg class="m-math" style="width: 1.321em; height: 0.851em; vertical-align: -0.000em;" viewBox="0 -8.16937 12.6773 8.16937">
 <title>
 W
 </title>
@@ -105,7 +105,7 @@ W
 <use x='0' xlink:href='#eq4-g0-87' y='0'/>
 </g>
 </svg> things between
-the lines <svg class="m-math" style="vertical-align: -6.7pt;" height='18.2261pt' version='1.1' viewBox='0 -9.24319 67.6716 14.5809' width='84.5895pt'>
+the lines <svg class="m-math" style="width: 7.049em; height: 1.519em; vertical-align: -0.558em;" viewBox="0 -9.24319 67.6716 14.5809">
 <title>
 W = \sum_{i=0}^{n} \frac{w_i}{h_i}
 </title>
@@ -136,7 +136,7 @@ W = \sum_{i=0}^{n} \frac{w_i}{h_i}
 <use x='63.9114' xlink:href='#eq5-g1-105' y='5.33771'/>
 </g>
 </svg> because
-<svg class="m-math" style="vertical-align: -4.4pt;" height='15.9127pt' version='1.1' viewBox='0 -9.24319 63.4496 12.7302' width='79.312pt'>
+<svg class="m-math" style="width: 6.609em; height: 1.326em; vertical-align: -0.365em;" viewBox="0 -9.24319 63.4496 12.7302">
 <title>
 Y = \sum_{i=0}^{n} B
 </title>
@@ -161,7 +161,7 @@ Y = \sum_{i=0}^{n} B
 <use x='53.9533' xlink:href='#eq6-g2-66' y='0'/>
 </g>
 </svg></p>
-<p>The <code>\cfrac</code> thing doesn't align well: <svg class="m-math" style="vertical-align: -6.3pt;" height='30.1719pt' version='1.1' viewBox='0 -14.1436 70.1821 24.1375' width='87.7276pt'>
+<p>The <code>\cfrac</code> thing doesn't align well: <svg class="m-math" style="width: 7.311em; height: 2.514em; vertical-align: -0.526em;" viewBox="0 -14.1436 70.1821 24.1375">
 <title>
 W = \sum_{i=0}^{n} \cfrac{w_i}{h_i}
 </title>

diff --git a/pelican-plugins/m/test/math_cached/page.html b/pelican-plugins/m/test/math_cached/page.html
index 3a729836ae054ea9bf1b580928c2d94f5cf3db39..5c438ab50837d3bab6d0fe101c9f758dd95273ee 100644 (file)
--- a/pelican-plugins/m/test/math_cached/page.html
+++ b/pelican-plugins/m/test/math_cached/page.html
@@ -24,7 +24,7 @@
         <h1>Math</h1>
 <!-- content -->
 <p>In order to actually test use of the cache, I need to cheat a bit. Inline
-formula which is pi in the source but <svg class="m-math" style="vertical-align: -5.2pt;" height='15.3267pt' version='1.1' viewBox='1.19551 -8.1387 4.67835 12.2613' width='5.84794pt'>
+formula which is pi in the source but <svg class="m-math" style="width: 0.487em; height: 1.277em; vertical-align: -0.431em;" viewBox="1.19551 -8.1387 4.67835 12.2613">
 <title>
 \pi
 </title>
@@ -40,7 +40,7 @@ formula which is pi in the source but <svg class="m-math" style="vertical-align:
 </svg> here. Then a block
 formula which is a Pythagorean theorem in source but not in the output:</p>
 <div class="m-math">
-<svg height='15.4964pt' version='1.1' viewBox='164.011 -12.3971 60.0231 12.3971' width='75.0289pt'>
+<svg style="width: 6.252em; height: 1.291em;" viewBox="164.011 -12.3971 60.0231 12.3971">
 <title>
 a^2 + b^2 = c^2
 </title>