<html> <head> <title>MathJax with Dynamic CSS</title> <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script> <style> .box { margin: 1em auto 0 auto; border: 2px solid black; padding: 0 20px; width: 20em; } </style> </head> <body> <div class="box"> <div id="rescale" style="display:inline-block"> \[\sum_{n=1}^{10} {1\over n} = {1\over 1} + {1\over 2} + {1\over 3} + {1\over 4} + {1\over 5} + {1\over 6} + {1\over 7} + {1\over 8} + {1\over 9} + {1\over 10}\] </div> </div> <script> MathJax.Hub.Queue(function () { var math = document.getElementById("rescale"); var w = math.offsetWidth, W = math.parentNode.offsetWidth-40; if (w > W) { math.style.fontSize = (95*W/w)+"%"; MathJax.Hub.getAllJax(math)[0].Rerender(); } }); </script> </body> </html> |