From 355a398aa886de1b435a68491df5a92dd3c746ea Mon Sep 17 00:00:00 2001 From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Sun, 1 Jul 2018 15:08:03 +0200 Subject: [PATCH] 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). --- css/m-components.css | 1 + css/m-dark+doxygen.compiled.css | 1 + css/m-dark.compiled.css | 1 + css/m-light+doxygen.compiled.css | 1 + css/m-light.compiled.css | 1 + doc/plugins/plots-and-graphs.rst | 14 ++++++++------ pelican-plugins/m/dot.py | 11 ++++++----- 7 files changed, 19 insertions(+), 11 deletions(-) diff --git a/css/m-components.css b/css/m-components.css index 8990bf0b..85a59283 100644 --- 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 577ccffc..1dece583 100644 --- 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 bcb33b6b..05857fd5 100644 --- 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 30e657e3..ca95688c 100644 --- 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 a2ef11c8..2e737dca 100644 --- 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 a05aec77..81385d1c 100644 --- 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 `_ 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 62dff88c..f24b7596 100644 --- 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[^"]+)" 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(): -- 2.30.2