MathML 的仅限 HTML 的回退-解网

问：

MathML 是一种 Web 标准，用于编写数学，无需像素化即可轻松缩放（就像 SVG）、复制和粘贴以及屏幕阅读器读取。

Chrome 拒绝实现它，理由是存在 JavaScript polyfill。（我不是在开玩笑。Edge 的支持是“目前未计划”。因此，只有 Safari 和 Firefox（以及一些 EPub 阅读器）支持 MathML。

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

我们生活在一个 HTML 很容易允许没有 JavaScript 的回退内容的时代（参见和标签）。MathML有什么办法可以做到这一点吗？<picture><audio><video>

HTML 数学ML

因此，如果你有一个 SVG 元素（用于在 SVG 中嵌入非 SVG 元素）设置在它上面，然后把它放在一个元素中，如果支持 MathML，则该元素将被渲染，如果不支持 MathML，则下一个元素将被渲染。<foreignObject>requiredExtensions="http://www.w3.org/1998/Math/MathML"<foreignObject><switch><math>

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

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

因此，带有回退的已完成的 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！

为什么？

因为！

好。

如果你想保持复制+过去的数学能力，你不能使用标签来嵌入你的SVG/MathML混合 - 改用：<picture><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。可以在这里找到它。

MathML 的仅限 HTML 的回退

HTML-only fallback for MathML

评论

但是我想支持IE8！

因为！

评论