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> 元素的新屬性。在下一篇文章中，我們將繼續關注表格佈局。