LaTeX 在线转图像服务 如何计算 CSS“vertical-align(垂直对齐)”值？

hbghlyj

upmath.me/	LaTeX 在线转图像服务如何计算 CSS“vertical-align”值？
	<img> CSS具有“vertical-align”值，用于将数学基线与文本对齐。但来自 i.upmath.me 的 SVG 响应不包含 vertical-align 值，因此必须在 JS 前端的某个地方进行计算，但我还没有找到它。

hbghlyj

latex.js

1. eImg.style.verticalAlign = (isCentered ? 'top' : 'calc(var(--latex-zoom, 1)*' + (-shift) + 'pt)');

Copy the Code

在 latex.js 第 93 行中，verticalAlign 值被设置为 shift 的值，而 shift 位于函数 setSizes 中，而该函数又位于函数 trackLoading 中

终于我明白了如何获得这个 verticalAlign 值，原来是在 i.upmath.me 发送的 SVG 末尾的 <script> 元素中的 postmessage 中

hbghlyj

建议在 i.upmath.me 发送的 SVG 中设置 vertical-align 值，因为当他们自己使用 upmath.me/ 上的“LaTeX 转图像”服务时，他们的 SVG 图像设置了正确的“vertical-align”CSS 值。

请浏览 upmath.me/ 并打开浏览器工具检查 <svg> 元素，会发现已经设置了正确的“vertical-align”CSS 值。

hbghlyj

“vertical-align”值，用于将数学基线与文本对齐。

维基百科的 SVG 数学公式，例如 en.wikipedia.org/wiki/Formula#In_mathematical_logic
发现他们也设置了 CSS vertical-align 值，以使数学的基线与周围文本对齐

hbghlyj

AoPS 的 PNG 数学公式，例如 artofproblemsolving.com/community/c7h1517678p9048161
发现他们也设置了 CSS vertical-align 值，以使数学的基线与周围文本对齐

kuing

这里用 i.upmath.me 也就偶尔画个 tikz 图之类，无所谓啦。

公式咱们用 mathjax 就对齐得很好。

kuing

这里用 i.upmath.me 也就偶尔画个 tikz 图之类，无所谓啦。

公式咱们用 mathjax 就对齐得很好。

hbghlyj

kuing 发表于 2024-10-13 14:13
用 mathjax 就对齐得很好。 ...

确实，mathjax 生成的 SVG 会自动设置 vertical-align 值，以使数学的基线与周围文本对齐
维基百科的公式的后台也是 mathjax，他们是用 mathjax 生成的 SVG，再缓存起来.

hbghlyj

hbghlyj 发表于 2024-10-13 13:54
AoPS 的 PNG 数学公式，

像 AoPS 那样使用 PNG 图像作为 LaTeX 公式的一个意想不到的优点是，用户可以将公式与文本一起复制，这是因为这些 <img> 具有 alt 属性，且 alt 值通常是可复制的，因为它包含描述图像的文本。