render_math responsive mode

render_math/Readme.md

@@ -59,6 +59,11 @@ rendering LaTex. If set to `'Tex'`, then the TeX code is used as the preview
 is turned off by default due to it potentially being CPU expensive. **Default Value**: `False`
  * `tex_extensions`: [list] a list of [latex extensions](http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-extensions)
 accepted by mathjax. **Default Value**: `[]` (empty list)
+ * `responsive`: [boolean] tries to make displayed math render responsively. It does by determining if the width
+is less than `responsive_break` (see below) and if so, sets `align` to `left`, `indent` to `0em` and `linebreak_automatic` to `True`.
+**Default Value**: `False` (defaults to `False` for backward compatibility)
+ * `responsive_break`: [integer] a number (in pixels) representing the width breakpoint that is used
+when setting `responsive_align` to `True`. **Default Value**: 768
 
 #### Settings Examples
 Make math render in blue and displaymath align to the left:

render_math/math.py

@@ -52,6 +52,8 @@ def process_settings(pelicanobj):
     mathjax_settings['color'] = 'inherit'  # controls color math is rendered in
     mathjax_settings['linebreak_automatic'] = 'false'  # Set to false by default for performance reasons (see http://docs.mathjax.org/en/latest/output.html#automatic-line-breaking)
     mathjax_settings['tex_extensions'] = ''  # latex extensions that can be embedded inside mathjax (see http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-extensions)
+    mathjax_settings['responsive'] = 'false'  # Tries to make displayed math responsive
+    mathjax_settings['responsive_break'] = '768'  # The break point at which it math is responsively aligned (in pixels)
 
     # Source for MathJax: Works boths for http and https (see http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn)
     mathjax_settings['source'] = "'//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'"
@@ -93,6 +95,12 @@ def process_settings(pelicanobj):
         
         if key == 'linebreak_automatic' and isinstance(value, bool):
             mathjax_settings[key] = 'true' if value else 'false'
+        
+        if key == 'responsive' and isinstance(value, bool):
+            mathjax_settings[key] = 'true' if value else 'false'
+        
+        if key == 'responsive_break' and isinstance(value, int):
+            mathjax_settings[key] = str(value)
 
         if key == 'tex_extensions' and isinstance(value, list):
             # filter string values, then add '' to them

render_math/mathjax_script_template

@@ -1,4 +1,14 @@
 if (!document.getElementById('mathjaxscript_pelican_#%@#$@#')) {{
+    var align = "{align}",
+        indent = "{indent}",
+        linebreak = "{linebreak_automatic}";
+
+    if ({responsive}) {{
+        align = (screen.width < {responsive_break}) ? "left" : align;
+        indent = (screen.width < {responsive_break}) ? "0em" : indent;
+        linebreak = (screen.width < {responsive_break}) ? 'true' : linebreak;
+    }}
+    
     var mathjaxscript = document.createElement('script');
     mathjaxscript.id = 'mathjaxscript_pelican_#%@#$@#';
     mathjaxscript.type = 'text/javascript';
@@ -9,8 +19,8 @@ if (!document.getElementById('mathjaxscript_pelican_#%@#$@#')) {{
         "    TeX: {{ extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'{tex_extensions}], equationNumbers: {{ autoNumber: 'AMS' }} }}," +
         "    jax: ['input/TeX','input/MathML','output/HTML-CSS']," +
         "    extensions: ['tex2jax.js','mml2jax.js','MathMenu.js','MathZoom.js']," +
-        "    displayAlign: '{align}'," +
-        "    displayIndent: '{indent}'," +
+        "    displayAlign: '"+ align +"'," +
+        "    displayIndent: '"+ indent +"'," +
         "    showMathMenu: {show_menu}," +
         "    tex2jax: {{ " +
         "        inlineMath: [ ['\\\\(','\\\\)'] ], " +
@@ -19,8 +29,9 @@ if (!document.getElementById('mathjaxscript_pelican_#%@#$@#')) {{
         "        preview: '{latex_preview}'," +
         "    }}, " +
         "    'HTML-CSS': {{ " +
-        "        styles: {{ '.MathJax_Display, .MathJax .mo, .MathJax .mi, .MathJax .mn': {{color: '{color} ! important'}} }}, linebreaks: {{ automatic: {linebreak_automatic}, width: 'container' }}" +
-        "    }} " +
+        "        styles: {{ '.MathJax_Display, .MathJax .mo, .MathJax .mi, .MathJax .mn': {{color: '{color} ! important'}} }}," +
+        "        linebreaks: {{ automatic: "+ linebreak +", width: '90% container' }}," +
+        "    }}, " +
         "}}); ";
     (document.body || document.getElementsByTagName('head')[0]).appendChild(mathjaxscript);
 }}