如何在 MathView 中自动缩放 TeX 方程?
How to automatically scale TeX equation in MathView?
我需要在 Android 应用程序中显示一些数学方程式。我使用 'MathView' (https://github.com/kexanie/MathView) 和 'MathJax' 作为转换 TeX 代码的引擎,效果很好。唯一的问题是,如果容器的宽度小于方程的宽度,我希望方程按比例缩小。有人知道如何实现吗?
数学视图:
<io.github.kexanie.library.MathView
android:id="@+id/formula"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#cccccc"
auto:engine="MathJax" />
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>");
谢谢!
有一个专门针对 TEXT 语言的 Stack Exchange 站点。您可能会在那里找到更好的帮助。 https://tex.stackexchange.com/
为了能够做到这一点,您必须排版数学,测量结果并将其与容器的智慧进行比较,在容器上设置扇形缩放,然后重新渲染数学以获得新尺寸。
这是一个例子。
<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>
这不是您想做的很多事情,但它确实有效。使用 SVG 和 CommonHTML 输出,您无需重新渲染,只需更改字体大小即可。
我需要在 Android 应用程序中显示一些数学方程式。我使用 'MathView' (https://github.com/kexanie/MathView) 和 'MathJax' 作为转换 TeX 代码的引擎,效果很好。唯一的问题是,如果容器的宽度小于方程的宽度,我希望方程按比例缩小。有人知道如何实现吗?
数学视图:
<io.github.kexanie.library.MathView
android:id="@+id/formula"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#cccccc"
auto:engine="MathJax" />
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>");
谢谢!
有一个专门针对 TEXT 语言的 Stack Exchange 站点。您可能会在那里找到更好的帮助。 https://tex.stackexchange.com/
为了能够做到这一点,您必须排版数学,测量结果并将其与容器的智慧进行比较,在容器上设置扇形缩放,然后重新渲染数学以获得新尺寸。
这是一个例子。
<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>
这不是您想做的很多事情,但它确实有效。使用 SVG 和 CommonHTML 输出,您无需重新渲染,只需更改字体大小即可。