MathML 的纯 HTML 回退

Question

MathML是一种编写数学的网络标准，可以轻松缩放而无需像素化(就像 SVG)、复制和粘贴以及屏幕阅读器阅读。

Chrome 拒绝在存在 JavaScript polyfill 的基础上实现它。 (I kid you not.) Edge 的支持是'Not currently planned' .因此，只有 Safari 和 Firefox(以及 some EPub readers)支持 MathML。

鉴于实现如此参差不齐，后备内容是 100% 必要的。通常的解决方案是 MathJax ;但这不适用于 JavaScript 已禁用或更可能已损坏的用户。

我们生活在一个 HTML 很容易允许没有 JavaScript 的后备内容的时代(参见 <picture> 、 <audio> 和 <video> 标签)。 MathML 有什么方法可以做到这一点吗？

Answer 1

据我所知，没有仅 HTML 的方法来检测对 MathML 的支持。

但是， 有一种 SVG 方式。

<switch> SVG 元素呈现其自身的第一个直接子元素，其中该子元素的某些 bool 属性缺失或计算结果为真。一个这样的属性是 requiredExtensions属性，它要求用户代理必须支持特定的扩展以呈现指定的元素。

所以，如果你有一个 SVG <foreignObject>元素(用于在 SVG 中嵌入非 SVG 元素)与 requiredExtensions="http://www.w3.org/1998/Math/MathML"放在上面，然后把<foreignObject>在 <switch> 里面元素，<math>如果支持 MathML，将呈现元素，如果不支持 MathML，将呈现下一个元素。

因此，对于一个基本的 MathML 示例:<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn><mo>+</mo><mn>1</mn><mo>=</mo><mn>2</mn></math>是 1 + 1 = 2 的 MathML。

一个基本的 SVG 回退是 <svg xmlns="http://www.w3.org/2000/svg" width="65" height="23"><text y="15" font-size="16">1 + 1 = 2</text></svg> (可以使用 Mathjax-Node 生成更复杂的回退)。

因此完整的带有回退的 MathML 表达式将是:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40">
  <switch>
    <foreignObject requiredExtensions="http://www.w3.org/1998/Math/MathML" width="120" height="40">
      <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mn>1</mn><mo>+</mo><mn>1</mn><mo>=</mo><mn>2</mn><mtext>MathML</mtext>
      </math>
    </foreignObject>
    <text y="15" font-size="16">1 + 1 = 2 (SVG)</text>
  </switch>
</svg>

我已经在 Firefox(呈现 MathML)、Edge、IE11 和 Chrome(呈现 SVG)中测试了以上内容。我没有测试 Safari，因为我没有 Mac。

编辑:Safari 9 呈现 MathML。

但是我要支持IE8!

为什么？

因为!

很好。

如果你想保持复制 + 过去的能力，你不能使用 <picture>嵌入 SVG/MathML 混合体的标签 - 使用 <object>相反:

(我在这里使用的是 DataUrl，但您可以轻松地将 SVG 保存为外部文件):

<object typemustmatch type="image/svg+xml" data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjQwIj4NCiAgPHN3aXRjaD4NCiAgICA8Zm9yZWlnbk9iamVjdCByZXF1aXJlZEV4dGVuc2lvbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTgvTWF0aC9NYXRoTUwiIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPg0KICAgICAgPG1hdGggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTgvTWF0aC9NYXRoTUwiPg0KICAgICAgICA8bW4+MTwvbW4+PG1vPis8L21vPjxtbj4xPC9tbj48bW8+PTwvbW8+PG1uPjI8L21uPjxtdGV4dD5NYXRoTUw8L210ZXh0Pg0KICAgICAgPC9tYXRoPg0KICAgIDwvZm9yZWlnbk9iamVjdD4NCiAgICA8dGV4dCB5PSIxNSIgZm9udC1zaXplPSIxNiI+MSArIDEgPSAyIChTVkcpPC90ZXh0Pg0KICA8L3N3aXRjaD4NCjwvc3ZnPg==">
  1 + 1 = 2 (You don't support SVG)
</object>

(您可以使用 CloudConvert 或类似的方法将 SVG 呈现为 PNG，如果您确实想要，则将其放入对象中。)

就这样吧。稍作预渲染，您就有了一个不需要 JavaScript 或 CSS 的 MathML 回退——只需要 HTML。

编辑:我制作了一个 NPM 包来自动创建 MathML、SVG 和 PNG。可以查到here .