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!
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.
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.