How to automatically scale TeX equation in MathView?

1.1k views Asked by At

I need to display some math equations in my Android application. I am using 'MathView' (https://github.com/kexanie/MathView) with 'MathJax' as engine to convert the TeX Code, which works well. The only problem is, that I'd like the equation to scale down if the width of it's container is smaller than the width of the equation. Has anybody an idea how to achieve this?

The MathView:

 <io.github.kexanie.library.MathView
    android:id="@+id/formula"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:background="#cccccc"
    auto:engine="MathJax" />

The configuration of the MathView:

formula.config(
            "MathJax.Hub.Config({\n" +
                    "    extensions: [\"tex2jax.js\", \"handle-floats.js\"],\n" +
                    "    jax: [\"input/TeX\", \"output/HTML-CSS\"],\n" +
                    "    tex2jax: {\n" +
                    "      inlineMath: [ ['$','$'], [\"\\\\(\",\"\\\\)\"] ],\n" +
                    "      displayMath: [ ['$$','$$'], [\"\\\\[\",\"\\\\]\"] ],\n" +
                    "      processEscapes: true\n" +
                    "    },\n" +
                    "    \"HTML-CSS\": {\n" +
                    "      linebreaks: {\n" +
                    "       automatic: false,\n" +
                    "       width: \"container\"\n" +
                    "      },\n" +
                    "    }\n" +
                    "  });"
    );

    formula.setText("<font color=\"#000000\">$$\\int_0^\\infty e^{-x^2} dx=\\frac{\\sqrt{\\pi}}{2}$$</font>");

Thank you!

2

There are 2 answers

3
Davide Cervone On BEST ANSWER

In order to be able to do this, you have to typeset the math, measure the results and compare it to the wise of the container, set a fan scaling on the container, and re-render the math to get the new size.

Here is an example that does it.

<html>
<head>
<title>MathJax with Dynamic CSS</title>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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>

It's not something you want to do a lot of, but it does work. With SVG and CommonHTML output, you may be able to get away without re-rendering, and just change the font size.

2
Nathan Meyer On

There is a StackExchange site dedicated to the TEX language. You might find better help there. https://tex.stackexchange.com/