Skip to content

Commit

Permalink
Add MathML tutorial (#19467)
Browse files Browse the repository at this point in the history 
* Add MathML tutorial

An introduction to basic MathML constructions, using similar structure
as the lessons for HTML, CSS and JavaScript. This only introduces the
"first steps" module but more advanced topics may be added in the
future.

* fix typo with sub/supp

* find -type f -name *.md | xargs sed -i 's/<html>/<html lang="en-US">/g'

* for x in $(find files/en-us/learn/mathml/first_steps -name *.png); do yarn filecheck "$x" --save-compression; done

* format files

* Don't introduce the display/inline term which are specific to LaTeX / math typesetting, but not mentioned in MathML and confusing with MathML display attribute CSS block/inline. Intead just say whether the <math> has a display="block" attribute or not. Also add an initial note about CSS math-style.

* Update files/en-us/learn/mathml/first_steps/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/getting_started/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/getting_started/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/tables/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/text_containers/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md

Co-authored-by: Ruth John <[email protected]>

* Update files/en-us/learn/mathml/first_steps/scripts/index.md

Co-authored-by: Ruth John <[email protected]>

* Address review comments from @Rumyra

* address review comments from brian

Co-authored-by: Joshua Chen <[email protected]>
Co-authored-by: Ruth John <[email protected]>
  • Loading branch information
@fred-wang @Josh-Cena @Rumyra
3 people committed Sep 5, 2022
1 parent eba9bfb commit 84c6561
Show file tree
Hide file tree
Showing 11 changed files with 2,037 additions and 0 deletions.
307 changes: 307 additions & 0 deletions files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,307 @@
---
title: MathML fractions and roots
slug: Learn/MathML/First_steps/Fractions_and_roots
tags:
- Beginner
- MathML
- Landing
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps")}}

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

<table>
<tbody>
<tr>
<th scope="row">Prerequisites:</th>
<td>
Basic computer literacy,
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
>basic software installed</a
>, basic knowledge of
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"
>working with files</a
>, and HTML basics (study
<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"
>Introduction to HTML</a
>.)
</td>
</tr>
<tr>
<th scope="row">Objective:</th>
<td>
To get familiar with MathML elements used for writing fractions and
square roots.
</td>
</tr>
</tbody>
</table>

## Subtrees of \<mfrac>, \<msqrt> and \<mroot>

In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) 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](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>`](/en-US/docs/Learn/MathML/First_steps/Getting_started#grouping_with_the_mrow_element), 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.

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

```css hidden
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;
}
```

```js hidden
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);
});
});
```

{{ EmbedLiveSample('Active_learning_nesting_different_elements', 700, 600, "", "") }}

## 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.

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

{{ EmbedLiveSample('Stretchy_radical_symbols', 700, 200, "", "") }}

> **Warning:** Special [math fonts](/en-US/docs/Web/MathML/Fonts) are generally required to make that stretching possible, the previous example relies on [web fonts](/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
## Fractions without bar

Some mathematical concepts are sometimes written using fraction-like notations such [binomial coefficients](https://en.wikipedia.org/wiki/Combination) or [Legendre symbols](https://en.wikipedia.org/wiki/Legendre_symbol). 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:

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

```html
<math display="block">
<mrow>
<mo>(</mo>
<mfrac linethickness="0">
<mi>3</mi>
<mi>2</mi>
</mfrac>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mn>6</mn>
<mo>≠</mo>
<mfrac>
<mi>3</mi>
<mi>2</mi>
</mfrac>
</math>
```

{{ EmbedLiveSample('Fraction_without_bar', 700, 200, "", "") }}

> **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](/en-US/docs/Learn/MathML/First_steps/Scripts).

{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps")}}

## See also

- [The `<mfrac>` element](/en-US/docs/Web/MathML/Element/mfrac)
- [The `<msqrt>` element](/en-US/docs/Web/MathML/Element/msqrt)
- [The `<mroot>` element](/en-US/docs/Web/MathML/Element/mroot)
Binary file added files/en-us/learn/mathml/first_steps/fractions_and_roots/mfrac-msqrt-mroot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 84c6561

Please sign in to comment.