0

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!

Katharina
  • 1,612
  • 15
  • 27

2 Answers2

1

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.

Peter Krautzberger
  • 5,145
  • 19
  • 31
Davide Cervone
  • 11,211
  • 1
  • 28
  • 48
  • Thank you I'll try this. Do you know how to port this code to android? – Katharina Jan 10 '17 at 07:27
  • Try adding the `MathJax.Hub.Queue()` to the bottom of the string in the `formula.config()` call, and put the `div` with `id="rescale"` around the `` tag in the `formula.setText()` call. The `.box` part you don't need, since that is just there to artificially limit the size of the container. – Davide Cervone Jan 10 '17 at 12:02
  • Thank you for your help! – Katharina Jan 10 '17 at 12:36
0

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

Nathan Meyer
  • 409
  • 1
  • 6
  • 13