How to automatically scale TeX equation in MathView?

Question

How to automatically scale TeX equation in MathView?

1.1k views Asked by Katharina At 08 September 2024 at 18:24

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!

Original Q&A

There are 2 answers

Nathan Meyer On 09 January 2017 at 16:01

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

**Davide Cervone** · Accepted Answer · 2017-01-09 17:09:51

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.

TechQA.

How to automatically scale TeX equation in MathView?

There are 2 answers

Related Questions in ANDROID

Related Questions in MATHJAX

Related Questions in TEX

Popular Questions

Popular Tags

Trending Questions