MathML 脚本元素

我们继续回顾基本的数学符号，并重点关注使用脚本构建 MathML 元素。

先决条件	已安装基本软件，了解文件操作的基本知识，以及 HTML 基础知识（学习 HTML 简介）。
目标	熟悉生成脚本元素的基本 MathML 元素。

下标和上标

与我们在上一篇文章中看到的类似，<msub>、<msup> 和 <msubsup> 具有特殊的结构，期望恰好有两个元素（对于 <msub>、<msup>）或三个元素（对于 <msubsup>）。

html

<p>
  msub:
  <math>
    <msub>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </msub>
  </math>
</p>

<p>
  msup:
  <math>
    <msup>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </msup>
  </math>
</p>
<p>
  msubsup:
  <math>
    <msubsup>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
      <mtext>child3</mtext>
    </msubsup>
  </math>
</p>

以下是上述示例在浏览器中的渲染效果。

您应该注意到

<msub> 元素的第二个子元素作为其第一个子元素的下标附加。
<msup> 元素的第二个子元素作为其第一个子元素的上标附加。
<msubsup> 元素的第二个和第三个子元素分别作为其第一个子元素的下标和上标附加。
脚本内的文本会缩小。

注意：MathML 元素 <msub> 和 <msup> 与 HTML 元素 <sub> 和 <sup> 不同。它们允许作者提供任意 MathML 子树作为脚本，而不仅仅是文本。

下划线和上划线

<munder>、<mover> 和 <munderover> 元素非常相似，只是它们用于附加下划线和上划线。为了避免赘述，我们将让您自己通过以下练习来弄清楚它们的定义。

主动学习：识别下/上划线脚本

在以下示例中，尝试猜测神秘元素（用问号表示）的名称，然后单击按钮以显示解决方案。

<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly two children
  (child1, child2):
  <math>
    <mover>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </mover>
  </math>
</p>
<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly three children
  (child1, child2 and child3):
  <math>
    <munderover>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
      <mtext>child3</mtext>
    </munderover>
  </math>
</p>
<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly two children
  (child1, child2):
  <math>
    <munder>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </munder>
  </math>
</p>

<p><input type="button" id="showSolution" value="Show solution" /></p>

p {
  padding: 0.5em;
}

document.getElementById("showSolution").addEventListener("click", () => {
  const maths = Array.from(document.getElementsByTagName("math"));
  Array.from(document.getElementsByTagName("span")).forEach((span, index) => {
    span.textContent = maths[index].firstElementChild.tagName;
  });
});

主动学习：识别脚本元素

以下 MathML 公式包含更复杂的表达式，嵌套了分数、根和脚本。尝试猜测使用脚本元素 <msub>、<msup>、<msubsup>、<munder>、<mover>、<munderover> 布局的元素。每次单击此类元素时，它都会突出显示并显示确认消息。最后，阅读 MathML 源代码以验证它是否符合您的预期。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with scripted elements</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mroot>
        <mrow>
          <munder>
            <mi>β</mi>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mi>α</mi>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
    <input type="button" id="clearOutput" value="Reset" />
    <div id="output"></div>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

const scriptedElements = Array.from(
  document.querySelectorAll("msub, msup, msubsup, munder, mover, munderover"),
);
const outputDiv = document.getElementById("output");
function clearHighlight() {
  scriptedElements.forEach((scripted) => {
    scripted.classList.remove("highlight");
  });
}
scriptedElements.forEach((scripted) => {
  scripted.addEventListener("click", () => {
    clearHighlight();
    scripted.classList.add("highlight");
    outputDiv.insertAdjacentHTML(
      "beforeend",
      `<p><strong>You clicked an <code>&lt;${scripted.tagName}&gt;</code> element.</strong></p>`,
    );
  });
});
document.getElementById("clearOutput").addEventListener("click", () => {
  clearHighlight();
  outputDiv.textContent = "";
});

更多运算符属性

我们之前已经看到了一些 <mo> 元素的属性，即垂直方向上的拉伸和间距。现在脚本元素可用，我们可以扩展该列表。我们将通过调整我们的前面的示例来做到这一点。

水平方向上的拉伸

让我们首先执行替换 $\beta := z*{1} + z*{2}$ 和 $\alpha := v*{1} + v*{2}$ :

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with horizontal stretchy operators</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mroot>
        <mrow>
          <munder>
            <mrow>
              <msub>
                <mi>z</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>z</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mrow>
              <msub>
                <mi>v</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>v</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

现在我们意识到，底部括号“⎵”和向右箭头“→”会水平拉伸以覆盖替换值的宽度。回想一下，某些垂直运算符可以拉伸以覆盖 <mrow> 内非拉伸同级元素的高度。类似地，某些水平运算符可以拉伸以覆盖 <munder>、<mover> 或 <munderover> 元素中非拉伸同级元素的宽度。

注意：拉伸可以发生在 <munder>、<mover> 或 <munderover> 元素的任何子元素上，而不仅仅是下划线或上划线。

大型运算符和极限

到目前为止，我们的示例实际上已使用 display="block" 属性进行渲染。让我们看看同一个示例，在没有该属性的情况下进行渲染。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with moved limits and small largeop</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math>
      <mroot>
        <mrow>
          <munder>
            <mrow>
              <msub>
                <mi>z</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>z</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mrow>
              <msub>
                <mi>v</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>v</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

正如预期的那样，公式不再居中，渲染被修改以最小化高度。专注于求和符号，可以注意到 sigma 绘制得更小，并且 <munderover> 元素的脚本现在被附加为下标和上标！这是由于“∑”运算符的两个属性。

largeop：如果 <math> 标签具有 display="block" 属性，则运算符将使用更大的字形绘制。
movablelimits：如果 <math> 标签不具有 display="block" 属性，则附加到运算符的下划线和上划线将分别渲染为下标和上标。

注意：largeop 属性实际上与脚本无关，即使具有此属性的运算符通常是脚本化的。movablelimits 属性也适用于 <munder> 和 <mover> 元素。

总结

在本文中，我们完成了对基本布局的回顾，介绍了 <msub>、<msup>、<msubsup>、<munder>、<mover>、<munderover> 元素用于下标、上标、下划线和上划线。使用这些元素，我们能够简要介绍 <mo> 元素的新属性。在下一篇文章中，我们将继续关注表格布局。