在 MathML 入門文章中，我們已經接觸了 <mfrac> 元素來描述分數。讓我們看一個基本示例，其中添加了根元素（<msqrt> 和 <mroot>）。
<math>
<mfrac>
<mtext>child1</mtext>
<mtext>child2</mtext>
</mfrac>
</math>
<br />
<math>
<msqrt>
<mtext>child1</mtext>
<mtext>child2</mtext>
<mtext>...</mtext>
<mtext>childN</mtext>
</msqrt>
</math>
<br />
<math>
<mroot>
<mtext>child1</mtext>
<mtext>child2</mtext>
</mroot>
</math>
下面是瀏覽器渲染此內容的截圖。
- 我們已經知道
<mfrac> 元素被渲染成分數：第一個子元素（分子）繪製在第二個子元素（分母）上方，中間用一條水平線分隔。
<msqrt> 被渲染為平方根：其子元素像 <mrow> 一樣佈局，前面加上根號符號 √，並被一條橫線完全覆蓋。- 最後，
<mroot> 元素被渲染為 n 次方根：第一個元素被根號符號覆蓋，而第二個元素用作根的次數，並作為字首的上標渲染。
這裡有一個練習，用於驗證您是否理解了 MathML 子樹與其視覺渲染之間的關係。文件包含一個 MathML 公式，您必須檢查其中對應於該 MathML 公式子樹的所有子樹。完成後，您可以檢查 MathML 公式源，並驗證它是否符合您的預期。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My page with math characters</title>
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
</head>
<body>
<p>
<math>
<mfrac id="mfrac1">
<msqrt id="msqrt1">
<mn>2</mn>
</msqrt>
<mroot id="mroot1">
<mn>4</mn>
<mn>3</mn>
</mroot>
</mfrac>
<mo>+</mo>
<mroot id="mroot2">
<mn>5</mn>
<mfrac id="mfrac2">
<mn>6</mn>
<mn>7</mn>
</mfrac>
</mroot>
<mo>+</mo>
<msqrt id="msqrt2">
<mn>8</mn>
<mo>−</mo>
<mn>9</mn>
</msqrt>
</math>
</p>
<ol id="options">
<li>
<input
type="checkbox"
data-comment="Verify the order of children in an mfrac!" />
An mfrac with an mroot as its first child and an msqrt as its second
child.
</li>
<li>
<input
type="checkbox"
data-highlight="mroot2"
data-comment="The '6 over 7'-th root of five." />
An mroot with an mn as its first child and mfrac as its second child.
</li>
<li>
<input
type="checkbox"
data-comment="This formula does not contain any fraction inside a square root!" />
An msqrt containing an mfrac element.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of two."
data-highlight="msqrt1" />
An msqrt with one mn child.
</li>
<li>
<input
type="checkbox"
data-comment="Verify the order of children in an mroot!" />
An mroot with an mfrac as its first child and mn as its second child.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of 'eight minus nine'."
data-highlight="msqrt2" />
An msqrt with the following list of children: mn, mo, mn.
</li>
<li>
<input
type="checkbox"
data-comment="The square root of two over the cubic root of four."
data-highlight="mfrac1" />
An mfrac with an msqrt as its first child and an mroot as its second
child.
</li>
<li>
<input
type="checkbox"
data-comment="mfrac must have exactly two children!" />
An mfrac with the following list of children: msqrt, mn, msqrt.
</li>
<li>
<input
type="checkbox"
data-comment="mroot must have exactly two children!" />
An mroot with one mn child.
</li>
<li>
<input
type="checkbox"
data-comment="The fraction six over seven."
data-highlight="mfrac2" />
An mfrac with two mn children.
</li>
<li>
<input
type="checkbox"
data-comment="This formula does not contain any square root with more than two numbers!" />
An msqrt with five mn children.
</li>
<li>
<input
type="checkbox"
data-highlight="mroot1"
data-comment="The cubic root of four." />
An mroot with two mn children.
</li>
</ol>
<p>
<strong id="comment"></strong>
</p>
<p>
<strong id="status"></strong>
</p>
</body>
</html>
math {
font-family: "Latin Modern Math", "STIX Two Math", math;
font-size: 200%;
}
math .highlight {
background: pink;
}
math [id] .highlight {
background: lightblue;
}
p {
padding: 0.5em;
}
const options = document.getElementById("options");
const comment = document.getElementById("comment");
const checkboxes = Array.from(options.getElementsByTagName("input"));
const status = document.getElementById("status");
function verifyOption(checkbox) {
const mathml = checkbox.dataset.highlight
? document.getElementById(checkbox.dataset.highlight)
: null;
if (checkbox.checked) {
comment.textContent = checkbox.dataset.comment;
if (mathml) {
mathml.classList.add("highlight");
} else {
checkbox.checked = false;
}
} else {
comment.textContent = "";
if (mathml) {
mathml.classList.remove("highlight");
}
}
const finished = checkboxes.every(
(checkbox) => !!checkbox.checked === !!checkbox.dataset.highlight,
);
status.textContent = finished
? "Congratulations, you checked all the correct answers!"
: "";
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
verifyOption(checkbox);
});
});
如前所述，<msqrt> 和 <mroot> 元素的橫線會水平拉伸以覆蓋其內容。但實際上，根號符號 √ 也會拉伸以與其內容一樣高。
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
<math display="block">
<mroot>
<msqrt>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</msqrt>
<mn>3</mn>
</mroot>
</math>
某些數學概念有時會使用類似分數的表示法，例如 二項式係數或 勒讓德符號。使用 <mfrac> 元素來標記此類表示法是合適的。對於不繪製橫線的類似分數表示法，請將 linethickness="0" 屬性新增到 <mfrac> 元素。
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
<math display="block">
<mrow>
<mo>(</mo>
<mfrac linethickness="0">
<mn>3</mn>
<mn>2</mn>
</mfrac>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mn>3</mn>
<mo>≠</mo>
<mfrac>
<mn>3</mn>
<mn>2</mn>
</mfrac>
</math>
注意：雖然 linethickness 屬性可以用來指定任意粗細，但最好保留預設值，該值是從數學字型中指定的引數計算得出的。
在本課中，我們學習瞭如何使用 <mfrac>、<msqrt> 和 <mroot> 元素構建分數和根。我們注意到這些元素的某些特殊功能，即分數和根號符號。我們看到了如何使用 linethickness 屬性來繪製無橫線的“分數”。在下一篇文章中，我們將繼續介紹基礎數學符號，並討論 指令碼。