MathJax SVG 对 headers 和 CSS 的反应很奇怪

Question

快速介绍

我正在从事一个涉及一些密集数学渲染的网络项目，我使用最新的 MathJax 版本来完成它。当我向其中一个页面添加内容时，我注意到一个非常奇怪的错误。 copy-paste 我网页的完整源代码并不明智，所以我将其简化为这样。

源代码

<html>
<head>
    <style>
        h3 {  font-size: 1.3em;  }
        h4 {  font-size: 1.2em;  }
        h5 {  font-size: 1.1em;  margin: 1em 0 0.5em;  }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>
</head>
<body>
    <h3>H3 Header</h3>
    <h4>H4 header</h4>
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
</body>
</html>

这里还有jsFiddle playground.

输出

Screenshot of the resulting webpage

问题

在某些时候 SVG 定位和大小调整混乱，然后重置回正常（仔细查看提供的图像）。

重现错误

错误仅在将 SVG 用作输出模式时出现。在 Chrome 和 Safari 中的外观和行为不同，没有机会在其他浏览器中进行检查。

如果您

，错误会更改其 'location'

添加、删除或重新定位 headers
为任何 headers

font-size

改变margin

问题

这是怎么回事？

Answer 1

Webkit 浏览器，如 Chrome 和 Safari round sub-pixel 值：Web-Kit and sub-pixel values, workaround?

在你的例子中，你给出 header font-sizes 和 em 单位的边距，MathJax 给出 <svg> 元素的 width/height包含 ex 单位的字形。两者都可能导致像素分数（例如，在 Firefox 中，h5 margin-top 为 15.4px，svg 字形周围的跨度高度为 17.5333px。Chrome，使用不同的字体， margin-top 为 17.6px，但跨度的高度为 18px。）

根据您所在的行，MathML 内容周围的 span 元素的高度可能会相差一个像素，它是相对于字体的 baseline 定位的用于周围的线框。同时，svg 内部的字形是在相对于其边界框的 upper 边界的坐标中绘制的，并且没有进一步舍入像素分数。因此，字形基线最终可能与周围行框的基线不同。

这是 MathJax 错误吗？

我认为是的。该库呈现相当于字形的内容，但将它们定义为纯 <path>s。如果它利用 svg <font> 和 <glyph> 元素，通常的字体指标如 x 高度、显性基线等将被定义，并且垂直定位对于浏览器来说会简单得多。

虽然您的问题在同一行使用 MathML 和常规文本时出现，但 Webkit 舍入似乎甚至会在公式内部造成问题，正如 this issue 所建议的那样。

MathJax SVG 对 headers 和 CSS 的反应很奇怪

MathJax SVG reacts weirdly to headers and CSS

css

svg

mathjax

快速介绍

源代码

输出

问题

重现错误

问题