mathjax / katex如何在网络上呈现复杂的公式？

Question

像mathjax和katex这样的库可以在网上呈现复杂的公式，而不需要任何插件。有没有关于如何实现这一目标的信息？

根据我对现有字体的有限理解，字体形状基本上是固定的。例如，我可以增加或减少字母A＆＃39;的大小，使其变为斜体或粗体，但没有任何机制可以任意改变它的形状（对于给定的字体）。

另一方面，像mathjax / katex这样的库似乎做了标准字体不可能实现的事情。例如，取平方根符号。可以存在由平方根符号包围的单个函数，或者在其下可以存在任意长且复杂的表达式。平方根符号相应地调整。怎么可能？

一种可能性是这些数学字体＆＃39;不是典型意义上的字体。就html而言，它们只是svg线和曲线。然而，情况似乎并非如此，因为我可以选择表达式的（部分），就像我在句子中选择几个单词一样。

我问这个是因为某些人类语言，例如arabic / persian / urdu在大多数网页上都不能很好地呈现，原因似乎是因为单个字符（或字符的一部分）根据所得或者变化而变化。跟随角色。换句话说，这些语言需要一个对上下文敏感的算法，对于大多数文本呈现引擎来说似乎并非如此。

很想学习如何渲染数学公式，这样我就可以弄清楚如何使用该技术渲染Urdu（特别是nastaleeq）

Answer 1

如果您加载包含MathJax内容的页面并检查呈现元素的HTML源，您可以自己查看。

它不漂亮。

这是MathJax为表达式$\sqrt{x^2 + y^2}$生成的HTML代码（我添加了换行符）：

<div id="wmd-preview" class="wmd-preview"><p><span class="MathJax_Preview" style="color:
inherit;"></span><span class="MathJax" id="MathJax-Element-41-Frame"><nobr><span
class="math" id="MathJax-Span-314" role="math" style="width: 4.836em; display:
inline-block;"><span style="display: inline-block; position: relative; width: 4.003em;
height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(2.947em
1000.003em 4.503em -999.997em); top: -3.997em; left: 0.003em;"><span class="mrow"
id="MathJax-Span-315"><span class="msqrt" id="MathJax-Span-316"><span style="display:
inline-block; position: relative; width: 4.003em; height: 0px;"><span style="position:
absolute; clip: rect(3.058em 1000.003em 4.392em -999.997em); top: -3.997em; left:
0.947em;"><span class="mrow" id="MathJax-Span-317"><span class="msubsup"
id="MathJax-Span-318"><span style="display: inline-block; position: relative; width:
0.947em; height: 0px;"><span style="position: absolute; clip: rect(3.392em 1000.003em
4.169em -999.997em); top: -3.997em; left: 0.003em;"><span class="mi"
id="MathJax-Span-319" style="font-family: STIXGeneral-Italic;">x<span style="display:
inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span
style="display: inline-block; width: 0px; height: 4.003em;"></span></span><span
style="position: absolute; top: -4.275em; left: 0.503em;"><span class="mn"
id="MathJax-Span-320" style="font-size: 70.7%; font-family:
STIXGeneral-Regular;">2</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span></span></span><span class="mo" id="MathJax-Span-321"
style="font-family: STIXGeneral-Regular; padding-left: 0.281em;">+</span><span
class="msubsup" id="MathJax-Span-322" style="padding-left: 0.281em;"><span
style="display: inline-block; position: relative; width: 0.892em; height: 0px;"><span
style="position: absolute; clip: rect(3.392em 1000.003em 4.392em -999.997em); top:
-3.997em; left: 0.003em;"><span class="mi" id="MathJax-Span-323" style="font-family:
STIXGeneral-Italic;">y</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span><span style="position: absolute; top: -4.275em; left:
0.447em;"><span class="mn" id="MathJax-Span-324" style="font-size: 70.7%; font-family:
STIXGeneral-Regular;">2</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span></span></span></span><span style="display: inline-block; width:
0px; height: 4.003em;"></span></span><span style="position: absolute; clip: rect(3.003em
1000.003em 3.392em -999.997em); top: -4.053em; left: 0.947em;"><span style="display:
inline-block; position: relative; width: 3.058em; height: 0px;"><span style="position:
absolute; font-family: STIXGeneral-Regular; top: -3.997em; left: 0.003em;">‾<span
style="display: inline-block; width: 0px; height: 4.003em;"></span></span><span
style="position: absolute; font-family: STIXGeneral-Regular; top: -3.997em; left:
2.558em;">‾<span style="display: inline-block; width: 0px; height:
4.003em;"></span></span><span style="font-family: STIXGeneral-Regular; position:
absolute; top: -3.997em; left: 0.392em;">‾<span style="display: inline-block; width:
0px; height: 4.003em;"></span></span><span style="font-family: STIXGeneral-Regular;
position: absolute; top: -3.997em; left: 0.836em;">‾<span style="display: inline-block;
width: 0px; height: 4.003em;"></span></span><span style="font-family:
STIXGeneral-Regular; position: absolute; top: -3.997em; left: 1.281em;">‾<span
style="display: inline-block; width: 0px; height: 4.003em;"></span></span><span
style="font-family: STIXGeneral-Regular; position: absolute; top: -3.997em; left:
1.725em;">‾<span style="display: inline-block; width: 0px; height:
4.003em;"></span></span><span style="font-family: STIXGeneral-Regular; position:
absolute; top: -3.997em; left: 2.114em;">‾<span style="display: inline-block; width:
0px; height: 4.003em;"></span></span></span><span style="display: inline-block; width:
0px; height: 4.003em;"></span></span><span style="position: absolute; clip: rect(2.836em
1000.003em 4.447em -999.997em); top: -3.942em; left: 0.003em;"><span style="font-family:
STIXGeneral-Regular;">√</span><span style="display: inline-block; width: 0px; height:
4.003em;"></span></span></span></span></span><span style="display: inline-block; width:
0px; height: 4.003em;"></span></span></span><span style="border-left-width: 0.003em;
border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height:
1.603em; vertical-align: -0.463em;"></span></span></nobr></span><script type="math/tex"
id="MathJax-Element-41">\sqrt{x^2 + y^2}</script></p></div>

仔细观察，您会看到多次出现font-family: STIXGeneral-Regular - 这是MathJax用于在所有平台上生成一致渲染输出的web font。

如果你看得更近，你会看到嵌套在‾元素嵌套中的几个超线字符（<span>）。这些是MathJax用于在平方根的顶部绘制直线的方法。

但是，我不会过于密切地看待它。正如我所说，它并不漂亮。最终结果看起来不错：

幸运的是，现代网络浏览器只要正确标记（例如，使用正确的lang和dir属性），就可以轻松渲染上下文相关的脚本