MathML fractions and roots
==========================

* Previous
* Overview: First steps
* Next

Relying on text containers, this article describes how to build more complex MathML expressions by nesting fractions and roots.

|  |  |
| --- | --- |
| Prerequisites: | Basic software installed, basic knowledge of
 working with files, and HTML basics (study
 Introduction to HTML.)
  |
| Objective: | 
 To get familiar with MathML elements used for writing fractions and
 square roots.
  |

Subtrees of <mfrac>, <msqrt> and <mroot>
----------------------------------------

In the getting started with MathML article, we've already met the `<mfrac>` element to describe a fraction. Let's consider a basic example which adds new elements for roots (`<msqrt>` and `<mroot>`):


```html
<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>
```


Below is a screenshot of how it is rendered by a browser:

![Screenshot of mfrac, msqrt, mroot](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots/mfrac-msqrt-mroot.png)

* We already know that the `<mfrac>` element is rendered as a fraction: The first child (the numerator) is drawn above the second child (the denominator) separated by a horizontal bar.
* The `<msqrt>` is rendered as a square root: its children are laid out like an `<mrow>`, prefixed by a root symbol √ and completely covered by an overbar.
* Finally, the `<mroot>` element is rendered as an nth root: The first element is covered by the radical symbol while the second element is used as the degree of the root and rendered as a prefix superscript.
### Active learning: nesting different elements

Here is a simple exercise to verify whether you understood the relation between a MathML subtree and its visual rendering. The document contains a MathML formula and you must check all subtrees corresponding to a subtree in that MathML formula. Once you are done, you can inspect the source of the MathML formula and verify if it matches your expectation.
```

<!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>
  </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>
```


```
math {
  font-family:
    Latin Modern Math,
    STIX Two 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) {
  let mathml = checkbox.dataset.highlight;
  if (mathml) {
    mathml = document.getElementById(mathml);
  }
  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);
  });
});
```

Stretchy radical symbols
------------------------

As previously seen, the overbar of the `<msqrt>` and `<mroot>` elements stretches horizontally to cover their content. But actually the root symbol √ also stretches to be as tall as their content.
```

<link
 rel="stylesheet"
 href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
```



```html
<math display="block">
  <mroot>
    <msqrt>
      <mfrac>
        <mn>1</mn>
        <mn>2</mn>
      </mfrac>
    </msqrt>
    <mn>3</mn>
  </mroot>
</math>
```


**Warning:** Special math fonts are generally required to make that stretching possible, the previous example relies on web fonts.

Fractions without bar
---------------------

Some mathematical concepts are sometimes written using fraction-like notations such binomial coefficients or Legendre symbols. It is appropriate to use an `<mfrac>` element to markup such notations. For fraction-like notations that don't draw a horizontal bar, attach a `linethickness="0"` attribute to the `<mfrac>` element:
```

<link
 rel="stylesheet"
 href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
```



```html
<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>
```


**Note:** Although the `linethickness` attribute can be used to specify an arbitrary thickness, it is better to keep the default value, which is calculated from parameters specified in the math font.

Summary
-------

In this lesson, we've seen how to build fractions and roots using the `<mfrac>`, `<msqrt>` and `<mroot>` elements. We noticed some special feature of these elements, namely the fraction and radical symbol. We've seen how to use the `linethickness` attribute to draw fractions without bars. In the next article, we will continue with basic math notations and consider scripts.

* Previous
* Overview: First steps
* Next
See also
--------

* The `<mfrac>` element
* The `<msqrt>` element
* The `<mroot>` element