m.dot: explicitly specify font size of the SVG.

Otherwise it won't go well in combination with auto-scaling and font
sizes of the document relative to screen size (such as in presentation
mode).

diff --git a/css/m-components.css b/css/m-components.css
index 8990bf0ba9979fdbd61e6f6e1b38ecc3af89d04d..85a59283b0512353a4c9f67607d1fa8eee78e97f 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -964,6 +964,7 @@ div.m-button.m-default a:active svg.m-math {
 
 /* Plots, graphs */
 div.m-plot, div.m-graph { text-align: center; }
+div.m-graph { font-size: var(--font-size); }
 div.m-plot svg, div.m-graph svg { max-width: 100%; }
 div.m-plot .m-background { fill: var(--plot-background-color); }
 /* Font sizes are hardcoded in m.plots, change there first! */

diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 577ccffc6090c11777cf0f42a12a0a4c1237c9d9..1dece58341cea859d11de7cc4a74c8752b614890 100644 (file)
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1269,6 +1269,7 @@ div.m-button.m-default a:active svg.m-math {
   fill: #a5c9ea;
 }
 div.m-plot, div.m-graph { text-align: center; }
+div.m-graph { font-size: 16px; }
 div.m-plot svg, div.m-graph svg { max-width: 100%; }
 div.m-plot .m-background { fill: #34424d; }
 div.m-plot svg .m-label { font-size: 11px; }

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index bcb33b6b652a0c96169981ee051b6401452183ca..05857fd5f27db9ad1c04d5e3717dcb9f6941dc24 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1269,6 +1269,7 @@ div.m-button.m-default a:active svg.m-math {
   fill: #a5c9ea;
 }
 div.m-plot, div.m-graph { text-align: center; }
+div.m-graph { font-size: 16px; }
 div.m-plot svg, div.m-graph svg { max-width: 100%; }
 div.m-plot .m-background { fill: #34424d; }
 div.m-plot svg .m-label { font-size: 11px; }

diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index 30e657e3d26d270c93ab50cce7de0190f7eea2b4..ca95688c81044bee709cd1473502bee7a1f19c68 100644 (file)
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1269,6 +1269,7 @@ div.m-button.m-default a:active svg.m-math {
   fill: #cb4b16;
 }
 div.m-plot, div.m-graph { text-align: center; }
+div.m-graph { font-size: 14px; }
 div.m-plot svg, div.m-graph svg { max-width: 100%; }
 div.m-plot .m-background { fill: #fbf0ec; }
 div.m-plot svg .m-label { font-size: 11px; }

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index a2ef11c8b931aec960033b79fbbc218d8010fd43..2e737dca96481058c8ca4d2d7ab3019e5c682c93 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1269,6 +1269,7 @@ div.m-button.m-default a:active svg.m-math {
   fill: #cb4b16;
 }
 div.m-plot, div.m-graph { text-align: center; }
+div.m-graph { font-size: 14px; }
 div.m-plot svg, div.m-graph svg { max-width: 100%; }
 div.m-plot .m-background { fill: #fbf0ec; }
 div.m-plot svg .m-label { font-size: 11px; }

diff --git a/doc/plugins/plots-and-graphs.rst b/doc/plugins/plots-and-graphs.rst
index a05aec77a53b1c37df799e8944e821f78d9b31f4..81385d1c71785e6d336add1fe71bf2b5587a783e 100644 (file)
--- a/doc/plugins/plots-and-graphs.rst
+++ b/doc/plugins/plots-and-graphs.rst
@@ -174,12 +174,14 @@ package to your :py:`PLUGINS` in ``pelicanconf.py``.
 
     PLUGINS += ['m.dot']
     M_DOT_FONT = 'Source Sans Pro'
-
-Set :py:`M_DOT_FONT` to a font that matches your CSS theme (it's Source Sans
-Pro for `builtin m.css themes <{filename}/css/themes.rst>`_), note that you
-*need to have the font installed* on your system, otherwise it will fall back
-to whatever system font it finds instead (for example DejaVu Sans) and the
-output won't look as expected. In addition you need the
+    M_DOT_FONT_SIZE = 16.0
+
+Set :py:`M_DOT_FONT` and :py:`M_DOT_FONT_SIZE` to a font that matches your CSS
+theme (it's Source Sans Pro at :css:`16px` for
+`builtin m.css themes <{filename}/css/themes.rst>`_), note that you *need to
+have the font installed* on your system, otherwise it will fall back to
+whatever system font it finds instead (for example DejaVu Sans) and the output
+won't look as expected. In addition you need the
 `Graphviz <https://graphviz.org/>`_ library installed. Get it via your
 distribution package manager, for example on Ubuntu:
 

diff --git a/pelican-plugins/m/dot.py b/pelican-plugins/m/dot.py
index 62dff88c3e9e3fc555b3a462b69af80c2dae64be..f24b7596997ca305ae1511f6085a0988af4c0e91 100644 (file)
--- a/pelican-plugins/m/dot.py
+++ b/pelican-plugins/m/dot.py
@@ -61,11 +61,11 @@ _text_src_src = ' font-family="{font}" font-size="(?P<size>[^"]+)" fill="[^"]+"'
 _text_dst = ' style="font-size: {size}px;"'
 
 _font = ''
-_font_size = 16.0 # TODO: avoid hardcoding this
+_font_size = 0.0
 
 # The pt are actually px (16pt font is the same size as 16px), so just
 # converting to rem here
-_pt2em = 1.0/_font_size
+def _pt2em(pt): return pt/_font_size
 
 class Dot(rst.Directive):
     has_content = True
@@ -99,8 +99,8 @@ class Dot(rst.Directive):
 
         # Remove preamble and fixed size
         def patch_repl(match): return _patch_dst.format(
-            width=_pt2em*float(match.group('width')),
-            height=_pt2em*float(match.group('height')),
+            width=_pt2em(float(match.group('width'))),
+            height=_pt2em(float(match.group('height'))),
             viewBox=match.group('viewBox'))
         svg = _patch_src.sub(patch_repl, svg)
 
@@ -150,8 +150,9 @@ class StrictGraph(Dot):
         return Dot.run(self, 'strict graph "{}" {{\n{}}}'.format(self.arguments[0], '\n'.join(self.content)))
 
 def configure(pelicanobj):
-    global _font, _text_src
+    global _font, _font_size, _text_src
     _font = pelicanobj.settings.get('M_DOT_FONT', 'Source Sans Pro')
+    _font_size = pelicanobj.settings.get('M_DOT_FONT_SIZE', 16.0)
     _text_src = re.compile(_text_src_src.format(font=_font))
 
 def register():