From 76b14470d8de2ed78e2d0a751727916a1b768269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Thu, 21 Jul 2022 08:21:54 +0200 Subject: [PATCH 01/20] 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. --- .../first_steps/fractions_and_roots/index.md | 318 ++++++++++ .../fractions_and_roots/mfrac-msqrt-mroot.png | Bin 0 -> 6957 bytes .../first_steps/getting_started/index.md | 225 ++++++++ files/en-us/learn/mathml/first_steps/index.md | 53 ++ .../learn/mathml/first_steps/scripts/index.md | 544 ++++++++++++++++++ .../learn/mathml/first_steps/tables/index.md | 343 +++++++++++ .../first_steps/text_containers/index.md | 421 ++++++++++++++ .../text_containers/operator-spacing.png | Bin 0 -> 15626 bytes .../index.md | 142 +++++ .../xelatex-output.png | Bin 0 -> 29027 bytes files/en-us/learn/mathml/index.md | 47 ++ 11 files changed, 2093 insertions(+) create mode 100644 files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md create mode 100644 files/en-us/learn/mathml/first_steps/fractions_and_roots/mfrac-msqrt-mroot.png create mode 100644 files/en-us/learn/mathml/first_steps/getting_started/index.md create mode 100644 files/en-us/learn/mathml/first_steps/index.md create mode 100644 files/en-us/learn/mathml/first_steps/scripts/index.md create mode 100644 files/en-us/learn/mathml/first_steps/tables/index.md create mode 100644 files/en-us/learn/mathml/first_steps/text_containers/index.md create mode 100644 files/en-us/learn/mathml/first_steps/text_containers/operator-spacing.png create mode 100644 files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md create mode 100644 files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/xelatex-output.png create mode 100644 files/en-us/learn/mathml/index.md diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md new file mode 100644 index 000000000000000..82b0bfef110dbb5 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -0,0 +1,318 @@ +--- +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. + + + + + + + + + + + + +
Prerequisites: + Basic computer literacy, + 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 ``, `` and `` + +In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) article, we've already met the `` element to describe a fraction. Let's consider a basic example which adds new elements for roots (`` and ``): + +```html + + + child1 + child2 + + +
+ + + child1 + child2 + ... + childN + + +
+ + + child1 + child2 + + +``` + +Below is a screenshot of how it is rendered by a browser: +* We already know that the `` element is rendered as a fraction: the first child (the numerator) and is drawn above the second child (the denominator) separated by a horizontal bar. +* The `` is rendered as a square root: its children are laid out like an [``](/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 `` 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. + +![Screenshot of mfrac, msqrt, mroot](mfrac-msqrt-mroot.png) + +### 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 + + + + + My page with math characters + + + +

+ + + + 2 + + + 4 + 3 + + + + + + 5 + + 6 + 7 + + + + + + 8 + − + 9 + +

+ +
    +
  1. + + An mfrac with an mroot as its first child and an msqrt as its second child. +
    2. +
  2. + + An mroot with an mn as its first child and mfrac as its second child. +
    3. +
  3. + + An msqrt containing an mfrac element. +
    4. +
  4. + + An msqrt with one mn child. +
    5. +
  5. + + An mroot with an mfrac as its first child and mn as its second child. +
    6. +
  6. + + An msqrt with the following list of children: mn, mo, mn. +
    7. +
  7. + + An mfrac with an msqrt as its first child and an mroot as its second child. +
    8. +
  8. + + An mfrac with the following list of children: msqrt, mn, msqrt. +
    9. +
  9. + + An mroot with one mn child. +
    10. +
  10. + + An mfrac with two mn children. +
    11. +
  11. + + An msqrt with five mn children. +
    12. +
  12. + + An mroot with two mn children. +
    13. +
+

+ +

+

+ +

+ +``` + +```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: .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'); + } + let finished = true; + checkboxes.forEach(checkbox => { + if (!!checkbox.checked != !!checkbox.dataset.highlight) + finished = false; + }); + 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 `` and `` elements +stretches horizontally to cover their content. But actually the root symbol √ +also stretches to be as tall as their content. + +```html + + + + + My page with stretchy radical symbols + + + + + + + + 1 + 2 + + + 3 + + + + +``` + +{{ 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 `` element to markup such notations. For +fraction-like notations that don't draw a horizontal bar, attach a +linethickness="0" attribute to the `` element: + +```html + + + + + My binomial coefficient + + + + + + ( + + 3 + 2 + + ) + + = + 6 + ≠ + + 3 + 2 + + + + +``` + +{{ 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 +``, `` and `` 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 `` element](/en-US/docs/Web/MathML/Element/mfrac) +* [The `` element](/en-US/docs/Web/MathML/Element/msqrt) +* [The `` element](/en-US/docs/Web/MathML/Element/mroot) diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/mfrac-msqrt-mroot.png b/files/en-us/learn/mathml/first_steps/fractions_and_roots/mfrac-msqrt-mroot.png new file mode 100644 index 0000000000000000000000000000000000000000..71b083515240e282fb0b017e0c65875d2de0b711 GIT binary patch literal 6957 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 + + + Prerequisites: + + Basic computer literacy, + basic software installed, basic knowledge of + working with files, and HTML basics (study + Introduction to HTML.) + + + + Objective: + + To understand the basic syntax of MathML and how to integrate it in + HTML pages. + + + + + +## Inserting formulas in HTML via the `` element + +MathML uses the same syntax as HTML to represent a tree of elements and +attributes. In particular, each mathematical formula is represented by an +element `` which can be placed inside an HTML page. In the following +document, it is inside a paragraph of text: + +```html + + + + My first math page + + + +

The fraction + + + 1 + 3 + + + is not a decimal number.

+ + + +``` + +The `` element specifies a fraction with a numerator (its first child) +and a denominator (its second child). This is how it renders in your browser: + +{{ EmbedLiveSample('Inserting_formulas_in_HTML', 700, 100, "", "") }} + +> **Warning:** If you just see "1 3" instead of a fraction, then your browser may not support MathML. Check out the [browser compatibility table](/en-US/docs/Web/MathML/Element/math#browser_compatibility) for further details. + +### Inline and display modes + +Note that in the previous example, the formula is on the same line as the text +of the paragraph, this is called *inline* mode. However, it is quite common for +large mathematical formulas to use *display* mode: they are instead centered on +their own line as shown below. To achieve that, one only need to attach a +`display="block"` attribute on the `` element. + +```html hidden + + + + My first math page + + + +

The fraction + + + 1 + 3 + + + is not a decimal number.

+ + + +``` + +{{ EmbedLiveSample('Inline_and_display_modes', 700, 100, "", "") }} + +You may also notice some subtle change in the appearance: the text and vertical +spacing of the fraction becomes a bit bigger. +In *inline* mode, the height is minimized to avoid disturbing the flow +of the surrounding text. In *display* mode, priority is instead put on +legibility of the mathematical formula. + +> **Note:** This corresponds to the LaTeX's concept of *inline* formulas +> (delimited by dollar signs `$...$`) and *display* formulas (delimited by +> `\[...\]`). + +## Grouping with the `` element + +The `` element can actually contain an arbitrary number of children and +will essentially render them in a row. For instance, the simple formula +"1 + 2 + 3" would be be encoded like this in MathML: + +```html + + 1 + + + 2 + + + 3 + +``` + +The `` element is a generic container that performs similar layout but +can be placed anywhere in the MathML subtree. It is helpful to group several +elements together. For instance, the numerator of the following fraction (its +first child) is "one plus two". + +```html + + + + 1 + + + 2 + + 3 + + +``` + +### Active learning: nested expressions + +As an exercise, figure out how to write the following expressions using +only the MathML elements we've seen so far. If you are stuck or want to verify +the solution, check the source code of the example. + +```html hidden +
    +
  1. "one half" plus "two third": + + + + 1 + 2 + + + + + 2 + 3 + + +
    2. +
  2. "one plus two plus three" over "four plus five": + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + +
    3. +
  3. "one quarter" over "two plus three": + + + + 1 + 4 + + + 2 + + + 3 + + + +
    4. +
+``` + +{{ EmbedLiveSample('Active_learning_nested_expressions', 700, 200, "", "") }} + +## Summary + +In this article, we have taken a look at how to use the `` element to insert a mathematical formula inside a HTML document. We have learned about the difference between *inline* and *display* formulas and how to specify them via the `display` attribute of the `` element. +In addition, we stumbled upon a couple of other MathML elements: `` for fractions, `` for grouping and finally a few text elements. We will analyze these [text containers](/en-US/docs/Learn/MathML/First_steps/Text_containers) further in the next article. + +{{LearnSidebar}}{{NextMenu("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps")}} + +## See also + +* [Using MathML](/en-US/docs/Web/MathML/Authoring#using_mathml) +* [The `` element](/en-US/docs/Web/MathML/Element/math) +* [The `` element](/en-US/docs/Web/MathML/Element/mfrac) +* [The `` element](/en-US/docs/Web/MathML/Element/mrow) +* [The `math-depth` property](/en-US/docs/Web/CSS/math-depth) diff --git a/files/en-us/learn/mathml/first_steps/index.md b/files/en-us/learn/mathml/first_steps/index.md new file mode 100644 index 000000000000000..a8f0f76261a5912 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -0,0 +1,53 @@ +--- +title: MathML first steps overview +slug: Learn/MathML/First_steps +tags: + - Beginner + - MathML + - Landing + - first steps +--- +{{LearnSidebar}} + +MathML is the markup language used to write mathematical formulas in Web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML. + +> **Callout:** +> +> #### Looking to become a front-end web developer? +> +> We have put together a course that includes all the essential information you need to +> work towards your goal. +> +> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) + +## Prerequisites + +Before starting this module, you should have: + +1. Basic familiarity with using computers and using the Web passively (i.e. looking at it, consuming the content.) +2. A basic work environment set up, as detailed in [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software), and an understanding of how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files). +3. Basic familiarity with HTML, as described in [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML). + +> **Note:** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). + +## Guides + +This module contains the following articles, which will take you through all the basic theory of MathML, and provide opportunities for you to test out some skills. + +- [Getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) + - : In this article, we will take a simple HTML document and view how to add MathML formulas into it, introducing a few elements along the way. +- [Text containers](/en-US/docs/Learn/MathML/First_steps/Text_containers) + - : Now that you get a better idea of MathML, we move focus on text containers (variables, numbers, operators, ...) which are used as building blocks of MathML formulas. +- [Fractions and roots](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots) + - : Relying on text containers, this article describes how to build more complex MathML expressions by nesting fractions and roots. +- [Scripts](/en-US/docs/Learn/MathML/First_steps/Scripts) + - : We continue the review of basic math notations and focuses on building MathML elements with scripts. +- [Tables](/en-US/docs/Learn/MathML/First_steps/Tables) + - : Once all basic math notations are known, it remains to consider tabular layout which can be used for matrix-like expressions and other advanced math layout. + +## Assessments + +The following assessment will test your understanding of the MathML basics covered in the guides above. + +- [Three famous mathematical formulas](/en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas) + - : With the things you have learned in the last few articles, you should already be able to write relatively sophisticated MathML formulas. This assessment gives you a chance to do that. diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md new file mode 100644 index 000000000000000..ee525feb25294d8 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -0,0 +1,544 @@ +--- +title: MathML scripted elements +slug: Learn/MathML/First_steps/Scripts +tags: + - Beginner + - MathML + - Landing +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} + +We continue the review of basic math notations and focuses on building MathML elements with scripts. + + + + + + + + + + + + +
Prerequisites: + Basic computer literacy, + basic software installed, basic knowledge of + working with files, and HTML basics (study + Introduction to HTML.) +
Objective: + To get familiar with basic MathML elements producing scripted elements. +
+ +## Subscripts and superscripts + +Similarly to what we saw in the [previous article](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots), the ``, `` and `` have a special structure expecting exactly two elements (for ``, ``) or three elements (for ``): + +```html +

msub: + + + child1 + child2 + + +

msup: + + + child1 + child2 + + +

+

msubsup: + + + child1 + child2 + child3 + + +

+``` + +Below is the rendering of the above example in your browser. You should notice +that: + +* The second child of the `` element is attached as a subscript of + its first child. +* The second child of the `` element is attached as a superscript of + its first child. +* The second and third children of the `` element are respectively + attached as a subscript and superscript of its first child. +* The text inside scripts is scaled down. + +{{ EmbedLiveSample('Subtrees_of_msub_msup_msubsup', 700, 200, "", "") }} + +> **Note:** The MathML elements `` and `` are different from the +> HTML elements [``](/en-US/docs/Web/HTML/Element/sup) and +> [``](/en-US/docs/Web/HTML/Element/sup). They allow to use an arbitrary +> MathML subtree as scripts, not just text. + +## Underscripts and overscripts + +The ``, `` and `` elements are very similar except +that they are used to attach underscripts and overscripts. Instead of giving +details, we will let you figure out their definitions yourself with the +following exercise. + +### Active learning: Recognize under/over scripts + +In the following example, +try to guess the names of the mystery elements (written as question +marks) and click the button to reveal the solution: + +```html hidden +

<????????> element + with exactly two children (child1, child2): + + + child1 + child2 + + +

+

<????????> element + with exactly three children (child1, child2 and child3): + + + child1 + child2 + child3 + + +

+

<????????> element + with exactly two children (child1, child2): + + + child1 + child2 + + +

+ +

+``` + +```css hidden +p { + padding: .5em; +} +``` + +```js hidden +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; + }); +}); +``` + +{{ EmbedLiveSample('Subtrees_of_munder_mover_munderover', 700, 400, "", "") }} + +### Active learning: Recognize scripted elements + +The following MathML formula contains a more complex expression, nesting +fractions, roots and scripts. Try to guess the elements laid out with scripted +elements ``, ``, ``, ``, ``, ``. +Each time you click such an element, it is highlighted and a confirmation +message is displayed. Finally, read the MathML source to verify whether that +corresponds to your expectation. + +```html hidden + + + + + My page with scripted elements + + + + + + + + β + ⎵ + + + 3 + + + + + | + + α + → + + | + + + s + 3 + + + − + + + ∑ + + i + = + 1 + + n + + + + + a + i + + − + + K + 0 + i + + + + + + +
+ + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +```js hidden + 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', + `

You clicked an <${scripted.tagName}> element.

`); + }); + }); + document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; + }); +``` + +{{ EmbedLiveSample('Active_learning_recognize_scripted_elements', 700, 400, "", "") }} + +## More operator properties + +We have previously seen some [properties of the `` element](/en-US/docs/Learn/MathML/First_steps/Text_containers#operator_properties_of_mo) +namely stretching in the vertical direction and spacing. Now that scripted +elements are available, we can extend that list. We will do that by tweaking +our [previous example](#active_learning_recognize_scripted_elements). + +### Stretching in horizontal direction + +Let's first perform the substitutions + + β + ≔ + + + z + 1 + + + + + z + 2 + + + +and + + α + ≔ + + + v + 1 + + + + + v + 2 + + +: + +```html hidden + + + + + My page with horizontal stretchy operators + + + + + + + + + + z + 1 + + + + + z + 2 + + + ⎵ + + + 3 + + + + + | + + + + v + 1 + + + + + v + 2 + + + → + + | + + + s + 3 + + + − + + + ∑ + + i + = + 1 + + n + + + + + a + i + + − + + K + 0 + i + + + + + + + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +{{ EmbedLiveSample('Stretching_in_horizontal_direction', 700, 200, "", "") }} + +We now realize that the bottom bracket "⎵" and the rightward arrow "→" +stretch horizontally to cover the width of the substitued values. Recall that +[some vertical operators can stretch](/en-US/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators) to cover the height of +non-stretchy siblings inside an ``. +Similarly some horizontal operators can stretch +to cover the width of non-stretchy siblings in an ``, `` or +`` element. + +> **Note:** Stretching can happen for any child of the +> ``, `` or `` element, not just the underscript +> or overscript. + +### Large operator and limits + +So far our example has actually been rendered in [*display* mode](/en-US/docs/Learn/MathML/First_steps/Getting_started#inline_and_display_modes). Let's detach the +`display="block"` attribute from the `` element to show up some +interesting changes: + +```html hidden + + + + + My page with moved limits and small largeop + + + + + + + + + + z + 1 + + + + + z + 2 + + + ⎵ + + + 3 + + + + + | + + + + v + 1 + + + + + v + 2 + + + → + + | + + + s + 3 + + + − + + + ∑ + + i + = + 1 + + n + + + + + a + i + + − + + K + 0 + i + + + + + + + +``` + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + +{{ EmbedLiveSample('Large_operator_and_limits', 700, 200, "", "") }} + +As expected, the formula is no longer centered and the rendering is modified to +minimized the height. Focusing on the summation symbol, one can notice that +the sigma is drawn smaller and that the scripts of the `` element +are now attached as a subscript and a superscript! This is due to two +properties of the "∑" operator: + +* *largeop*: The operator is drawn with a bigger glyph in *display* mode. +* *movablelimits*: The underscripts and overscripts attached to the + operator are respectively rendered as subscripts and superscripts in + *inline* mode. + +> **Note:** The *largeop* property is actually unrelated to scripts, even though +> operators having this property are typically scripted. The *movablelimits* +> property is taken into account for `` and `` elements too. + +## Summary + +In this article, we've finished reviewing basic layout introducing elements +``, ``, ``, ``, ``, `` for +subscripts, superscripts, underscripts and overscripts. Using these elements, +we were able to briefly introduce new properties of the `` element. +In the next article, we +will continue focus on [tabular layout](/en-US/docs/Learn/MathML/First_steps/Tables). + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} + +## See also + +* [The `` element](/en-US/docs/Web/MathML/Element/msub) +* [The `` element](/en-US/docs/Web/MathML/Element/msup) +* [The `` element](/en-US/docs/Web/MathML/Element/msubsup) +* [The `` element](/en-US/docs/Web/MathML/Element/munder) +* [The `` element](/en-US/docs/Web/MathML/Element/mover) +* [The `` element](/en-US/docs/Web/MathML/Element/munderover) diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md new file mode 100644 index 000000000000000..bc31d4ddbe34df3 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -0,0 +1,343 @@ +--- +title: MathML tables +slug: Learn/MathML/First_steps/Tables +tags: + - Beginner + - MathML + - Landing +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}} + +Once all basic math notations are known, it remains to consider tabular layout which can be used for matrix-like expressions and other advanced math layout. + + + + + + + + + + + + +
Prerequisites: + Basic computer literacy, + basic software installed, basic knowledge of + working with files, and HTML basics (study + Introduction to HTML. and HTML tables) +
Objective: + To get familiar with MathML tabular elements and be aware of some + use cases. +
+ +## MathML tabular elements + +The MathML tabular elements are similar to the ones for [HTML tables](/en-US/docs/Learn/HTML/Tables): the `` element represents a table, the +`` element represents a row and the `` element represents a cell. +An `` table can be inserted anywhere in a MathML formula. The `` +cell can contain any number of MathML children and will lay them out +as an `` container. + +Tables are typically used for matrix-like expressions (including vectors). +Here is a basic example taken from the [article about the CSS +`matrix()` function](/en-US/docs/Web/CSS/transform-function/matrix): + +```html + + + + + My first matrix + + + + + + ( + + + + a + + + c + + + 0 + + + + t + x + + + + + + b + + + d + + + 0 + + + + t + y + + + + + + 0 + + + 0 + + + 1 + + + 0 + + + + + 0 + + + 0 + + + 0 + + + 1 + + + + ) + + + + +``` + +{{ EmbedLiveSample('MathML_tabular_elements', 700, 200, "", "") }} + +## Allowing cells to span multiple rows and columns + +This is again similar to [HTML's article](/en-US/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns). The `` element accepts +the `columnspan` and `rowspan` attributes to indicate that the cell spans +multiples rows and columns. Below the inner matrix spans two columns of +the outer matrix: + + +```html hidden + + + + + My matrix with columnspan + + + + + + ( + + + + + ( + + + + a + + + c + + + + + b + + + d + + + + ) + + + + 0 + + + T + + + + + 0 + + + 0 + + + 1 + + + 0 + + + + + 0 + + + 0 + + + 0 + + + 1 + + + + ) + + + + +``` + +{{ EmbedLiveSample('allowing_cells_to_span_multiple_rows_and_columns', 700, 200, "", "") }} + +> **Note:** For historical reason, the MathML attribute for column spaning is +> called `columnspan` not `colspan`. + +## Usage for advanced layout + +Besides representing matrix-like objects, MathML tables are sometimes used for +advanced layout inside mathematical formulas, +for example in [Wikipedia's definition of +Legendre symbol](https://en.wikipedia.org/wiki/Legendre_symbol). Here, the +different cases are written on three different rows while the values and +conditions are placed on two different columns. + +```html hidden + + + + + My first matrix + + + + + + + ( + + a + b + + ) + + = + + { + + + + 1 + + + if  + a +  is a quadratic residue modulo  + p +  and  + a +  is not a multiple of  + p + ; + + + + + − + 1 + + + if  + a +  is a non-quadratic residue modulo  + p + ; + + + + + 0 + + + if  + a +  is a multiple of  + p + . + + + + + + + + +``` + +{{ EmbedLiveSample('Usage_for_advanced_layout', 700, 200, "", "") }} + +> **Warning:** The [`` article](/en-US/docs/Web/MathML/Element/mtable) +> provides more advanced layout options via special attributes such as +> alignment or spacing. This is inherited from the original design of MathML, +> that was supposed to work in +> engines that are not CSS-aware. However, these attributes may not be +> implemented in all browsers. In the future, it is likely that usages of +> `` for layout-only purpose (i.e. not actual matrix-like objects) +> can be replaced with CSS-based alternatives. + +## Summary + +In this article, we've reviewed the +``, `` and `` elements which are the equivalent of HTML +elements for tables. We have seen how to use them for representing matrix-like +objects and how it is sometimes used for advanced layout. + +You've nearly finished this module — we only have one more thing to do. In the [three famous mathematical formulas assessment](/en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas) you'll use your new knowledge to rewrite a small mathematical article using HTML and MathML. + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}} + +## See also + +* [Learning about HTML tables](/en-US/docs/Learn/HTML/Tables) +* [The `` element](/en-US/docs/Web/MathML/Element/mtable) +* [The `` element](/en-US/docs/Web/MathML/Element/mtr) +* [The `` element](/en-US/docs/Web/MathML/Element/mtd) diff --git a/files/en-us/learn/mathml/first_steps/text_containers/index.md b/files/en-us/learn/mathml/first_steps/text_containers/index.md new file mode 100644 index 000000000000000..1497143279d2d4c --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -0,0 +1,421 @@ +--- +title: MathML Text Containers +slug: Learn/MathML/First_steps/Text_containers +tags: + - Beginner + - MathML + - Landing +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}} + +Now that you get a better idea of MathML, we move focus on text containers (variables, numbers, operators, ...) which are used as building blocks of MathML formulas. + + + + + + + + + + + + +
Prerequisites: + Basic computer literacy, + basic software installed, basic knowledge of + working with files, HTML basics (study + Introduction to HTML) and some CSS notions on text styling (read fundamental text and font styling and + web fonts). +
Objective: + To get familiar with MathML elements used for writing text and be aware + of special behaviors. +
+ +## Unicode characters for mathematics + +Mathematical formulas involve many special characters, for example greek letters (e.g. Δ), fraktur letters (e.g. 𝔄), double-struck letter (e.g. ℂ), binary operators (e.g. ≠), arrows (e.g. ⇒), integral symbols (e.g. ∮), summation symbols (e.g. ∑), logical symbols (e.g. ∀), fences (e.g. ⌊) and many more. Wikipedia's article [Mathematical operators and symbols in Unicode](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode) provides a good overview of the characters used. + +Since most of these characters are not part of Basic Latin Unicode block, it is recommended to specify your [document's character encoding](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding) and to serve it with appropriate [web fonts](/en-US/docs/Learn/CSS/Styling_text/Web_fonts). Here is a basic template to use UTF-8 encoding and the [Latin Modern Math](/en-US/docs/Web/MathML/Fonts#fonts_with_a_math_table) font: + +```html + + + + + My page with math characters + + + +

∀A∊𝔰𝔩(n,𝔽),TrA=0

+ + +``` + +{{ EmbedLiveSample('Unicode_characters_for_mathematics', 700, 100, "", "") }} + +## A bit of semantics... + +We noticed in the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) article that the text in MathML formulas are wrapped in specific container elements such as the `` or ``. More generally, every text in MathML formulas must be included inside such container elements, called *token* elements. In addition, MathML provides multiple token elements in order to distinguish different meanings of the text content: + +* The `` element, which represents a symbolic name or arbitrary text that should be rendered as an identifier. Examples: `x` (variable), `cos` (function name) and `π` (symbolic constant). +* The `` element represents a "numeric literal" or other data that should be rendered as a numeric literal. Examples: `2` (integer), `0.123` (decimal number) or `0xFFEF` (hexadecimal value). +* The `` element represents an operator or anything that should be rendered as an operator. For example `+` (binary operation), `≤` (binary relation), `∑` (summation symbol) or `[` (fence). +* The `` element is used to represent arbitrary text. For example short words in formulas such as `if` or `maps to`. + +### Active learning: recognize token elements + +Below is a more complex example, which says that the absolute value of a real +number is equal to that number if and only if it is nonnegative. Spot the +different token elements and what they are used for. +Each time you click the corresponding text, it is highlighted and a confirmation +message is displayed. Finally, read the MathML source to verify whether that +corresponds to your expectation. + +```html hidden + + + + + My page with math characters + + + + + + + | + x + | + + = + x + +  iff  + + x + ≥ + 0 + + + +
+ + +``` + + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + + +```js hidden + const tokenElements = Array.from(document.querySelectorAll('mi, mo, mn, mtext')); + const outputDiv = document.getElementById("output"); + function clearHighlight() { + tokenElements.forEach(token => { + token.classList.remove('highlight'); + }); + } + tokenElements.forEach(token => { + token.addEventListener('click', () => { + clearHighlight(); + token.classList.add('highlight'); + outputDiv.insertAdjacentHTML('beforeend', + `

You clicked an <${token.tagName}> element.

`); + }); + }); + document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; + }); +``` + +{{ EmbedLiveSample('Active_learning_recognize_token_elements', 700, 400, "", "") }} + + +> **Note:** It is sometimes difficult to decide the token element to use for +> a given text content. In practice, choosing the wrong element should not cause +> major issues because all token elements are generally +> rendered the same by browser implementations (for visual display and for +> assistive technologies). However, the `` and `` elements have special +> distinguishing features that one should be aware of. They are explained +> in the following sections. + +## Automatic italicization of `` + +One typographic convention in mathematics is to use italic letters for variables. +In order to help with that, `` elements with a single character may be +automatically rendered as italic. This is the case for all the letters from the +latin and greek alphabets. Compare the rendering of the two `` +elements in the following formula: + +```html + + sin + x + +``` + +> **Note:** [This table from MathML Core](https://w3c.github.io/mathml-core/#italic-mappings) +> provide the exhaustive list of characters that are subject to italicization, +> together with the corresponding italic characters. + +It is sometimes needed to revert this default italic transformation. For that purpose, just attach a `mathvariant="normal"` attribute on the `` element. +Compare the rendering of the uppercase gamma letters in the following formula: + +```html + + Γ + Γ + +``` + +> **Note:** Although the [`mathvariant`](/en-US/docs/Web/MathML/Global_attributes/mathvariant) provides other values to perform such transformations, it is recommended to just pick the desired [Mathematical Alphanumeric Symbols](https://en.wikipedia.org/wiki/Mathematical_Alphanumeric_Symbols) when possible. + +## Operator properties of `` + +MathML contains an [operator dictionary](https://w3c.github.io/mathml-core/#operator-dictionary-human) that defines default properties of `` elements depending on their content and the position within its container (prefix, infix or postfix). Let's consider a concrete example: + +```html + + + + + + + + + + + + + +
Prefix plus + + + + i + +
Infix plus + + j + + + i + +
Prefix sum + + ∑ + i + +
+``` + +This example should render similarly to the screenshot below. Observe the spacing between the `i` elements and its preceding ``: no spacing for the prefix plus, some spacing for the infix plus and some smaller spacing for the prefix summation symbol. + +![Screenshot of the MathML formula with different operator spacing](operator-spacing.png) + +Operators have many other properties that we will see in more details later. For now, remember to use an `` container for characters in the operator dictionary and to properly group subexpressions with `` elements in order to help MathML renderers to provide a good rendering. + +### Active learning: spot the difference + +Now that you are a bit familiar with special features of `` and ``, +let's rewrite the `

` element in the +[example at the top of the page](#unicode_characters_for_mathematics) with some +actual MathML. Compare the visual rendering in your browser and explain +the differences with the text-only version. + +```html + + + + + My page with math characters + + + +

∀A∊𝔰𝔩(n,𝔽),TrA=0

+

+ + ∀ + + A + ∊ + + 𝔰𝔩 + + ( + n + , + 𝔽 + ) + + + + , + + + Tr + A + + = + 0 + + +

+ +
+ + +``` + +```css hidden +div { + padding: .5em; +} +``` + +```js hidden +document.getElementById('showSolution').addEventListener('click', () => { + document.getElementById('solution').insertAdjacentHTML( + "beforeEnd", + `
    +
  • The <mi> elements containing the "A" and "n" variables are rendered in italic. However, the <mi> elements with multiple characters "𝔰𝔩" or whose character is "𝔽" are still rendered upright.
    • +
  • Spacing is automatically added around the <mo> elements whose text is "∀", "∊", "=" or a comma. However, some of them have no spacing added before while the parentheses still have no spacing around them.
    • +
` + ); +}, {once: true}); +``` + +{{ EmbedLiveSample('active_learning_spot_the_difference', 700, 500, "", "") }} + +> **Note:** An obvious difference is that the source code became much more verbose with MathML. Recall that this tutorial is about learning the language but in practice MathML content is generally not written manually. See the [Authoring MathML](/en-US/docs/Web/MathML/Authoring) page for more information. + +### Active learning: stretchy operators + +The operator dictionary defines a default *stretchy* property as well as +corresponding *stretch axis* for some operators. For example, an operator +can stretch vertically by default to cover the maximum height of non-stretchy +siblings within its `` container. By tweaking a bit the +[previous exercise](#active_learning_recognize_token_elements), one can +make operators stretch vertically. Can you find them? As usual, you are invited +to read the source code when you are done. + +```html hidden + + + + + My page with stretchy operators + + + + + + + | + + 1 + x + + | + + = + + 1 + + | + x + | + + + = + + 1 + x + + +  iff  + + x + ≥ + 0 + + + +
+ + +``` + + +```css hidden +.highlight { + color: red; +} +math { + font-size: 200%; +} +``` + + +```js hidden + const tokenElements = Array.from(document.querySelectorAll('mi, mo, mn, mtext')); + const stretchyMoElements = Array.from(document.getElementsByTagName("mo")).slice(0, 2); + const outputDiv = document.getElementById("output"); + function clearHighlight() { + tokenElements.forEach(token => { + token.classList.remove('highlight'); + }); + } + tokenElements.forEach(token => { + token.addEventListener('click', () => { + clearHighlight(); + token.classList.add('highlight'); + let message = ""; + let tagName = `<${token.tagName}>`; + if (token.tagName !== "mo") + message = `No, this is an ${tagName} element!`; + else if (!stretchyMoElements.includes(token)) + message = `No, this is an ${tagName} element, but it's not vertically stretched.`; + else + message = `Correct, this ${tagName} element is indeed stretched to the height of its <mfrac> sibling.` + outputDiv.insertAdjacentHTML('beforeend', + `

${message}

`); + }); + }); + document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; + }); +``` + +{{ EmbedLiveSample('Active_learning_stretchy_fences', 700, 400, "", "") }} + +> **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). + +## Summary + +In this article, we have learnt about a few *token* elements that are used as text containers as well as their different semantics, namely `` (identifier), `` (numbers), `` (operators), `` (generic text). We have seen special Unicode characters that are commonly found in math formulas and given an overview of some observable behaviors of the `` and `` elements. In the next article, we will see how to rely on *token* elements to build much complex expressions such as [fractions and roots](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots). + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}} + +## See also + +* [The `` element](/en-US/docs/Web/MathML/Element/mi) +* [The `` element](/en-US/docs/Web/MathML/Element/mn) +* [The `` element](/en-US/docs/Web/MathML/Element/mo) +* [The `` element](/en-US/docs/Web/MathML/Element/mtext) diff --git a/files/en-us/learn/mathml/first_steps/text_containers/operator-spacing.png b/files/en-us/learn/mathml/first_steps/text_containers/operator-spacing.png new file mode 100644 index 0000000000000000000000000000000000000000..9e328ee75463442aaab7722bc99673ecb7e19685 GIT binary patch literal 15626 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 Dxdgvq literal 0 HcmV?d00001 diff --git a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md new file mode 100644 index 000000000000000..cee554163e2f7ed --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md @@ -0,0 +1,142 @@ +--- +title: Three famous mathematical formulas +slug: Learn/MathML/First_steps/Three_famous_mathematical_formulas +tags: + - Beginner + - MathML + - Landing +--- +{{LearnSidebar}}{{PreviousMenu("Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} + + + + + + + + + + + + +
Prerequisites: + Before attempting this assessment you should have already worked through + all the articles in this module, and also have an understanding of HTML + basics (study + Introduction to HTML). +
Objective:To have a play with some MathML and test your new-found + knowledge.
+ + +## A small math article + +The goal is to rewrite the following math article using HTML and MathML: + +![Screenshot of the PDF output generated by XeLaTeX](xelatex-output.png) + +Although you don't need to be familiar with +[LaTeX](https://en.wikipedia.org/wiki/LaTeX), it might be useful to know the +LaTeX source from which it was generated: + +``` +\documentclass{article} + +\usepackage{amsmath} +\usepackage{amssymb} + +\begin{document} + +To solve the cubic equation $t^3 + pt + q = 0$ (where the real numbers +$p, q$ satisfy ${4p^3 + 27q^2} > 0$) one can use Cardano's formula: + +\[ + \sqrt[{3}]{ + -\frac{q}{2} + +\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}} + }+ + \sqrt[{3}]{ + -\frac{q}{2} + -\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}} + } +\] + +For any $u_1, \dots, u_n \in \mathbb{C}$ and +$v_1, \dots, v_n \in \mathbb{C}$, the Cauchy–Bunyakovsky–Schwarz +inequality can be written as follows: + +\[ + \left| \sum_{k=1}^n {u_k \bar{v_k}} \right|^2 + \leq + { + \left( \sum_{k=1}^n {|u_k|} \right)^2 + \left( \sum_{k=1}^n {|v_k|} \right)^2 + } +\] + +Finally, the determinant of a Vandermonde matrix can be calculated +using the following expression: + +\[ + \begin{vmatrix} + 1 & x_1 & x_1^2 & \dots & x_1^{n-1} \\ + 1 & x_2 & x_2^2 & \dots & x_2^{n-1} \\ + 1 & x_3 & x_3^2 & \dots & x_3^{n-1} \\ + \vdots & \vdots & \vdots & \ddots & \vdots \\ + 1 & x_n & x_n^2 & \dots & x_n^{n-1} \\ + \end{vmatrix} + = {\prod_{1 \leq {i,j} \leq n} {(x_i - x_j)}} +\] + +\end{document} +``` + +## Starting point + +To get this assessment started, you can rely on our usual HTML template. +By default it uses UTF-8 encoding, special Web fonts for the `` +and `` tags (with similar look & feel as the LaTeX output). The goal +is to replace the question marks `???` with actual MathML content. + +```html + + + + + Three famous mathematical formulas + + + +

To solve the cubic equation ??? (where the real numbers ??? + satisfy ???) one can use Cardano's formula: ???

+ +

For any ??? and ???, the Cauchy–Bunyakovsky–Schwarz + inequality can be written as follows: ???

+ +

Finally, the determinant of a Vandermonde matrix can be calculated + using the following expression: ???

+ + +``` + +## Hints and tips + +* Start by distinguishing the *inline* and *display* formulas and set the + `display` attribute accordingly. +* Check the text used and + find their [Unicode characters](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode) ("−", "ℂ", "∑", ...). +* Analyze the semantics of each portion of text (variable? operator? number?) + and determine the proper token element to use for each of them. +* Look for advanced constructions (fractions? roots? scripts? matrices?) and + determine the proper MathML element to use for each of them. +* Don't forget to rely on `` for grouping subexpressions. +* Pay attention to stretchy and large operators! +* Use the [W3C validator](https://validator.w3.org/nu/) to catch unintended + mistakes in your HTML/MathML markup. +* If you are stuck, or realize how painful it is to write MathML by hand, + feel free to use tools to help + [write MathML](/en-US/docs/Web/MathML/Authoring) such as + [TeXZilla](https://fred-wang.github.io/TeXZilla/). + +{{LearnSidebar}}{{PreviousMenu("Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} diff --git a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/xelatex-output.png b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/xelatex-output.png new file mode 100644 index 0000000000000000000000000000000000000000..c0c08ba3f97801c8be40417216b7067d422f9a92 GIT binary patch literal 29027 zcmb@sbx>Www=Q^);O_1ooB+Yy-Gc|W;O-8=A-KD{I|O%^gS#KxokxE6-MLfmubHXY zRj2mZy;rYZ^7Xg6c6XSfyaXZ~9vlDwK$MacRR#bc?f?MrRv3uSmXY7@=ASoQC$S$+ zBDU7nCN@q05eE|kClg~5R|_X|5(z0eMGb!>>`x(BJ4sDP0DzJF-w({KP{8F=6+lr| zRqW&AV{L71dU{$=P!I?NzQ4bpo}Pa8SXx@b#>SSFm3@1Adwzb#!NIw`yf?C z2S-Ikjf{+hgoFeG1MBSUyt})@z`$T(VNq38B_}6$a&mfoecjsHy1u^N*w{cqLTYPk zgMffII5=QtX5QW11%W{O`}+$E3)hJ3Hv;=n@hVg@uK&v9VWIS3*KU>+9>t$jHXV#$UdCK|w*u$jH#p z&=?vTN=Zra@bH+Mn=>*p^78UJIy(CG>(|)W7z_-ImX;O~5m9e%@8slUb93{zZ{J{H zVXLdF9UL5HXJ<`KO*=X|9334cB_-qIF&S4l}p<>lqm)6*#_Da*>r*xA`RI5^VM(yXnm@$vC%YHCD9MRRg;{QdoZ z{P>}updcV15EK*?78Yh=Vj?3WbAEnqYinCyUq3Q3vc0{1a&n@qtnBIOnUIh$H8rKA zr1bs!cWG(q)YR0Kl@%x`sLaevG&Hn7fBy9K^%)o#l$4YtCnq;GHGTd1m6n#)*Vot0 z&8@t=+{(&|kdSa-U?4m^ytK6R_wV0kW@dk%G%TrfZ$Hm3n+}xCtljGvzs;a6Q92^V{4b9EX zB_Sb6OiWBlN z2YtL(mzR}8lYV0S|H&0yOw?#b|8*$;Z_gFNc4mqUQ-}9~E)fh;wAq*ZLuB#c?yYU~ zRsR!st}p^E$YrVn>&CTF+q?dbWNEvFXd^9xve!rGVlnfqOD@Z~c3~re7?imRVOHUxs^Pbm8r0>j|oY65EAYZfc$S=^)Z1QpIV$S!U{@Kay3-ew?;LB+kAs@xkOrKV} zG*2(=5t%TWeu?X8DQ~oEN|~n+R^B|Msy~BX*39>{Oh3|mK>?9|!OxYJVIdh#)wa?Q zSyiK(7yCKBN&N0-xoHJEdjytW@l_vbqVAz^sB*a&L;dXuLusH%(Kj^#u$_WBo*H%6Q{lpV5B4gZyKY*Hg$S7rkOeN2 z#G&~}S^_bqvu$uuIL4)a`Liv32EA7VzLVLQpus?r9s|`K`HJ9Tv`;KP7FH4&`o_DR zChGcP&Z_@b|OXVe>Nnb_B{w z4S{6b8+Kvj*u}EVatUSfP~IuG@-z(|JsyuA2ga&Kvt)(PtlYZDJkYLvy-B1E4-a{k z)IH+$vxJ+jT1@j6`}?ny1-S8L`b27H!tpt-6)XbKH6Nq^!c;b(-P3mP`x}$-%VtKq zy-bI|v&{CO&?e3tkdM#wuiHz`*jyGTS>iZ2o77L^xEyJTyKj65Q`aMV2)WdVRT7j# zuA*rfWK81Eg2RH@-={9Gf2(bJPVz$6b>sX!->(?GL>Fae6;u&}drSdg=0vynL|yFa zG!S$O_~tTMvI~TCC7MzT3A?!5dnBLiUgPInG0SlmuL5#i;G-Lbjw0+oUJ

TZne3tsx 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%0A(^u`ii- zeXORE*OCQ`$%$a{m>Ncuz<7n$Q%b8@^a;r+B@i(er3@Nm75<8lt6%FOh z8~C;2ZTG)&uxDCFuqdsQBs0nsZv;-;@kvd0ApHJbQUR zSGq%SIV5>r{UtL@yPw7&Es=`d9Iua$08*=J$wI_53)K?ND*VR|Xq>1SX@5-0c=w-s zt|5{R_xet>5d;3YUxH+pa2(;p-USe+ME5)Qr65loJ8$H!nen>fB6DpTa6!k7n)rO8glkN zCUjKd9_<(?PFEODThFgO@t`WpAd;@SQ{6H2mGf0>gQG@W<18Fi-hZnSz`*kTHGh;* z+cgFL=nwk!&#uJdh<8h}Pe{`N)<0|n(=X%5HB3z7>LCrETON1jOLjdiv&>ihwt^7KAf;>_;>=DPo9}QjVRZs%s83+%%c#{}{aNPdu`$ z3|a|BQ=b-YqdDfLjjE;;fIB_SrZGBETT>HYiPjAYB@^cwXQ%l0_(o4lAkbAq)AB-wO7MTy>i-YVelH`VDcOjvxih=~ zjDv}F?~V$0VS2Zg*aCI!zab3-2Xlw8M%wz;`{9-zo2R*U?zV6O?k zFMvTsX>l0WJ8NXt!-+1bzHj2$Rj`* z!cRt5;Mb*^lyoV!YFsh)t)u*Qk~Q@AX01_YMFkW~fL$plpIh!m?;PfYmbK{gjp7i) zVWXV6Jn_msj z9Bmtu3PvtkPJiT0EsIXR?7NKKHE`n}6Y=?%f|0l}@vDv5nt}Z6?X)+S)bNZ}N)CF&ed`%|FfO0j>lg*x0cY+i}pz+qS;T z2;`)WfDE=y@Jx$zj>`gkMwNjnI(p)of2!h?DQeUu4ivFscCE4Wm6NooE8Ak;eLT`sK{bR>zC+$#KLt zpZBHpR8QA~c+YcAw)%F*>gVYoJtR&(3+awHXruJ-JNT~#>y+m`SUVdH?m_!xK z>Z7@z8>24Qt%P&blFTdT&8Vb2oY&V>tz_E7%YVQD_%XJFZ@GEOs#-06^C!qaRN_+x z_J39OoncLNOSm8w6cG>s0V#@rC`CE~p%>{L6a*Bc6M9WZ0@9^R?@~f<(mP5=dhbCx z3B80sXgBzM=XvhA&;4_L?!DK{erM*LSvzabUO9D=j!&&pVR`wjt84Byp3VEvx*WH; z)7#Pw@u~D_x?R0vFh$2ty$@zPho1#|DFgA!5;}Zvs~~6gS=PNI7&H&M!V-FN&jPqU zO8C$9q>g>DXU5+&n&_#@0m>J5Dm5zt7TkopitUqxUm^42#WHbF29_}6Z91?vvg9<+ zzP2&@-1W-BTHq|gsu`k^y1r5L?GKfM5WA6Y|q z$Dp&&>}}wh>pdPLAvDrgORZ>ve&%ZsBDmfd={CR|V57J;n=R)9pRwg?coVS_HtAE|+E@pC$ z8%*LJ<2+gh!98B%IJPN=7U|nh|ATEwr!fYEnojqpEZiiDc=0=VOcN5@T=AmF zFBLl(@3r}Ovtn0uY#}cQc#TM()xxpzo#RO0{9in(O+0ejHK%gol)Hx6&k<*UtHO)1 zDv)8wNK)%mIMoe{A@mO6EAEC8hBp>d&}F0n?MPdInety33BO5J>3eBD> zeu>RS`Tnf3tuM8SzKyd$gk8CE)?%9_nW+cc=1w0X{w!VuNXBnnK`Sf3*$Y3{x zwXbZMImP!}uqHBhySSVhBI<1V2VEwv!aOIbX9W_T=2Qt-wB%B~OAZYn$-4G-kQ9na z7FzT~N^uQxnX7@ibpZAOs}I<#gV66=UOPB@QgiH!yLw0s$L(D_5MSP}Xo!>bsuJ*? zpl&-7n+HF{pgxT*4({ZZ#4UgRxRgUlJ zCzAr{)Q>T6`#)|`We*YHormiKy=+58ui$_Hw8~#oc?}s#LpMYVUG!Cy5`>vnP0- z^OssxZ*0^e$^@v18RY&d6GTgkAYLaHxz71(q*K{9o$ZZu_>dGM<_-(xZFaag)KXpT zt}+Y48H`L!wZkrCZZ9h)%--g0ubfyZq8PrB3;8FC{bTFZz~TNazz_H4Z^bW=z=CFi z*?rxm>b~^J7$f$cJSc^c2@@I;6tF?LH-(cgpIBi}E@;tl9_gyR_7bU#^CWl+rZzz_ zDLM2$9l%fA z86bRNi2iiZYHHB0_}Jn^jf61Eqdce4?Bu4FNp*exWUUp-h1n$Bj{?X5#^tgC1YX)& zw$ycop2XaHl1^ih95+>4va8Ccw;t4MQJ4%0OU@b4&lDAeY)#{RWI_X35XyoDRIp~K z_TbBQA?eX)6ZkDbTZSf#bWh^Rmtfw zzbk^LIeLPaK?65!nR7Gom(1nquHHKHMNTVRJkrm5znr(tU$6FzL5miT-JJVktz7`C z<1}gXG)btvcMSJ}a*twQrW&sB@H7EO8}1N_u@Yw?SN$6HH zC%Yf$s>0qZUtNBnWWe=h6q)TanP{z8p%z%J>FT$NfCQO0JiYpGr6{K3o3dL?6X~)Q zDmJxJ;Cf;u(4JDH|7T|9ZstrL_*#>1FZXo$_Zy&rVoOYSVB2jxO!)>PZAPO24E$y) zHW?Zs_9o%<_BkvE`W$Xn%Pjm{#lBO&)XT#bua-`WK_p7Gj(H|_0^YmaW=h~qdP`g6 zm@kmBj=4UF{#$oo?`=FXPL1uU(fcziaT|U^Kac>-VmZEqA3bhdjKbPdGB#wQ>D#BQgsD=2QBIl|+9c*El3Zdu-SWr6!%1t57e-d*T7z1!m*+K{ z;mA%=0>)aD zF03h2M&~8Em=6}K@g+nga7%iPhgx?FPYuGkIf8J^BB=<_-UE@PT59m9PBvDFL<+<4}N?k@RpzqV=dG=b!uO8eZy4!HVPZFu$Cc)RUd6m64TxFjTld~vfiloSUWdYI=Z<^ zUtRtgLx{lt_>;&XB;n+Bl5$U9K2HfB$ECKPqN5 zOl5$Bw&7XXP@|Wv)BBqHgO@Hy18w+ZZ3#G8A6nyS|7f$cDrdT#y4FUEW_b109TNI} zw&yey8{Z8Mr*O|+%;7WvqKCs^MHs66JtmEAj9VX;iA*=m@Ku?n6A$A|920iu4SxZ= zob~a)olbTNO<37U-#IbQnytRoaF}1Z>Yj{|`*Hbl&h~)|-+HZLbAhz_R-gs_fjB0c z(p)RDS$iJDwO?tnREwgDuG1>5L@n&YwhW0}R4gbjW$mlqHa??A`pGzv-`)QjL@GrZ zCG-4k(7y7hT#())vZwU2QdRWmgco!XCENkjl?a#D^s>3*8}GDZOQ?Ix%qx`|gnRp3 zX5Q=`?p~d*&p9*mv4c4O(ys&ans+I?NSVv>!T(Y1v!00c|XCc z_e+Ob#Dvk-wVFB- zbeRiXW@wsY(ZrKztcSAH-5V?XRdBDj@atJsl|aPHe1xmu0f2q5=AvB3ojWZC)kD&} zGd>xIA}>@z2dktj%YNwC_m`PvD05JJ-vEjcoiBhr9KZ6^PM0PhBK1MjEkQDjP9Uh`S-4T`9C zN`Y;Iy|l$?y9L~*l~pD-VtkR!f^}uPWnS{fv59o!e)0pgDsNAU)0jp<)7ice8AA1^ zb4fg=s$YbN1iMeUMO}n75P3qCVGsPzMikFdeL~ZpG6&Q{!e0Pp%jy$2q+}_f4 z+T+ed>zW0q?VEC_B^%e|4(f<@M{k{e^!3b&qTEgYtw1C$l0Do`-)niW{JyD zI2N_6|Nc5<#W$wdeL%0(`Kl-WMrgspNljg3rSw!1h!NDSe=Hgo;eCYr%G0>FfT31N z`uQ%W=V-Fa`w^uJI9+ohz4?lIqU%Eg=>T7}y_es%4Vb@QVy?L8~iB{!ZAS z=_N?O8c0yhG&YACQb(yXh5w zAj>orZV`IfNQ!JMQ}m?IK`4i;O7m0uS8B0VS(e-%R#{O^fz8CmFwPYgw)1B5e6ca4 zm+5L1&o=gDe9kLnYGzIn{~(K>B$Rhco3K4?F@1EG>lX$UhVFiP#?b)g@HGfPYYPFZn)T>rWni)*`Df z;YqAVGA434u+0Qz=h%*%4j2z33aJ<`%(TctOFFfmOMVt%0%@|rHaC^tmT?LdW1o1! zRW#_Xt%$X?47B4!^XO2=gkz@D@OurPM%Q z?rl744)-%}9BxczoLh_RiG5a*eg zGEfliqP=ercm>bZXKmqJ99pnTA{|?${kU5TAZ2=+Rq~wCh%f0cRy)VfBNfC-H9R#g zF4dJNqEOSNUPhM4Pdh?*dMb+TY4?3muRf(IR8!_T33UIGL4PoR@x)F>YkV^Jrgw~? zPfnPC@R5z9hvO`qM%X#tULEjqN&@$OItxkKjOt5J-dv2@V^oGu>FAp1^@%FvJtuv1TdCSm_pH55M5$l1i*Rj9GW;5~I8mW%M zcJ^3@LChm0egCr?4;vZzU>^3Ytfx`7Pkq%k(l;1Y*SF!I%#;-WdwuIj_me|sSLN`r z|GlW{0I06CjvBj8IYmE>Oj*hMwpp;@GiV_r&Sj(7DoFwor zJ`1x`K8W=Lcke$DRVNsiEm-H3UUXn`Qe=L5{0*wFVe@q_(IN-i`n%M=Z+1&EO>SI} z1Rtrfk)ob=x6vMX&MLeN#BINW>@iQspzr#F>s?528X&XRfXnOrTMif$(D&)iRRN#+ zDPM-IhV zRgTvGc``m2P}*0{FRxRc@#HND^N_1P+WfEMPywVODN(c^_c*o2iHbGJVbNLz^9XwC%Dy6lOd{rG!{WI>N||CLtc$Te*jkeq0NW!>Yh| zn{M=Mfhzmza>7C2P{?|7P-b1HnzeK2C# zNpl8X-9HaS{~X(PmbtF${Ws%2!L?-v<%+ixfKTHi0?9|JU%cc!APK@w30%1fJ3CRM zIv??mGq?$owdNdqPGkjFLwk2xV%#G!FmpnzrJ~J#|=Z$-;yj z3}!!#F;#JuhC04M+G+MWzOIZB4HMwN82;cf^g0QoiqEq-#Uw~0YzUO;f%@$c0z07` zl&Z2johuH$B)8fj7OumKEL+qqJ7gghl~Z8Mn*=$zH`>rPP z*#>K}_`G_8{Bi7Hb2eBaSF-vq2cOHyTzy_zD5|Zwl}ttgmwD1}9cUhDF>rfBJol{H zPqb$Jc<$yVX^!f&EAap*C&5r6$<2joqy#iP^iBvJBP(Tso zLs9%L4@e>%`Hb;qcH=w+2jQ1o5AD^Z4nj(Dd`bLePdUl2H)Tm`9ez?rv^k_bF71q$ z?(f)0CG)+^fSt51Hm#ahH;4@KiZrB7?}$lTh^LF2rw<%0V)|T~D=OfFUix28tq9u1 z9z54FcGCi9AKUtWV7n~@3-?5+otNR)C!R=P82(UQ*{MlqyV=fVtgBW&7nch&_!&XN zsJidNyMW+nvFg}mpnmuRKsy30JS2*ExU-A@L~+f_36+tqT*YHmE=x0kx%1( zn&R;ZuMf>RT+9~co_-KWu;R~%@UUkFpP$0aE;SjdTN>0(+wc#hNbMVIQr^5n;WK`| z;km2;kVt2Z6g1K(7kTCqF~%ym0|Os#)iAugsxp!j^1`(t!C^*aP_3;W?#Rf9Vdn{7t|Zl z)|e8zCk0~@&33pBz|bHboRN;HA)Hd~aHH81zpb()@l^g%Bj-(*v-ovKSPkc%>hiAc z9UMNc$U6)b#)3Vr$01Bg?)5Jw9CR4PCQK9Tw6Ma^K@xx58g>KhjyXU_W&e zM9N*NLQIJDlG56gEfntrfl%NB+?{tHW^CrW1HI0_F$9ko2ZOKFS&TgTVnI46B=SGv z;*&V>8#=`}areLCYPW*yP!P~^!@uJ8UiuUE+oV{aKZ zwQ%-|_ zE@Jq|ruHQ%=1ER3ix{j;VBmfbC+_}tnHyN7)Ha&QjT|6Z@7P)*;D-_WFs7Ydw^*g+ zUANndp4pg77hd{D>bOSx6Lzj$Q)0yGl-PW;b!NL2!1gpY*pt(uk;xxf_*4w{Kr-(x)(*tFfRZP%635?(WqIr}bx9;06SuP4Zy+cW_#=Ua!GhKqOY% zT9{>S_PHXLQNs@UBfK)apX9zB5ZDA<@IK#3vndNKsiLH?_nHOObz#!%rbpl8ugYqY zWFurdz*Q!lu~obczjwf5>dZ~cSv;LT&v#P6Wu^^!5kxK@@a_T7y#e|m{C7m!$xd~@ zE53K%x-~ud90!T~(RO)!mab07A_I)nc-;nCpx5O!8j_Sv{}%GapSMW%FbLU00bS3{ zap9BTvi=5QMAI0o)_*ogPN&Jv%C~s8!LI=L`MrQ$6V_m>*(|&OL&b)7rhUpFnb?J! zlkx(emLD-h$)ZY|d(v189*UwByCg7#O_Fp)S4v?{AMk41s0idlZCkeJ==so~uEVfw zqeA4BW*eQ@BN^0L?;!Z{G8Wix68OQUs>FbLqe-kPs|9)}XnSaBy*)<~Hzw_qeM#im zSf6XZz-iC^s%1Gp-tR^FJF4ez>FF+RIrx0gPnsEayXLiDdM2IimVGQ!N*fGcj=b5l4XE;3jd@nl_ z@Y`aO7Jzp+uZxjS=S=q5AC|M@9tFlMBofmVQTX>5(KF}Tnk4F^yXc%Um(#&Ze4wnGO{AW}Mg1A8z`HoPXf`H$z@$>FiGu__@2OC4LrPT;uWd>B&6V z#Fr9nFg`76ZSIdRRH5uJCix@WKxNNo*aS!2^Bv!tB(St_m)2W;*>(xi5VuKO{E8F# zW`Swci-1~98FR@QSHh=`5KE99PpwAmEW+*7)A{@;dGLkpaMfb*m1aX z^3>Ph6qGAKRJ#1Y$uh_eo5?2nqL_&vr#`=Md+66}(?%}LI}=mF01}k>r5>faeYNFo z=6chR!8--n?q1rRj}sP}dO>A44>h%wXH1y%|9aqv+qy7MbAk>md5oi1B=)9k!`5n^ z&bY}*7eo8RNs37P4ENPhCQJSu&Ge6p_eD0Ca#;0FQbpoNhVh#66i`p=Kd+W9yqsiC z`n5K|Mij@>0co+5Qkb<1 z_B*Am_T;Oo-u-pEb}SO~B4`ZuG(rz^v^~2TX13}sivC8rN*+y;z0d1DP?41m_Pga| zWo4~pb5=tAXPGcRa3i6d(_;RebR%#mLV;*}N!sx@!H_ey_!OT~nAQ!8l!i zbT>=%y69AX7I)|LJ4Ih|{iUdIdAbNy=Q-#qp5~h5bngdKiOir)S4za!uC}?~Upk1@ zl*TcBord>tv!VrO7b7}~@h3b0S8La6@f_Ubqi|)PlN6F5pO$^u&ZL*x<><3Pju3Uy zQXAjvpVXSgG1mRWvwcd7|AzP3?Y9tmZj3f@?C>%BnIrldLz8DHKu6l_>dY9x4c#3u z%|hXDf|hTB4|Kz8b3QMR7{*Ff(lO%l$dnynSzkZMYQGwU671+!Dh8kbexJL=B^crU zq91~SJ>%sGb0(2egZ#_(bgg;ko}U~OnS~;AOz}cq-_FLkuxnLtw?-1x(Y*3WL(l%< zj1(}b+dp+5mmdUb<8S9@izf~&*I)CxpO}i*JiH`;%rj3EAO#(keoZ?D+D{oXbZYUh z>GBh49Q?V-4K9xwL>qhLLLaQtJu*kNc@%Vlz$Ca9*;lL}J0lMJ9w2J7Nejk`yZRX= z?OD*7VN)#ILAy|GwDV)%r8jLrfrD#}2fYr;MPQ_F1=#)W{bV`QAFPHVfH&tXUu~y? zT^^0ob=g1v{Jlr=t}H=u4j;B2IEYc6()!L_oB!={1k zG!Nm8iWci8Jtg_9EIMx2<0c(9Mx5$d5Pvm=}=0gnOvrpac$AXj!j1jY{ zlP-fSCs~wQr<;Xv9mG;!tiROrOQb;?G5VN{J*(2{H`gakNXF;QBJ;_%o8ka3rh;@< z;(bb9&6=LsZ#4f7E3^8eNq$LxIWS*cZ?^Q{3&S|A#)UU>$E-YU#c}6{gqDeGAtMWqTa=US`%}HGhC$_Y@8%_lm)sdh}hh3JR2-o!A{mG#WB+YEsG*P;;;Uq zsU7n(LaAH$nVb z*NuqPwPRgp`5f|x^TbT0Uhx+)RK7>EW&_d86{8Un5WEXixAELtVq`sVau3{H2 z1Y5>GZLpMSBd{t_hRrKW8$$fj6`dcRhZK}Uld*wJG~-z;2DHrf7sS$B9aDPnm|H=2viLoZ0ZM(Y)rD%yDwa|M zh4W6ZU)E+aE!t%L$P=g0O$~#yKJv^p|rneyW9`TJvkWZpx5ksc4 z_TlK{m&4d9Vnj`@B8&;E(NvMJ%_PMCS*k-<214Ww4TfZ2pB6H_eTi)p#r(atA*~c=Ife~|ymGsL7 z&f>HkYC)J(>FHRIS=<|2RQ^r5>5PjBdOEkPIFd}h^d zls$q0zvia!ePT&}JxolN4;pr~?N-fOLAJZ=O>(KGf$lKi&I_C}Plyl8=QP@Ue5{&x zE;k+}=2ha2+CJ_jFK_47Y1@n12^EK*P^m+R&`O)kc41uFJ2ObcA=NoiUNbY+Z2z=L zM6~A|YIx>2pL#Wlc;Y@*VezvS$hBlDf#&Gv5|4f~1~9izb{Z7&x}Vn!KQ&vSyXQ0y z{_q<>u+RM+bbdp^Wtj>ulePtqbpGVl&lg3dU0kHV7ZXvNigdX@Eg^;5QVK(+f9eQG zDFE*Q`O7hni|wlnU)%-VzYRX&TDNwq6$6iH4Y9y&y7_WT?vOqh-&CN>ZU2wp>r8A) zg-)V-{&CTn-70Z>Zl0ndt9Ig=HX5%r0~^HrMEV93v`);;CtDjbG4r4WZ8pR{#vY~j zIZ11rKmz@V{^8?8B`SZEX@Mf*_xP}!J;2*i8zK~N(_Cl4bEt}#?W;SV0@5pSjSr2j zYdNfNeuqbr*IakfQHXtC>H^5zinEL!@#O8d+T1?fLt!%-tVuAxTMxZa$?>Ro*IK%{dv&kXl;Q(DSdWn?PJ?H@*rj{?`m2!vo9K~Ko_;G7Je3lO>4lufC>Sq# zN}&6d&^+U`EfB^1Z~?YduF;enquHv1wHWJ{czC$A_;I4)L)2E6{$%{cw-NqpYiyWw zdS|8iQ};xLXy*GD!{^jh=I>mHQ)+XykL`xhY@WVp7GpE?YQefcx^@q}f@@Ee?piQg zR04`3uB4rvd*b9Qq|3pY>Mdd3c9%PWNJu~sphjl5@@o({*WCFfQ&yX zd2*DexPLD21R?5eUI0pq3r0Pi(Hm9@Ez3f?j&TAWY_L$`K^=ez;r=hgF5bP z^5e7YM(SGF`{%2mYrgrR@W*F6+Oi(50_~BAASXF0ZIa;}?EBd8#EU~_jPnwe;_5&e zu;sI7bn57xae{*Q9ss|`FkWC7Rray_7$S|Nw1lC)@Ytc0U7IA&=zL`(1E%<(P|RZF zg9Y(}ucav!{IWscn)2w?n{qdbP-m`&vojjLR=Kj+3nvC~vk|?Wc$)x$NN*er5k{;y zz1yYBY)PzOuIQ3#`utB%oKA#Wr}#OX^gXv~IDgLcT=jS{gGw0u8(NW z%iGwWcRWr@J+@4DO?2`alb>@3GjbE?{s@pS8Nw8TDX3DNnumjqg|0Iri`n+UWZcGkU)9rI!K)Bidq$Z4SJ>u3m( zjH}?A8IbIIFN^j@QM98y5EmADPJ65DVO7qg(KuNgsZ8O$l7;cHwe99s{vT-GvwY#Q zuqsN$$E8!O!n!ZZ_ZoAGacP&l%dak?9B;Q(MpoQ{4+ZH-pE=6JEjUrmZ-?F|{_nAm z@|sPKA^fJ+Vs(&)p1LhR-5Sci7h&%~KbGD#TSPd$3Gs2m2HyUveE2*2P?CJepyDg) zsc`eAYZO1f!lm7U){|WzV#O&=ZWc*T^RBH?2N%_5vM=lwR`=(neIrfUUl!caULd@- z&8Im-GH)12fg_r|A4_}%A5d?7h_T(GaPprq*!T)Rb4%Q7#%niW)lH$6e?oEUIO01J z7k}7*EdNA~JDlG72^GE&6m?S}A%0R$!`bpbEO-5HLxoze@W<|x%8R~pXug(IkX4l_ Jk^1=M{{RAQJsSW3 literal 0 HcmV?d00001 diff --git a/files/en-us/learn/mathml/index.md b/files/en-us/learn/mathml/index.md new file mode 100644 index 000000000000000..9ef2effa8f00f0d --- /dev/null +++ b/files/en-us/learn/mathml/index.md @@ -0,0 +1,47 @@ +--- +title: Writing mathematics with MathML +slug: Learn/MathML +tags: + - Beginner + - Guide + - MathML + - Intro + - Learn + - Topic +--- +{{LearnSidebar}} + +Mathematical Markup Language — or {{glossary("MathML")}} — is the markup language used to write mathematical formulas in Web pages using fractions, scripts, radicals, matrices, integrals, series, etc. Although it was originally designed as an independent XML language, MathML is generally directly embedded inside {{Glossary('HTML')}} documents and can be seen as an extension of HTML. + +> **Warning:** In practice, MathML content is generated from [lightweight markup languages](https://en.wikipedia.org/wiki/Lightweight_markup_language) (e.g. [LaTeX](https://fr.wikipedia.org/wiki/LaTeX)) or using [graphical user interface](https://en.wikipedia.org/wiki/Graphical_user_interface): if you just need to integrate mathematical formulas in your web pages, the tips from the [Authoring MathML](/en-US/docs/Web/MathML/Authoring) page should be enough. + +> **Callout:** +> +> #### Looking to become a front-end web developer? +> +> We have put together a course that includes all the essential information you need to +> work towards your goal. +> +> [**Get started**](/en-US/docs/Learn/Front-end_web_developer) + +## Prerequisites + +Before attempting to learn MathML, it is assumed that you have some basic knowledge of [HTML](/en-US/docs/Learn/HTML) and [CSS](/en-US/docs/Learn/CSS). Consequently, you are strongly advised to get familiar with at least these two technologies first. Start by working through the following modules: + +- [Getting started with the Web](/en-US/docs/Learn/Getting_started_with_the_web) +- [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML) +- [Introduction to CSS](/en-US/docs/Learn/CSS/First_steps) + +Some familarity with mathematical notations and [TeX](https://fr.wikipedia.org/wiki/TeX) rendering rules might also come in handy, even though required concepts will be explained as needed. + +## Modules + +This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one. + +- [MathML first steps](/en-US/docs/Learn/MathML/First_steps) + - : MathML is the markup language used to write mathematical formulas in Web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML. + +## See also + +- [MathML on MDN](/en-US/docs/Web/MathML) + - : The main entry point for MathML documentation on MDN, where you'll find detailed reference documentation for all features of the MathML language. Want to know all the values a property can take? This is a good place to go. From a21c0b949e5d51231cdb2864f88424433fb94ed4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 12 Aug 2022 21:08:57 +0200 Subject: [PATCH 02/20] fix typo with sub/supp --- files/en-us/learn/mathml/first_steps/scripts/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index ee525feb25294d8..1bfd5bd77a93119 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -83,8 +83,8 @@ that: {{ EmbedLiveSample('Subtrees_of_msub_msup_msubsup', 700, 200, "", "") }} > **Note:** The MathML elements `` and `` are different from the -> HTML elements [``](/en-US/docs/Web/HTML/Element/sup) and -> [``](/en-US/docs/Web/HTML/Element/sup). They allow to use an arbitrary +> HTML elements [``](/en-US/docs/Web/HTML/Element/sub) and +> [``](/en-US/docs/Web/HTML/Element/sup). They allow to use an arbitrary > MathML subtree as scripts, not just text. ## Underscripts and overscripts From f459b8cdd7a8702b9aa1b45aaed4cf4363d3db7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 12 Aug 2022 21:10:58 +0200 Subject: [PATCH 03/20] find -type f -name *.md | xargs sed -i 's///g' --- .../learn/mathml/first_steps/fractions_and_roots/index.md | 6 +++--- .../learn/mathml/first_steps/getting_started/index.md | 4 ++-- files/en-us/learn/mathml/first_steps/scripts/index.md | 6 +++--- files/en-us/learn/mathml/first_steps/tables/index.md | 6 +++--- .../learn/mathml/first_steps/text_containers/index.md | 8 ++++---- .../three_famous_mathematical_formulas/index.md | 2 +- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md index 82b0bfef110dbb5..cf813245bd3a300 100644 --- a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -82,7 +82,7 @@ Here is a simple exercise to verify whether you understood the relation between ```html hidden - + My page with math characters @@ -234,7 +234,7 @@ also stretches to be as tall as their content. ```html - + My page with stretchy radical symbols @@ -271,7 +271,7 @@ fraction-like notations that don't draw a horizontal bar, attach a ```html - + My binomial coefficient diff --git a/files/en-us/learn/mathml/first_steps/getting_started/index.md b/files/en-us/learn/mathml/first_steps/getting_started/index.md index 8cc95e83bd12535..fd32b1cb013dc94 100644 --- a/files/en-us/learn/mathml/first_steps/getting_started/index.md +++ b/files/en-us/learn/mathml/first_steps/getting_started/index.md @@ -48,7 +48,7 @@ document, it is inside a paragraph of text: ```html - + My first math page @@ -84,7 +84,7 @@ their own line as shown below. To achieve that, one only need to attach a ```html hidden - + My first math page diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index 1bfd5bd77a93119..dc72e71633e1641 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -161,7 +161,7 @@ corresponds to your expectation. ```html hidden - + My page with scripted elements @@ -302,7 +302,7 @@ and ```html hidden - + My page with horizontal stretchy operators @@ -415,7 +415,7 @@ interesting changes: ```html hidden - + My page with moved limits and small largeop diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md index bc31d4ddbe34df3..0476400cf297227 100644 --- a/files/en-us/learn/mathml/first_steps/tables/index.md +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -55,7 +55,7 @@ Here is a basic example taken from the [article about the CSS ```html - + My first matrix @@ -148,7 +148,7 @@ the outer matrix: ```html hidden - + My matrix with columnspan @@ -243,7 +243,7 @@ conditions are placed on two different columns. ```html hidden - + My first matrix diff --git a/files/en-us/learn/mathml/first_steps/text_containers/index.md b/files/en-us/learn/mathml/first_steps/text_containers/index.md index 1497143279d2d4c..e63e2e60abb9141 100644 --- a/files/en-us/learn/mathml/first_steps/text_containers/index.md +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -48,7 +48,7 @@ Since most of these characters are not part of Basic Latin Unicode block, it is ```html - + My page with math characters @@ -82,7 +82,7 @@ corresponds to your expectation. ```html hidden - + My page with math characters @@ -240,7 +240,7 @@ the differences with the text-only version. ```html - + My page with math characters @@ -316,7 +316,7 @@ to read the source code when you are done. ```html hidden - + My page with stretchy operators diff --git a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md index cee554163e2f7ed..7d1d59bf37333d9 100644 --- a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md +++ b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md @@ -101,7 +101,7 @@ is to replace the question marks `???` with actual MathML content. ```html - + Three famous mathematical formulas From b973607eaa9fc2723e34057257f96022b5afe06f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 12 Aug 2022 21:19:19 +0200 Subject: [PATCH 04/20] for x in $(find files/en-us/learn/mathml/first_steps -name *.png); do yarn filecheck "$x" --save-compression; done --- .../fractions_and_roots/mfrac-msqrt-mroot.png | Bin 6957 -> 3204 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/mfrac-msqrt-mroot.png b/files/en-us/learn/mathml/first_steps/fractions_and_roots/mfrac-msqrt-mroot.png index 71b083515240e282fb0b017e0c65875d2de0b711..f1fb314732fee95cb7362c1065727102c66d0e49 100644 GIT binary patch delta 3176 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 Date: Sat, 13 Aug 2022 12:01:52 +0800 Subject: [PATCH 05/20] format files --- .../first_steps/fractions_and_roots/index.md | 95 +++--- .../first_steps/getting_started/index.md | 209 ++++++------ files/en-us/learn/mathml/first_steps/index.md | 3 +- .../learn/mathml/first_steps/scripts/index.md | 320 ++++++++---------- .../learn/mathml/first_steps/tables/index.md | 69 ++-- .../first_steps/text_containers/index.md | 224 ++++++------ .../index.md | 63 ++-- files/en-us/learn/mathml/index.md | 3 +- 8 files changed, 444 insertions(+), 542 deletions(-) diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md index cf813245bd3a300..95faa8b24e4d4a1 100644 --- a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -8,8 +8,7 @@ tags: --- {{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. +Relying on text containers, this article describes how to build more complex MathML expressions by nesting fractions and roots. @@ -40,7 +39,7 @@ MathML expressions by nesting fractions and roots.
-## Subtrees of ``, `` and `` +## Subtrees of \, \ and \ In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) article, we've already met the `` element to describe a fraction. Let's consider a basic example which adds new elements for roots (`` and ``): @@ -51,7 +50,7 @@ In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Gettin child2 -
+
child1 @@ -60,7 +59,7 @@ In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Gettin childN -
+
child1 @@ -70,15 +69,16 @@ In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Gettin ``` Below is a screenshot of how it is rendered by a browser: -* We already know that the `` element is rendered as a fraction: the first child (the numerator) and is drawn above the second child (the denominator) separated by a horizontal bar. -* The `` is rendered as a square root: its children are laid out like an [``](/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 `` 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. + +- We already know that the `` element is rendered as a fraction: the first child (the numerator) and is drawn above the second child (the denominator) separated by a horizontal bar. +- The `` is rendered as a square root: its children are laid out like an [``](/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 `` 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. ![Screenshot of mfrac, msqrt, mroot](mfrac-msqrt-mroot.png) ### 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.

+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 @@ -187,40 +187,44 @@ math [id] .highlight { background: lightblue; } p { - padding: .5em; + padding: 0.5em; } ``` ```js hidden -const options = document.getElementById('options'); -const comment = document.getElementById('comment'); +const options = document.getElementById("options"); +const comment = document.getElementById("comment"); const checkboxes = Array.from(options.getElementsByTagName("input")); -const status = document.getElementById('status'); +const status = document.getElementById("status"); function verifyOption(checkbox) { let mathml = checkbox.dataset.highlight; - if (mathml) + if (mathml) { mathml = document.getElementById(mathml); + } if (checkbox.checked) { comment.textContent = checkbox.dataset.comment; - if (mathml) - mathml.classList.add('highlight'); - else + if (mathml) { + mathml.classList.add("highlight"); + } else { checkbox.checked = false; + } } else { comment.textContent = ""; - if (mathml) - mathml.classList.remove('highlight'); + if (mathml) { + mathml.classList.remove("highlight"); + } } - let finished = true; - checkboxes.forEach(checkbox => { - if (!!checkbox.checked != !!checkbox.dataset.highlight) - finished = false; - }); - status.textContent = finished ? "Congratulations, you checked all the correct answers!" : ""; - + 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); }); +checkboxes.forEach((checkbox) => { + checkbox.addEventListener("change", () => { + verifyOption(checkbox); + }); }); ``` @@ -228,17 +232,18 @@ checkboxes.forEach(checkbox => { ## Stretchy radical symbols -As previously seen, the overbar of the `` and `` elements -stretches horizontally to cover their content. But actually the root symbol √ -also stretches to be as tall as their content. +As previously seen, the overbar of the `` and `` elements stretches horizontally to cover their content. But actually the root symbol √ also stretches to be as tall as their content. ```html - + My page with stretchy radical symbols - + @@ -262,20 +267,18 @@ also stretches to be as tall as their content. ## 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 `` element to markup such notations. For -fraction-like notations that don't draw a horizontal bar, attach a -linethickness="0" attribute to the `` element: +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 `` element to markup such notations. For fraction-like notations that don't draw a horizontal bar, attach a `linethickness="0"` attribute to the `` element: ```html - + My binomial coefficient - + @@ -305,14 +308,12 @@ fraction-like notations that don't draw a horizontal bar, attach a ## Summary -In this lesson, we've seen how to build fractions and roots using the -``, `` and `` 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). +In this lesson, we've seen how to build fractions and roots using the ``, `` and `` 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 `` element](/en-US/docs/Web/MathML/Element/mfrac) -* [The `` element](/en-US/docs/Web/MathML/Element/msqrt) -* [The `` element](/en-US/docs/Web/MathML/Element/mroot) +- [The `` element](/en-US/docs/Web/MathML/Element/mfrac) +- [The `` element](/en-US/docs/Web/MathML/Element/msqrt) +- [The `` element](/en-US/docs/Web/MathML/Element/mroot) diff --git a/files/en-us/learn/mathml/first_steps/getting_started/index.md b/files/en-us/learn/mathml/first_steps/getting_started/index.md index fd32b1cb013dc94..484b097344da8ff 100644 --- a/files/en-us/learn/mathml/first_steps/getting_started/index.md +++ b/files/en-us/learn/mathml/first_steps/getting_started/index.md @@ -39,36 +39,32 @@ In this article, we will take a simple HTML document and view how to add MathML -## Inserting formulas in HTML via the `` element +## Inserting formulas in HTML via the \ element -MathML uses the same syntax as HTML to represent a tree of elements and -attributes. In particular, each mathematical formula is represented by an -element `` which can be placed inside an HTML page. In the following -document, it is inside a paragraph of text: +MathML uses the same syntax as HTML to represent a tree of elements and attributes. In particular, each mathematical formula is represented by an element `` which can be placed inside an HTML page. In the following document, it is inside a paragraph of text: ```html - - My first math page - - - -

The fraction - - - 1 - 3 - - - is not a decimal number.

- - + + My first math page + + +

+ The fraction + + + 1 + 3 + + + is not a decimal number. +

+ ``` -The `` element specifies a fraction with a numerator (its first child) -and a denominator (its second child). This is how it renders in your browser: +The `` element specifies a fraction with a numerator (its first child) and a denominator (its second child). This is how it renders in your browser: {{ EmbedLiveSample('Inserting_formulas_in_HTML', 700, 100, "", "") }} @@ -76,50 +72,38 @@ and a denominator (its second child). This is how it renders in your browser: ### Inline and display modes -Note that in the previous example, the formula is on the same line as the text -of the paragraph, this is called *inline* mode. However, it is quite common for -large mathematical formulas to use *display* mode: they are instead centered on -their own line as shown below. To achieve that, one only need to attach a -`display="block"` attribute on the `` element. +Note that in the previous example, the formula is on the same line as the text of the paragraph, this is called _inline_ mode. However, it is quite common for large mathematical formulas to use _display_ mode: they are instead centered on their own line as shown below. To achieve that, one only need to attach a `display="block"` attribute on the `` element. ```html hidden - - My first math page - - - -

The fraction - - - 1 - 3 - - - is not a decimal number.

- - + + My first math page + + +

+ The fraction + + + 1 + 3 + + + is not a decimal number. +

+ ``` {{ EmbedLiveSample('Inline_and_display_modes', 700, 100, "", "") }} -You may also notice some subtle change in the appearance: the text and vertical -spacing of the fraction becomes a bit bigger. -In *inline* mode, the height is minimized to avoid disturbing the flow -of the surrounding text. In *display* mode, priority is instead put on -legibility of the mathematical formula. +You may also notice some subtle change in the appearance: the text and vertical spacing of the fraction becomes a bit bigger. In _inline_ mode, the height is minimized to avoid disturbing the flow of the surrounding text. In _display_ mode, priority is instead put on legibility of the mathematical formula. -> **Note:** This corresponds to the LaTeX's concept of *inline* formulas -> (delimited by dollar signs `$...$`) and *display* formulas (delimited by -> `\[...\]`). +> **Note:** This corresponds to the LaTeX's concept of _inline_ formulas (delimited by dollar signs `$...$`) and _display_ formulas (delimited by `\[...\]`). -## Grouping with the `` element +## Grouping with the \ element -The `` element can actually contain an arbitrary number of children and -will essentially render them in a row. For instance, the simple formula -"1 + 2 + 3" would be be encoded like this in MathML: +The `` element can actually contain an arbitrary number of children and will essentially render them in a row. For instance, the simple formula "1 + 2 + 3" would be be encoded like this in MathML: ```html @@ -131,10 +115,7 @@ will essentially render them in a row. For instance, the simple formula ``` -The `` element is a generic container that performs similar layout but -can be placed anywhere in the MathML subtree. It is helpful to group several -elements together. For instance, the numerator of the following fraction (its -first child) is "one plus two". +The `` element is a generic container that performs similar layout but can be placed anywhere in the MathML subtree. It is helpful to group several elements together. For instance, the numerator of the following fraction (its first child) is "one plus two". ```html @@ -151,59 +132,60 @@ first child) is "one plus two". ### Active learning: nested expressions -As an exercise, figure out how to write the following expressions using -only the MathML elements we've seen so far. If you are stuck or want to verify -the solution, check the source code of the example. +As an exercise, figure out how to write the following expressions using only the MathML elements we've seen so far. If you are stuck or want to verify the solution, check the source code of the example. ```html hidden
    -
  1. "one half" plus "two third": - - - - 1 - 2 - - + - - 2 - 3 - - -
    2. -
  2. "one plus two plus three" over "four plus five": - - - - 1 +
  3. + "one half" plus "two third": + + + + 1 + 2 + + - 2 - + - 3 - - - 4 - + - 5 - - - -
    4. -
  4. "one quarter" over "two plus three": - - - - 1 - 4 - - - 2 - + - 3 - - - -
    5. + + 2 + 3 + + + +
  5. + "one plus two plus three" over "four plus five": + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + +
    6. +
  6. + "one quarter" over "two plus three": + + + + 1 + 4 + + + 2 + + + 3 + + + +
``` @@ -211,15 +193,16 @@ the solution, check the source code of the example. ## Summary -In this article, we have taken a look at how to use the `` element to insert a mathematical formula inside a HTML document. We have learned about the difference between *inline* and *display* formulas and how to specify them via the `display` attribute of the `` element. +In this article, we have taken a look at how to use the `` element to insert a mathematical formula inside a HTML document. We have learned about the difference between _inline_ and _display_ formulas and how to specify them via the `display` attribute of the `` element. + In addition, we stumbled upon a couple of other MathML elements: `` for fractions, `` for grouping and finally a few text elements. We will analyze these [text containers](/en-US/docs/Learn/MathML/First_steps/Text_containers) further in the next article. {{LearnSidebar}}{{NextMenu("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps")}} ## See also -* [Using MathML](/en-US/docs/Web/MathML/Authoring#using_mathml) -* [The `` element](/en-US/docs/Web/MathML/Element/math) -* [The `` element](/en-US/docs/Web/MathML/Element/mfrac) -* [The `` element](/en-US/docs/Web/MathML/Element/mrow) -* [The `math-depth` property](/en-US/docs/Web/CSS/math-depth) +- [Using MathML](/en-US/docs/Web/MathML/Authoring#using_mathml) +- [The `` element](/en-US/docs/Web/MathML/Element/math) +- [The `` element](/en-US/docs/Web/MathML/Element/mfrac) +- [The `` element](/en-US/docs/Web/MathML/Element/mrow) +- [The `math-depth` property](/en-US/docs/Web/CSS/math-depth) diff --git a/files/en-us/learn/mathml/first_steps/index.md b/files/en-us/learn/mathml/first_steps/index.md index a8f0f76261a5912..7c13dd92bdfaff3 100644 --- a/files/en-us/learn/mathml/first_steps/index.md +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -15,8 +15,7 @@ MathML is the markup language used to write mathematical formulas in Web pages. > > #### Looking to become a front-end web developer? > -> We have put together a course that includes all the essential information you need to -> work towards your goal. +> We have put together a course that includes all the essential information you need to work towards your goal. > > [**Get started**](/en-US/docs/Learn/Front-end_web_developer) diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index dc72e71633e1641..77cc1f5c326c993 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -40,17 +40,21 @@ We continue the review of basic math notations and focuses on building MathML el ## Subscripts and superscripts -Similarly to what we saw in the [previous article](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots), the ``, `` and `` have a special structure expecting exactly two elements (for ``, ``) or three elements (for ``): +Similarly to what we saw in the [previous article](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots), the ``, `` and `` have a special structure expecting exactly two elements (for ``, ``) or three elements (for ``): ```html -

msub: +

+ msub: child1 child2 -

msup: +

+ +

+ msup: child1 @@ -58,7 +62,8 @@ Similarly to what we saw in the [previous article](/en-US/docs/Learn/MathML/Firs

-

msubsup: +

+ msubsup: child1 @@ -69,40 +74,29 @@ Similarly to what we saw in the [previous article](/en-US/docs/Learn/MathML/Firs

``` -Below is the rendering of the above example in your browser. You should notice -that: +Below is the rendering of the above example in your browser. You should notice that: -* The second child of the `` element is attached as a subscript of - its first child. -* The second child of the `` element is attached as a superscript of - its first child. -* The second and third children of the `` element are respectively - attached as a subscript and superscript of its first child. -* The text inside scripts is scaled down. +- The second child of the `` element is attached as a subscript of its first child. +- The second child of the `` element is attached as a superscript of its first child. +- The second and third children of the `` element are respectively attached as a subscript and superscript of its first child. +- The text inside scripts is scaled down. {{ EmbedLiveSample('Subtrees_of_msub_msup_msubsup', 700, 200, "", "") }} -> **Note:** The MathML elements `` and `` are different from the -> HTML elements [``](/en-US/docs/Web/HTML/Element/sub) and -> [``](/en-US/docs/Web/HTML/Element/sup). They allow to use an arbitrary -> MathML subtree as scripts, not just text. +> **Note:** The MathML elements `` and `` are different from the HTML elements [``](/en-US/docs/Web/HTML/Element/sub) and [``](/en-US/docs/Web/HTML/Element/sup). They allow to use an arbitrary MathML subtree as scripts, not just text. ## Underscripts and overscripts -The ``, `` and `` elements are very similar except -that they are used to attach underscripts and overscripts. Instead of giving -details, we will let you figure out their definitions yourself with the -following exercise. +The ``, `` and `` elements are very similar except that they are used to attach underscripts and overscripts. Instead of giving details, we will let you figure out their definitions yourself with the following exercise. ### Active learning: Recognize under/over scripts -In the following example, -try to guess the names of the mystery elements (written as question -marks) and click the button to reveal the solution: +In the following example, try to guess the names of the mystery elements (written as question marks) and click the button to reveal the solution: ```html hidden -

<????????> element - with exactly two children (child1, child2): +

+ <????????> element with exactly two children + (child1, child2): child1 @@ -110,8 +104,9 @@ marks) and click the button to reveal the solution:

-

<????????> element - with exactly three children (child1, child2 and child3): +

+ <????????> element with exactly three children + (child1, child2 and child3): child1 @@ -120,8 +115,9 @@ marks) and click the button to reveal the solution:

-

<????????> element - with exactly two children (child1, child2): +

+ <????????> element with exactly two children + (child1, child2): child1 @@ -130,19 +126,19 @@ marks) and click the button to reveal the solution:

-

+

``` ```css hidden p { - padding: .5em; + padding: 0.5em; } ``` ```js hidden document.getElementById("showSolution").addEventListener("click", () => { const maths = Array.from(document.getElementsByTagName("math")); - Array.from(document.getElementsByTagName("span")).forEach( (span, index) => { + Array.from(document.getElementsByTagName("span")).forEach((span, index) => { span.textContent = maths[index].firstElementChild.tagName; }); }); @@ -152,20 +148,18 @@ document.getElementById("showSolution").addEventListener("click", () => { ### Active learning: Recognize scripted elements -The following MathML formula contains a more complex expression, nesting -fractions, roots and scripts. Try to guess the elements laid out with scripted -elements ``, ``, ``, ``, ``, ``. -Each time you click such an element, it is highlighted and a confirmation -message is displayed. Finally, read the MathML source to verify whether that -corresponds to your expectation. +The following MathML formula contains a more complex expression, nesting fractions, roots and scripts. Try to guess the elements laid out with scripted elements ``, ``, ``, ``, ``, ``. Each time you click such an element, it is highlighted and a confirmation message is displayed. Finally, read the MathML source to verify whether that corresponds to your expectation. ```html hidden - + My page with scripted elements - + @@ -180,7 +174,8 @@ corresponds to your expectation. + - | + | α → @@ -219,7 +214,7 @@ corresponds to your expectation. - +
@@ -230,100 +225,73 @@ corresponds to your expectation. color: red; } math { - font-size: 200%; + font-size: 200%; } ``` ```js hidden - 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', - `

You clicked an <${scripted.tagName}> element.

`); - }); +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"); }); - document.getElementById("clearOutput").addEventListener("click", () => { +} +scriptedElements.forEach((scripted) => { + scripted.addEventListener("click", () => { clearHighlight(); - outputDiv.innerHTML = ""; + scripted.classList.add("highlight"); + outputDiv.insertAdjacentHTML( + "beforeend", + `

You clicked an <${scripted.tagName}> element.

`, + ); }); +}); +document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; +}); ``` {{ EmbedLiveSample('Active_learning_recognize_scripted_elements', 700, 400, "", "") }} ## More operator properties -We have previously seen some [properties of the `` element](/en-US/docs/Learn/MathML/First_steps/Text_containers#operator_properties_of_mo) -namely stretching in the vertical direction and spacing. Now that scripted -elements are available, we can extend that list. We will do that by tweaking -our [previous example](#active_learning_recognize_scripted_elements). +We have previously seen some [properties of the `` element](/en-US/docs/Learn/MathML/First_steps/Text_containers#operator_properties_of_mo) namely stretching in the vertical direction and spacing. Now that scripted elements are available, we can extend that list. We will do that by tweaking our [previous example](#active_learning_recognize_scripted_elements). ### Stretching in horizontal direction -Let's first perform the substitutions - - β - ≔ - - - z - 1 - - + - - z - 2 - - - -and - - α - ≔ - - - v - 1 - - + - - v - 2 - - -: +Let's first perform the substitutions β ≔ z 1 + z 2 and α ≔ v 1 + v 2 : ```html hidden - + My page with horizontal stretchy operators - + - - - z - 1 - - + - - z - 2 - - + + + z + 1 + + + + + z + 2 + + ⎵ @@ -331,19 +299,20 @@ and + - | + | - - - v - 1 - - + - - v - 2 - - + + + v + 1 + + + + + v + 2 + + → | @@ -389,54 +358,47 @@ and color: red; } math { - font-size: 200%; + font-size: 200%; } ``` {{ EmbedLiveSample('Stretching_in_horizontal_direction', 700, 200, "", "") }} -We now realize that the bottom bracket "⎵" and the rightward arrow "→" -stretch horizontally to cover the width of the substitued values. Recall that -[some vertical operators can stretch](/en-US/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators) to cover the height of -non-stretchy siblings inside an ``. -Similarly some horizontal operators can stretch -to cover the width of non-stretchy siblings in an ``, `` or -`` element. +We now realize that the bottom bracket "⎵" and the rightward arrow "→" stretch horizontally to cover the width of the substitued values. Recall that [some vertical operators can stretch](/en-US/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators) to cover the height of non-stretchy siblings inside an ``. Similarly some horizontal operators can stretch to cover the width of non-stretchy siblings in an ``, `` or `` element. -> **Note:** Stretching can happen for any child of the -> ``, `` or `` element, not just the underscript -> or overscript. +> **Note:** Stretching can happen for any child of the ``, `` or `` element, not just the underscript or overscript. ### Large operator and limits -So far our example has actually been rendered in [*display* mode](/en-US/docs/Learn/MathML/First_steps/Getting_started#inline_and_display_modes). Let's detach the -`display="block"` attribute from the `` element to show up some -interesting changes: +So far our example has actually been rendered in [_display_ mode](/en-US/docs/Learn/MathML/First_steps/Getting_started#inline_and_display_modes). Let's detach the `display="block"` attribute from the `` element to show up some interesting changes: ```html hidden - + My page with moved limits and small largeop - + - - - z - 1 - - + - - z - 2 - - + + + z + 1 + + + + + z + 2 + + ⎵ @@ -444,19 +406,20 @@ interesting changes: + - | + | - - - v - 1 - - + - - v - 2 - - + + + v + 1 + + + + + v + 2 + + → | @@ -502,43 +465,30 @@ interesting changes: color: red; } math { - font-size: 200%; + font-size: 200%; } ``` {{ EmbedLiveSample('Large_operator_and_limits', 700, 200, "", "") }} -As expected, the formula is no longer centered and the rendering is modified to -minimized the height. Focusing on the summation symbol, one can notice that -the sigma is drawn smaller and that the scripts of the `` element -are now attached as a subscript and a superscript! This is due to two -properties of the "∑" operator: +As expected, the formula is no longer centered and the rendering is modified to minimized the height. Focusing on the summation symbol, one can notice that the sigma is drawn smaller and that the scripts of the `` element are now attached as a subscript and a superscript! This is due to two properties of the "∑" operator: -* *largeop*: The operator is drawn with a bigger glyph in *display* mode. -* *movablelimits*: The underscripts and overscripts attached to the - operator are respectively rendered as subscripts and superscripts in - *inline* mode. +- _largeop_: The operator is drawn with a bigger glyph in _display_ mode. +- _movablelimits_: The underscripts and overscripts attached to the operator are respectively rendered as subscripts and superscripts in _inline_ mode. -> **Note:** The *largeop* property is actually unrelated to scripts, even though -> operators having this property are typically scripted. The *movablelimits* -> property is taken into account for `` and `` elements too. +> **Note:** The _largeop_ property is actually unrelated to scripts, even though operators having this property are typically scripted. The _movablelimits_ property is taken into account for `` and `` elements too. ## Summary -In this article, we've finished reviewing basic layout introducing elements -``, ``, ``, ``, ``, `` for -subscripts, superscripts, underscripts and overscripts. Using these elements, -we were able to briefly introduce new properties of the `` element. -In the next article, we -will continue focus on [tabular layout](/en-US/docs/Learn/MathML/First_steps/Tables). +In this article, we've finished reviewing basic layout introducing elements ``, ``, ``, ``, ``, `` for subscripts, superscripts, underscripts and overscripts. Using these elements, we were able to briefly introduce new properties of the `` element. In the next article, we will continue focus on [tabular layout](/en-US/docs/Learn/MathML/First_steps/Tables). {{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} ## See also -* [The `` element](/en-US/docs/Web/MathML/Element/msub) -* [The `` element](/en-US/docs/Web/MathML/Element/msup) -* [The `` element](/en-US/docs/Web/MathML/Element/msubsup) -* [The `` element](/en-US/docs/Web/MathML/Element/munder) -* [The `` element](/en-US/docs/Web/MathML/Element/mover) -* [The `` element](/en-US/docs/Web/MathML/Element/munderover) +- [The `` element](/en-US/docs/Web/MathML/Element/msub) +- [The `` element](/en-US/docs/Web/MathML/Element/msup) +- [The `` element](/en-US/docs/Web/MathML/Element/msubsup) +- [The `` element](/en-US/docs/Web/MathML/Element/munder) +- [The `` element](/en-US/docs/Web/MathML/Element/mover) +- [The `` element](/en-US/docs/Web/MathML/Element/munderover) diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md index 0476400cf297227..8fddd8b9af146ea 100644 --- a/files/en-us/learn/mathml/first_steps/tables/index.md +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -43,23 +43,20 @@ Once all basic math notations are known, it remains to consider tabular layout w ## MathML tabular elements -The MathML tabular elements are similar to the ones for [HTML tables](/en-US/docs/Learn/HTML/Tables): the `` element represents a table, the -`` element represents a row and the `` element represents a cell. -An `` table can be inserted anywhere in a MathML formula. The `` -cell can contain any number of MathML children and will lay them out -as an `` container. +The MathML tabular elements are similar to the ones for [HTML tables](/en-US/docs/Learn/HTML/Tables): the `` element represents a table, the `` element represents a row and the `` element represents a cell. An `` table can be inserted anywhere in a MathML formula. The `` cell can contain any number of MathML children and will lay them out as an `` container. -Tables are typically used for matrix-like expressions (including vectors). -Here is a basic example taken from the [article about the CSS -`matrix()` function](/en-US/docs/Web/CSS/transform-function/matrix): +Tables are typically used for matrix-like expressions (including vectors). Here is a basic example taken from the [article about the CSS `matrix()` function](/en-US/docs/Web/CSS/transform-function/matrix): ```html - + My first matrix - + @@ -140,19 +137,18 @@ Here is a basic example taken from the [article about the CSS ## Allowing cells to span multiple rows and columns -This is again similar to [HTML's article](/en-US/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns). The `` element accepts -the `columnspan` and `rowspan` attributes to indicate that the cell spans -multiples rows and columns. Below the inner matrix spans two columns of -the outer matrix: - +This is again similar to [HTML's article](/en-US/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns). The `` element accepts the `columnspan` and `rowspan` attributes to indicate that the cell spans multiples rows and columns. Below the inner matrix spans two columns of the outer matrix: ```html hidden - + My matrix with columnspan - + @@ -229,25 +225,22 @@ the outer matrix: {{ EmbedLiveSample('allowing_cells_to_span_multiple_rows_and_columns', 700, 200, "", "") }} -> **Note:** For historical reason, the MathML attribute for column spaning is -> called `columnspan` not `colspan`. +> **Note:** For historical reason, the MathML attribute for column spaning is called `columnspan` not `colspan`. ## Usage for advanced layout -Besides representing matrix-like objects, MathML tables are sometimes used for -advanced layout inside mathematical formulas, -for example in [Wikipedia's definition of -Legendre symbol](https://en.wikipedia.org/wiki/Legendre_symbol). Here, the -different cases are written on three different rows while the values and -conditions are placed on two different columns. +Besides representing matrix-like objects, MathML tables are sometimes used for advanced layout inside mathematical formulas, for example in [Wikipedia's definition of Legendre symbol](https://en.wikipedia.org/wiki/Legendre_symbol). Here, the different cases are written on three different rows while the values and conditions are placed on two different columns. ```html hidden - + My first matrix - + @@ -315,21 +308,11 @@ conditions are placed on two different columns. {{ EmbedLiveSample('Usage_for_advanced_layout', 700, 200, "", "") }} -> **Warning:** The [`` article](/en-US/docs/Web/MathML/Element/mtable) -> provides more advanced layout options via special attributes such as -> alignment or spacing. This is inherited from the original design of MathML, -> that was supposed to work in -> engines that are not CSS-aware. However, these attributes may not be -> implemented in all browsers. In the future, it is likely that usages of -> `` for layout-only purpose (i.e. not actual matrix-like objects) -> can be replaced with CSS-based alternatives. +> **Warning:** The [`` article](/en-US/docs/Web/MathML/Element/mtable) provides more advanced layout options via special attributes such as alignment or spacing. This is inherited from the original design of MathML, that was supposed to work in engines that are not CSS-aware. However, these attributes may not be implemented in all browsers. In the future, it is likely that usages of `` for layout-only purpose (i.e. not actual matrix-like objects) can be replaced with CSS-based alternatives. ## Summary -In this article, we've reviewed the -``, `` and `` elements which are the equivalent of HTML -elements for tables. We have seen how to use them for representing matrix-like -objects and how it is sometimes used for advanced layout. +In this article, we've reviewed the ``, `` and `` elements which are the equivalent of HTML elements for tables. We have seen how to use them for representing matrix-like objects and how it is sometimes used for advanced layout. You've nearly finished this module — we only have one more thing to do. In the [three famous mathematical formulas assessment](/en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas) you'll use your new knowledge to rewrite a small mathematical article using HTML and MathML. @@ -337,7 +320,7 @@ You've nearly finished this module — we only have one more thing to do. In the ## See also -* [Learning about HTML tables](/en-US/docs/Learn/HTML/Tables) -* [The `` element](/en-US/docs/Web/MathML/Element/mtable) -* [The `` element](/en-US/docs/Web/MathML/Element/mtr) -* [The `` element](/en-US/docs/Web/MathML/Element/mtd) +- [Learning about HTML tables](/en-US/docs/Learn/HTML/Tables) +- [The `` element](/en-US/docs/Web/MathML/Element/mtable) +- [The `` element](/en-US/docs/Web/MathML/Element/mtr) +- [The `` element](/en-US/docs/Web/MathML/Element/mtd) diff --git a/files/en-us/learn/mathml/first_steps/text_containers/index.md b/files/en-us/learn/mathml/first_steps/text_containers/index.md index e63e2e60abb9141..0516c63aebe82c4 100644 --- a/files/en-us/learn/mathml/first_steps/text_containers/index.md +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -50,9 +50,12 @@ Since most of these characters are not part of Basic Latin Unicode block, it is - + My page with math characters - +

∀A∊𝔰𝔩(n,𝔽),TrA=0

@@ -64,29 +67,27 @@ Since most of these characters are not part of Basic Latin Unicode block, it is ## A bit of semantics... -We noticed in the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) article that the text in MathML formulas are wrapped in specific container elements such as the `` or ``. More generally, every text in MathML formulas must be included inside such container elements, called *token* elements. In addition, MathML provides multiple token elements in order to distinguish different meanings of the text content: +We noticed in the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) article that the text in MathML formulas are wrapped in specific container elements such as the `` or ``. More generally, every text in MathML formulas must be included inside such container elements, called _token_ elements. In addition, MathML provides multiple token elements in order to distinguish different meanings of the text content: -* The `` element, which represents a symbolic name or arbitrary text that should be rendered as an identifier. Examples: `x` (variable), `cos` (function name) and `π` (symbolic constant). -* The `` element represents a "numeric literal" or other data that should be rendered as a numeric literal. Examples: `2` (integer), `0.123` (decimal number) or `0xFFEF` (hexadecimal value). -* The `` element represents an operator or anything that should be rendered as an operator. For example `+` (binary operation), `≤` (binary relation), `∑` (summation symbol) or `[` (fence). -* The `` element is used to represent arbitrary text. For example short words in formulas such as `if` or `maps to`. +- The `` element, which represents a symbolic name or arbitrary text that should be rendered as an identifier. Examples: `x` (variable), `cos` (function name) and `π` (symbolic constant). +- The `` element represents a "numeric literal" or other data that should be rendered as a numeric literal. Examples: `2` (integer), `0.123` (decimal number) or `0xFFEF` (hexadecimal value). +- The `` element represents an operator or anything that should be rendered as an operator. For example `+` (binary operation), `≤` (binary relation), `∑` (summation symbol) or `[` (fence). +- The `` element is used to represent arbitrary text. For example short words in formulas such as `if` or `maps to`. ### Active learning: recognize token elements -Below is a more complex example, which says that the absolute value of a real -number is equal to that number if and only if it is nonnegative. Spot the -different token elements and what they are used for. -Each time you click the corresponding text, it is highlighted and a confirmation -message is displayed. Finally, read the MathML source to verify whether that -corresponds to your expectation. +Below is a more complex example, which says that the absolute value of a real number is equal to that number if and only if it is nonnegative. Spot the different token elements and what they are used for. Each time you click the corresponding text, it is highlighted and a confirmation message is displayed. Finally, read the MathML source to verify whether that corresponds to your expectation. ```html hidden - + My page with math characters - + @@ -106,63 +107,54 @@ corresponds to your expectation. 0 - +
``` - ```css hidden .highlight { color: red; } math { - font-size: 200%; + font-size: 200%; } ``` - ```js hidden - const tokenElements = Array.from(document.querySelectorAll('mi, mo, mn, mtext')); - const outputDiv = document.getElementById("output"); - function clearHighlight() { - tokenElements.forEach(token => { - token.classList.remove('highlight'); - }); - } - tokenElements.forEach(token => { - token.addEventListener('click', () => { - clearHighlight(); - token.classList.add('highlight'); - outputDiv.insertAdjacentHTML('beforeend', - `

You clicked an <${token.tagName}> element.

`); - }); +const tokenElements = Array.from( + document.querySelectorAll("mi, mo, mn, mtext"), +); +const outputDiv = document.getElementById("output"); +function clearHighlight() { + tokenElements.forEach((token) => { + token.classList.remove("highlight"); }); - document.getElementById("clearOutput").addEventListener("click", () => { +} +tokenElements.forEach((token) => { + token.addEventListener("click", () => { clearHighlight(); - outputDiv.innerHTML = ""; + token.classList.add("highlight"); + outputDiv.insertAdjacentHTML( + "beforeend", + `

You clicked an <${token.tagName}> element.

`, + ); }); +}); +document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; +}); ``` {{ EmbedLiveSample('Active_learning_recognize_token_elements', 700, 400, "", "") }} +> **Note:** It is sometimes difficult to decide the token element to use for a given text content. In practice, choosing the wrong element should not cause major issues because all token elements are generally rendered the same by browser implementations (for visual display and for assistive technologies). However, the `` and `` elements have special distinguishing features that one should be aware of. They are explained in the following sections. -> **Note:** It is sometimes difficult to decide the token element to use for -> a given text content. In practice, choosing the wrong element should not cause -> major issues because all token elements are generally -> rendered the same by browser implementations (for visual display and for -> assistive technologies). However, the `` and `` elements have special -> distinguishing features that one should be aware of. They are explained -> in the following sections. +## Automatic italicization of \ -## Automatic italicization of `` - -One typographic convention in mathematics is to use italic letters for variables. -In order to help with that, `` elements with a single character may be -automatically rendered as italic. This is the case for all the letters from the -latin and greek alphabets. Compare the rendering of the two `` -elements in the following formula: +One typographic convention in mathematics is to use italic letters for variables. In order to help with that, `` elements with a single character may be automatically rendered as italic. This is the case for all the letters from the latin and greek alphabets. Compare the rendering of the two `` elements in the following formula: ```html @@ -171,12 +163,9 @@ elements in the following formula: ``` -> **Note:** [This table from MathML Core](https://w3c.github.io/mathml-core/#italic-mappings) -> provide the exhaustive list of characters that are subject to italicization, -> together with the corresponding italic characters. +> **Note:** [This table from MathML Core](https://w3c.github.io/mathml-core/#italic-mappings) provide the exhaustive list of characters that are subject to italicization, together with the corresponding italic characters. -It is sometimes needed to revert this default italic transformation. For that purpose, just attach a `mathvariant="normal"` attribute on the `` element. -Compare the rendering of the uppercase gamma letters in the following formula: +It is sometimes needed to revert this default italic transformation. For that purpose, just attach a `mathvariant="normal"` attribute on the `` element. Compare the rendering of the uppercase gamma letters in the following formula: ```html @@ -187,7 +176,7 @@ Compare the rendering of the uppercase gamma letters in the following formula: > **Note:** Although the [`mathvariant`](/en-US/docs/Web/MathML/Global_attributes/mathvariant) provides other values to perform such transformations, it is recommended to just pick the desired [Mathematical Alphanumeric Symbols](https://en.wikipedia.org/wiki/Mathematical_Alphanumeric_Symbols) when possible. -## Operator properties of `` +## Operator properties of \ MathML contains an [operator dictionary](https://w3c.github.io/mathml-core/#operator-dictionary-human) that defines default properties of `` elements depending on their content and the position within its container (prefix, infix or postfix). Let's consider a concrete example: @@ -232,19 +221,18 @@ Operators have many other properties that we will see in more details later. For ### Active learning: spot the difference -Now that you are a bit familiar with special features of `` and ``, -let's rewrite the `

` element in the -[example at the top of the page](#unicode_characters_for_mathematics) with some -actual MathML. Compare the visual rendering in your browser and explain -the differences with the text-only version. +Now that you are a bit familiar with special features of `` and ``, let's rewrite the `

` element in the [example at the top of the page](#unicode_characters_for_mathematics) with some actual MathML. Compare the visual rendering in your browser and explain the differences with the text-only version. ```html - + My page with math characters - +

∀A∊𝔰𝔩(n,𝔽),TrA=0

@@ -276,28 +264,32 @@ the differences with the text-only version.

- +
- + ``` ```css hidden div { - padding: .5em; + padding: 0.5em; } ``` ```js hidden -document.getElementById('showSolution').addEventListener('click', () => { - document.getElementById('solution').insertAdjacentHTML( - "beforeEnd", - `
    +document.getElementById("showSolution").addEventListener( + "click", + () => { + document.getElementById("solution").insertAdjacentHTML( + "beforeEnd", + `
    • The <mi> elements containing the "A" and "n" variables are rendered in italic. However, the <mi> elements with multiple characters "𝔰𝔩" or whose character is "𝔽" are still rendered upright.
    • Spacing is automatically added around the <mo> elements whose text is "∀", "∊", "=" or a comma. However, some of them have no spacing added before while the parentheses still have no spacing around them.
      • -
    ` - ); -}, {once: true}); +
`, + ); + }, + { once: true }, +); ``` {{ EmbedLiveSample('active_learning_spot_the_difference', 700, 500, "", "") }} @@ -306,26 +298,23 @@ document.getElementById('showSolution').addEventListener('click', () => { ### Active learning: stretchy operators -The operator dictionary defines a default *stretchy* property as well as -corresponding *stretch axis* for some operators. For example, an operator -can stretch vertically by default to cover the maximum height of non-stretchy -siblings within its `` container. By tweaking a bit the -[previous exercise](#active_learning_recognize_token_elements), one can -make operators stretch vertically. Can you find them? As usual, you are invited -to read the source code when you are done. +The operator dictionary defines a default _stretchy_ property as well as corresponding _stretch axis_ for some operators. For example, an operator can stretch vertically by default to cover the maximum height of non-stretchy siblings within its `` container. By tweaking a bit the [previous exercise](#active_learning_recognize_token_elements), one can make operators stretch vertically. Can you find them? As usual, you are invited to read the source code when you are done. ```html hidden - + My page with stretchy operators - + - + | 1 @@ -355,52 +344,55 @@ to read the source code when you are done. 0 - +
``` - ```css hidden .highlight { color: red; } math { - font-size: 200%; + font-size: 200%; } ``` - ```js hidden - const tokenElements = Array.from(document.querySelectorAll('mi, mo, mn, mtext')); - const stretchyMoElements = Array.from(document.getElementsByTagName("mo")).slice(0, 2); - const outputDiv = document.getElementById("output"); - function clearHighlight() { - tokenElements.forEach(token => { - token.classList.remove('highlight'); - }); - } - tokenElements.forEach(token => { - token.addEventListener('click', () => { - clearHighlight(); - token.classList.add('highlight'); - let message = ""; - let tagName = `<${token.tagName}>`; - if (token.tagName !== "mo") - message = `No, this is an ${tagName} element!`; - else if (!stretchyMoElements.includes(token)) - message = `No, this is an ${tagName} element, but it's not vertically stretched.`; - else - message = `Correct, this ${tagName} element is indeed stretched to the height of its <mfrac> sibling.` - outputDiv.insertAdjacentHTML('beforeend', - `

${message}

`); - }); +const tokenElements = Array.from( + document.querySelectorAll("mi, mo, mn, mtext"), +); +const stretchyMoElements = Array.from( + document.getElementsByTagName("mo"), +).slice(0, 2); +const outputDiv = document.getElementById("output"); +function clearHighlight() { + tokenElements.forEach((token) => { + token.classList.remove("highlight"); }); - document.getElementById("clearOutput").addEventListener("click", () => { +} +tokenElements.forEach((token) => { + token.addEventListener("click", () => { clearHighlight(); - outputDiv.innerHTML = ""; + token.classList.add("highlight"); + let message = ""; + let tagName = `<${token.tagName}>`; + if (token.tagName !== "mo") message = `No, this is an ${tagName} element!`; + else if (!stretchyMoElements.includes(token)) + message = `No, this is an ${tagName} element, but it's not vertically stretched.`; + else + message = `Correct, this ${tagName} element is indeed stretched to the height of its <mfrac> sibling.`; + outputDiv.insertAdjacentHTML( + "beforeend", + `

${message}

`, + ); }); +}); +document.getElementById("clearOutput").addEventListener("click", () => { + clearHighlight(); + outputDiv.innerHTML = ""; +}); ``` {{ EmbedLiveSample('Active_learning_stretchy_fences', 700, 400, "", "") }} @@ -409,13 +401,13 @@ math { ## Summary -In this article, we have learnt about a few *token* elements that are used as text containers as well as their different semantics, namely `` (identifier), `` (numbers), `` (operators), `` (generic text). We have seen special Unicode characters that are commonly found in math formulas and given an overview of some observable behaviors of the `` and `` elements. In the next article, we will see how to rely on *token* elements to build much complex expressions such as [fractions and roots](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots). +In this article, we have learnt about a few _token_ elements that are used as text containers as well as their different semantics, namely `` (identifier), `` (numbers), `` (operators), `` (generic text). We have seen special Unicode characters that are commonly found in math formulas and given an overview of some observable behaviors of the `` and `` elements. In the next article, we will see how to rely on _token_ elements to build much complex expressions such as [fractions and roots](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots). {{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}} ## See also -* [The `` element](/en-US/docs/Web/MathML/Element/mi) -* [The `` element](/en-US/docs/Web/MathML/Element/mn) -* [The `` element](/en-US/docs/Web/MathML/Element/mo) -* [The `` element](/en-US/docs/Web/MathML/Element/mtext) +- [The `` element](/en-US/docs/Web/MathML/Element/mi) +- [The `` element](/en-US/docs/Web/MathML/Element/mn) +- [The `` element](/en-US/docs/Web/MathML/Element/mo) +- [The `` element](/en-US/docs/Web/MathML/Element/mtext) diff --git a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md index 7d1d59bf37333d9..fcbbcdf7cb89519 100644 --- a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md +++ b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md @@ -29,16 +29,13 @@ tags: - ## A small math article The goal is to rewrite the following math article using HTML and MathML: ![Screenshot of the PDF output generated by XeLaTeX](xelatex-output.png) -Although you don't need to be familiar with -[LaTeX](https://en.wikipedia.org/wiki/LaTeX), it might be useful to know the -LaTeX source from which it was generated: +Although you don't need to be familiar with [LaTeX](https://en.wikipedia.org/wiki/LaTeX), it might be useful to know the LaTeX source from which it was generated: ``` \documentclass{article} @@ -94,49 +91,47 @@ using the following expression: ## Starting point -To get this assessment started, you can rely on our usual HTML template. -By default it uses UTF-8 encoding, special Web fonts for the `` -and `` tags (with similar look & feel as the LaTeX output). The goal -is to replace the question marks `???` with actual MathML content. +To get this assessment started, you can rely on our usual HTML template. By default it uses UTF-8 encoding, special Web fonts for the `` and `` tags (with similar look & feel as the LaTeX output). The goal is to replace the question marks `???` with actual MathML content. ```html - + Three famous mathematical formulas - + -

To solve the cubic equation ??? (where the real numbers ??? - satisfy ???) one can use Cardano's formula: ???

- -

For any ??? and ???, the Cauchy–Bunyakovsky–Schwarz - inequality can be written as follows: ???

- -

Finally, the determinant of a Vandermonde matrix can be calculated - using the following expression: ???

+

+ To solve the cubic equation ??? (where the real numbers ??? satisfy ???) + one can use Cardano's formula: ??? +

+ +

+ For any ??? and ???, the Cauchy–Bunyakovsky–Schwarz inequality can be + written as follows: ??? +

+ +

+ Finally, the determinant of a Vandermonde matrix can be calculated using + the following expression: ??? +

``` ## Hints and tips -* Start by distinguishing the *inline* and *display* formulas and set the - `display` attribute accordingly. -* Check the text used and - find their [Unicode characters](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode) ("−", "ℂ", "∑", ...). -* Analyze the semantics of each portion of text (variable? operator? number?) - and determine the proper token element to use for each of them. -* Look for advanced constructions (fractions? roots? scripts? matrices?) and - determine the proper MathML element to use for each of them. -* Don't forget to rely on `` for grouping subexpressions. -* Pay attention to stretchy and large operators! -* Use the [W3C validator](https://validator.w3.org/nu/) to catch unintended - mistakes in your HTML/MathML markup. -* If you are stuck, or realize how painful it is to write MathML by hand, - feel free to use tools to help - [write MathML](/en-US/docs/Web/MathML/Authoring) such as - [TeXZilla](https://fred-wang.github.io/TeXZilla/). +- Start by distinguishing the _inline_ and _display_ formulas and set the `display` attribute accordingly. +- Check the text used and find their [Unicode characters](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode) ("−", "ℂ", "∑", ...). +- Analyze the semantics of each portion of text (variable? operator? number?) and determine the proper token element to use for each of them. +- Look for advanced constructions (fractions? roots? scripts? matrices?) and determine the proper MathML element to use for each of them. +- Don't forget to rely on `` for grouping subexpressions. +- Pay attention to stretchy and large operators! +- Use the [W3C validator](https://validator.w3.org/nu/) to catch unintended mistakes in your HTML/MathML markup. +- If you are stuck, or realize how painful it is to write MathML by hand, feel free to use tools to help [write MathML](/en-US/docs/Web/MathML/Authoring) such as [TeXZilla](https://fred-wang.github.io/TeXZilla/). {{LearnSidebar}}{{PreviousMenu("Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} diff --git a/files/en-us/learn/mathml/index.md b/files/en-us/learn/mathml/index.md index 9ef2effa8f00f0d..eff6253cbbecf14 100644 --- a/files/en-us/learn/mathml/index.md +++ b/files/en-us/learn/mathml/index.md @@ -19,8 +19,7 @@ Mathematical Markup Language — or {{glossary("MathML")}} — is the markup lan > > #### Looking to become a front-end web developer? > -> We have put together a course that includes all the essential information you need to -> work towards your goal. +> We have put together a course that includes all the essential information you need to work towards your goal. > > [**Get started**](/en-US/docs/Learn/Front-end_web_developer) From 1693c664fda554cfcf040d4e00f280a19964c912 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Sat, 13 Aug 2022 10:16:18 +0200 Subject: [PATCH 06/20] 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 has a display="block" attribute or not. Also add an initial note about CSS math-style. --- .../mathml/first_steps/getting_started/index.md | 15 ++++++++------- .../learn/mathml/first_steps/scripts/index.md | 6 +++--- .../three_famous_mathematical_formulas/index.md | 2 +- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/files/en-us/learn/mathml/first_steps/getting_started/index.md b/files/en-us/learn/mathml/first_steps/getting_started/index.md index 484b097344da8ff..e7a24b496eb5360 100644 --- a/files/en-us/learn/mathml/first_steps/getting_started/index.md +++ b/files/en-us/learn/mathml/first_steps/getting_started/index.md @@ -70,9 +70,9 @@ The `` element specifies a fraction with a numerator (its first child) an > **Warning:** If you just see "1 3" instead of a fraction, then your browser may not support MathML. Check out the [browser compatibility table](/en-US/docs/Web/MathML/Element/math#browser_compatibility) for further details. -### Inline and display modes +### The display attribute -Note that in the previous example, the formula is on the same line as the text of the paragraph, this is called _inline_ mode. However, it is quite common for large mathematical formulas to use _display_ mode: they are instead centered on their own line as shown below. To achieve that, one only need to attach a `display="block"` attribute on the `` element. +Note that in the previous example, the formula is on the same line as the text of the paragraph. However, it is quite common to instead render large mathematical formulas centered on their own line as shown below. To achieve that, one only need to attach a `display="block"` attribute on the `` element. ```html hidden @@ -95,12 +95,14 @@ Note that in the previous example, the formula is on the same line as the text o ``` -{{ EmbedLiveSample('Inline_and_display_modes', 700, 100, "", "") }} +{{ EmbedLiveSample('The_display_attribute', 700, 100, "", "") }} -You may also notice some subtle change in the appearance: the text and vertical spacing of the fraction becomes a bit bigger. In _inline_ mode, the height is minimized to avoid disturbing the flow of the surrounding text. In _display_ mode, priority is instead put on legibility of the mathematical formula. +You may also notice some subtle change in the appearance: the text and vertical spacing of the fraction becomes a bit bigger. Without the `display="block"` attribute, the height is minimized to avoid disturbing the flow of the surrounding text. With the `display="block"` attribute, priority is instead put on legibility of the mathematical formula. > **Note:** This corresponds to the LaTeX's concept of _inline_ formulas (delimited by dollar signs `$...$`) and _display_ formulas (delimited by `\[...\]`). +> **Note:** The appearance change mentioned above is actually controlled by the [`math-style`](/en-US/docs/Web/CSS/math-style) property which is initally `normal` for `` and `compact` otherwise. In some MathML subtrees, this property can then automatically become `compact` but we will ignore this subtility for this introductory tutorial. Again, this is similar to LaTeX. + ## Grouping with the \ element The `` element can actually contain an arbitrary number of children and will essentially render them in a row. For instance, the simple formula "1 + 2 + 3" would be be encoded like this in MathML: @@ -193,9 +195,7 @@ As an exercise, figure out how to write the following expressions using only the ## Summary -In this article, we have taken a look at how to use the `` element to insert a mathematical formula inside a HTML document. We have learned about the difference between _inline_ and _display_ formulas and how to specify them via the `display` attribute of the `` element. - -In addition, we stumbled upon a couple of other MathML elements: `` for fractions, `` for grouping and finally a few text elements. We will analyze these [text containers](/en-US/docs/Learn/MathML/First_steps/Text_containers) further in the next article. +In this article, we have taken a look at how to use the `` element to insert a mathematical formula inside a HTML document. We have learned about rendering differences between `` elements that use `display="block"` or not. In addition, we stumbled upon a couple of other MathML elements: `` for fractions, `` for grouping and finally a few text elements. We will analyze these [text containers](/en-US/docs/Learn/MathML/First_steps/Text_containers) further in the next article. {{LearnSidebar}}{{NextMenu("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps")}} @@ -205,4 +205,5 @@ In addition, we stumbled upon a couple of other MathML elements: `` for f - [The `` element](/en-US/docs/Web/MathML/Element/math) - [The `` element](/en-US/docs/Web/MathML/Element/mfrac) - [The `` element](/en-US/docs/Web/MathML/Element/mrow) +- [The `math-style` property](/en-US/docs/Web/CSS/math-style) - [The `math-depth` property](/en-US/docs/Web/CSS/math-depth) diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index 77cc1f5c326c993..d6ad6b3c10fdadc 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -370,7 +370,7 @@ We now realize that the bottom bracket "⎵" and the rightward arrow "→" stret ### Large operator and limits -So far our example has actually been rendered in [_display_ mode](/en-US/docs/Learn/MathML/First_steps/Getting_started#inline_and_display_modes). Let's detach the `display="block"` attribute from the `` element to show up some interesting changes: +So far our example has actually been rendered with the [`display="block"`](/en-US/docs/Learn/MathML/First_steps/Getting_started#the_display_attribute) attribute. Let's detach it from the `` element to show up some interesting changes: ```html hidden @@ -473,8 +473,8 @@ math { As expected, the formula is no longer centered and the rendering is modified to minimized the height. Focusing on the summation symbol, one can notice that the sigma is drawn smaller and that the scripts of the `` element are now attached as a subscript and a superscript! This is due to two properties of the "∑" operator: -- _largeop_: The operator is drawn with a bigger glyph in _display_ mode. -- _movablelimits_: The underscripts and overscripts attached to the operator are respectively rendered as subscripts and superscripts in _inline_ mode. +- _largeop_: The operator is drawn with a bigger glyph if the `` tag has a `display="block"` attribute. +- _movablelimits_: The underscripts and overscripts attached to the operator are respectively rendered as subscripts and superscripts if the `` tag does not have the `display="block"` attribute. > **Note:** The _largeop_ property is actually unrelated to scripts, even though operators having this property are typically scripted. The _movablelimits_ property is taken into account for `` and `` elements too. diff --git a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md index fcbbcdf7cb89519..c4861805859d2d4 100644 --- a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md +++ b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md @@ -125,7 +125,7 @@ To get this assessment started, you can rely on our usual HTML template. By defa ## Hints and tips -- Start by distinguishing the _inline_ and _display_ formulas and set the `display` attribute accordingly. +- Start by inserting empty `` tags, deciding whether they should have a `display="block"` attribute or not. - Check the text used and find their [Unicode characters](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode) ("−", "ℂ", "∑", ...). - Analyze the semantics of each portion of text (variable? operator? number?) and determine the proper token element to use for each of them. - Look for advanced constructions (fractions? roots? scripts? matrices?) and determine the proper MathML element to use for each of them. From 2e80f531559ed38c6b74f666dc6d89c0eeebb3cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:46:04 +0200 Subject: [PATCH 07/20] Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/index.md b/files/en-us/learn/mathml/first_steps/index.md index 7c13dd92bdfaff3..d7201a1f6a49f7c 100644 --- a/files/en-us/learn/mathml/first_steps/index.md +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -9,7 +9,7 @@ tags: --- {{LearnSidebar}} -MathML is the markup language used to write mathematical formulas in Web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML. +MathML is the markup language used to write mathematical formulas in web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML. > **Callout:** > From 9021d5660a51b0cc0c0d362f487fb6a962975d61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:49:22 +0200 Subject: [PATCH 08/20] Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/index.md b/files/en-us/learn/mathml/first_steps/index.md index d7201a1f6a49f7c..6899395ddf6a9fe 100644 --- a/files/en-us/learn/mathml/first_steps/index.md +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -34,7 +34,7 @@ Before starting this module, you should have: This module contains the following articles, which will take you through all the basic theory of MathML, and provide opportunities for you to test out some skills. - [Getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) - - : In this article, we will take a simple HTML document and view how to add MathML formulas into it, introducing a few elements along the way. + - : In this article, we will take a simple HTML document and see how to add MathML formulas into it, introducing a few elements along the way. - [Text containers](/en-US/docs/Learn/MathML/First_steps/Text_containers) - : Now that you get a better idea of MathML, we move focus on text containers (variables, numbers, operators, ...) which are used as building blocks of MathML formulas. - [Fractions and roots](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots) From 81e89385691b296910f034a084a0dcc8a4999164 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:49:40 +0200 Subject: [PATCH 09/20] Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/index.md b/files/en-us/learn/mathml/first_steps/index.md index 6899395ddf6a9fe..050ed21fff73d52 100644 --- a/files/en-us/learn/mathml/first_steps/index.md +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -36,7 +36,7 @@ This module contains the following articles, which will take you through all the - [Getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) - : In this article, we will take a simple HTML document and see how to add MathML formulas into it, introducing a few elements along the way. - [Text containers](/en-US/docs/Learn/MathML/First_steps/Text_containers) - - : Now that you get a better idea of MathML, we move focus on text containers (variables, numbers, operators, ...) which are used as building blocks of MathML formulas. + - : Now that you get a better idea of MathML, we move on to text containers (variables, numbers, operators, ...) which are used as building blocks of MathML formulas. - [Fractions and roots](/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots) - : Relying on text containers, this article describes how to build more complex MathML expressions by nesting fractions and roots. - [Scripts](/en-US/docs/Learn/MathML/First_steps/Scripts) From f476433e620cfdd71df1552be62b8a6b84017326 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:49:51 +0200 Subject: [PATCH 10/20] Update files/en-us/learn/mathml/first_steps/getting_started/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/getting_started/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/getting_started/index.md b/files/en-us/learn/mathml/first_steps/getting_started/index.md index e7a24b496eb5360..a1efacb8ce2157d 100644 --- a/files/en-us/learn/mathml/first_steps/getting_started/index.md +++ b/files/en-us/learn/mathml/first_steps/getting_started/index.md @@ -8,7 +8,7 @@ tags: --- {{LearnSidebar}}{{NextMenu("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps")}} -In this article, we will take a simple HTML document and view how to add MathML formulas into it, introducing a few elements along the way. +In this article, we will take a simple HTML document and see how to add MathML formulas into it, introducing a few elements along the way. From f20f428bfa9d99461a7bfa32b29d1f97821a7e30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:50:27 +0200 Subject: [PATCH 11/20] Update files/en-us/learn/mathml/first_steps/getting_started/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/getting_started/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/getting_started/index.md b/files/en-us/learn/mathml/first_steps/getting_started/index.md index a1efacb8ce2157d..7e4d61074e3009a 100644 --- a/files/en-us/learn/mathml/first_steps/getting_started/index.md +++ b/files/en-us/learn/mathml/first_steps/getting_started/index.md @@ -72,7 +72,7 @@ The `` element specifies a fraction with a numerator (its first child) an ### The display attribute -Note that in the previous example, the formula is on the same line as the text of the paragraph. However, it is quite common to instead render large mathematical formulas centered on their own line as shown below. To achieve that, one only need to attach a `display="block"` attribute on the `` element. +Note that in the previous example, the formula is on the same line as the text of the paragraph. However, it is quite common to instead render large mathematical formulas centered on their own line as shown below. To achieve that, you need to attach a `display="block"` attribute on the `` element. ```html hidden From d077f59ee5d3cf252e7e9ca3a7061b35ae58dd19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:52:03 +0200 Subject: [PATCH 12/20] Update files/en-us/learn/mathml/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/index.md b/files/en-us/learn/mathml/index.md index eff6253cbbecf14..f3806fad276bc43 100644 --- a/files/en-us/learn/mathml/index.md +++ b/files/en-us/learn/mathml/index.md @@ -11,7 +11,7 @@ tags: --- {{LearnSidebar}} -Mathematical Markup Language — or {{glossary("MathML")}} — is the markup language used to write mathematical formulas in Web pages using fractions, scripts, radicals, matrices, integrals, series, etc. Although it was originally designed as an independent XML language, MathML is generally directly embedded inside {{Glossary('HTML')}} documents and can be seen as an extension of HTML. +Mathematical Markup Language — or {{glossary("MathML")}} — is the markup language used to write mathematical formulas in web pages using fractions, scripts, radicals, matrices, integrals, series, etc. Although it was originally designed as an independent XML language, MathML is generally embedded inside {{Glossary('HTML')}} documents and can be seen as an extension of HTML. > **Warning:** In practice, MathML content is generated from [lightweight markup languages](https://en.wikipedia.org/wiki/Lightweight_markup_language) (e.g. [LaTeX](https://fr.wikipedia.org/wiki/LaTeX)) or using [graphical user interface](https://en.wikipedia.org/wiki/Graphical_user_interface): if you just need to integrate mathematical formulas in your web pages, the tips from the [Authoring MathML](/en-US/docs/Web/MathML/Authoring) page should be enough. From 119694fc1908543ad453f3ed7cf10cc23d595763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:52:26 +0200 Subject: [PATCH 13/20] Update files/en-us/learn/mathml/first_steps/tables/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/tables/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md index 8fddd8b9af146ea..2db05816cd5534d 100644 --- a/files/en-us/learn/mathml/first_steps/tables/index.md +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -137,7 +137,7 @@ Tables are typically used for matrix-like expressions (including vectors). Here ## Allowing cells to span multiple rows and columns -This is again similar to [HTML's article](/en-US/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns). The `` element accepts the `columnspan` and `rowspan` attributes to indicate that the cell spans multiples rows and columns. Below the inner matrix spans two columns of the outer matrix: +This is again similar to [HTML tables](/en-US/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns). The `` element accepts the `columnspan` and `rowspan` attributes to indicate that the cell spans multiples rows and columns. Below the inner matrix spans two columns of the outer matrix: ```html hidden From 49be55db306bc8ec7a731fe5f683c5db444abc5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:53:06 +0200 Subject: [PATCH 14/20] Update files/en-us/learn/mathml/first_steps/text_containers/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/text_containers/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/text_containers/index.md b/files/en-us/learn/mathml/first_steps/text_containers/index.md index 0516c63aebe82c4..3da421fbeb4406f 100644 --- a/files/en-us/learn/mathml/first_steps/text_containers/index.md +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -217,7 +217,7 @@ This example should render similarly to the screenshot below. Observe the spacin ![Screenshot of the MathML formula with different operator spacing](operator-spacing.png) -Operators have many other properties that we will see in more details later. For now, remember to use an `` container for characters in the operator dictionary and to properly group subexpressions with `` elements in order to help MathML renderers to provide a good rendering. +Operators have many other properties that we will see in more details later. For now, remember to use an `` container for characters in the operator dictionary and to properly group subexpressions with `` elements in order to help MathML renderers. ### Active learning: spot the difference From 5eba1aae8b57771aef422cf25150224fe9daddbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:57:07 +0200 Subject: [PATCH 15/20] Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/index.md b/files/en-us/learn/mathml/first_steps/index.md index 050ed21fff73d52..3b9b16019c041a3 100644 --- a/files/en-us/learn/mathml/first_steps/index.md +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -27,7 +27,7 @@ Before starting this module, you should have: 2. A basic work environment set up, as detailed in [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software), and an understanding of how to create and manage files, as detailed in [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files). 3. Basic familiarity with HTML, as described in [Introduction to HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML). -> **Note:** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). +> **Note:** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). ## Guides From c2aad4e4c5b4fd7cfc1e2900fe8f6b8e0bf8f2b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 16:58:01 +0200 Subject: [PATCH 16/20] Update files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md Co-authored-by: Ruth John --- .../en-us/learn/mathml/first_steps/fractions_and_roots/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md index 95faa8b24e4d4a1..ab16f38981671fc 100644 --- a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -70,7 +70,7 @@ In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Gettin Below is a screenshot of how it is rendered by a browser: -- We already know that the `` element is rendered as a fraction: the first child (the numerator) and is drawn above the second child (the denominator) separated by a horizontal bar. +- We already know that the `` 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 `` is rendered as a square root: its children are laid out like an [``](/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 `` 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. From 6f1410958078277cffb27657292a1ccd549a46d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 17:00:11 +0200 Subject: [PATCH 17/20] Update files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md Co-authored-by: Ruth John --- .../en-us/learn/mathml/first_steps/fractions_and_roots/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md index ab16f38981671fc..6aaa88b7145c57a 100644 --- a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -72,7 +72,7 @@ Below is a screenshot of how it is rendered by a browser: - We already know that the `` 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 `` is rendered as a square root: its children are laid out like an [``](/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 `` 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. +- Finally, the `` 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. ![Screenshot of mfrac, msqrt, mroot](mfrac-msqrt-mroot.png) From 8515468154d23357266e782bf98c810f4a0ff488 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 17:01:11 +0200 Subject: [PATCH 18/20] Update files/en-us/learn/mathml/first_steps/scripts/index.md Co-authored-by: Ruth John --- files/en-us/learn/mathml/first_steps/scripts/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index d6ad6b3c10fdadc..b181f70352f469d 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -8,7 +8,7 @@ tags: --- {{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} -We continue the review of basic math notations and focuses on building MathML elements with scripts. +We continue the review of basic math notations and focus on building MathML elements with scripts.
From c8bc2185e4d0df464303ce27766ab0a1c8f23c9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Fri, 2 Sep 2022 17:48:11 +0200 Subject: [PATCH 19/20] Address review comments from @Rumyra --- .../first_steps/fractions_and_roots/index.md | 100 +++++------- .../learn/mathml/first_steps/scripts/index.md | 8 +- .../learn/mathml/first_steps/tables/index.md | 154 +++++++++--------- .../first_steps/text_containers/index.md | 63 ++++++- files/en-us/learn/mathml/index.md | 2 - 5 files changed, 184 insertions(+), 143 deletions(-) diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md index 6aaa88b7145c57a..6bb97f0fffcfe7e 100644 --- a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -70,12 +70,12 @@ In the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Gettin 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 `` 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 `` is rendered as a square root: its children are laid out like an [``](/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 `` 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. -![Screenshot of mfrac, msqrt, mroot](mfrac-msqrt-mroot.png) - ### 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. @@ -234,31 +234,25 @@ checkboxes.forEach((checkbox) => { As previously seen, the overbar of the `` and `` elements stretches horizontally to cover their content. But actually the root symbol √ also stretches to be as tall as their content. +```html hidden + +``` + ```html - - - - - My page with stretchy radical symbols - - - - - - - - 1 - 2 - - - 3 - - - - + + + + + 1 + 2 + + + 3 + + ``` {{ EmbedLiveSample('Stretchy_radical_symbols', 700, 200, "", "") }} @@ -269,37 +263,31 @@ As previously seen, the overbar of the `` and `` elements stretche 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 `` element to markup such notations. For fraction-like notations that don't draw a horizontal bar, attach a `linethickness="0"` attribute to the `` element: +```html hidden + +``` + ```html - - - - - My binomial coefficient - - - - - - ( - - 3 - 2 - - ) - - = - 6 - ≠ - - 3 - 2 - - - - + + + ( + + 3 + 2 + + ) + + = + 6 + ≠ + + 3 + 2 + + ``` {{ EmbedLiveSample('Fraction_without_bar', 700, 200, "", "") }} diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index b181f70352f469d..b558289e1f0f26c 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -74,15 +74,17 @@ Similarly to what we saw in the [previous article](/en-US/docs/Learn/MathML/Firs

``` -Below is the rendering of the above example in your browser. You should notice that: +Below is the rendering of the above example in your browser. + +{{ EmbedLiveSample('Subtrees_of_msub_msup_msubsup', 700, 200, "", "") }} + +You should notice that: - The second child of the `` element is attached as a subscript of its first child. - The second child of the `` element is attached as a superscript of its first child. - The second and third children of the `` element are respectively attached as a subscript and superscript of its first child. - The text inside scripts is scaled down. -{{ EmbedLiveSample('Subtrees_of_msub_msup_msubsup', 700, 200, "", "") }} - > **Note:** The MathML elements `` and `` are different from the HTML elements [``](/en-US/docs/Web/HTML/Element/sub) and [``](/en-US/docs/Web/HTML/Element/sup). They allow to use an arbitrary MathML subtree as scripts, not just text. ## Underscripts and overscripts diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md index 2db05816cd5534d..ac64bba6d8d2ca3 100644 --- a/files/en-us/learn/mathml/first_steps/tables/index.md +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -47,90 +47,84 @@ The MathML tabular elements are similar to the ones for [HTML tables](/en-US/doc Tables are typically used for matrix-like expressions (including vectors). Here is a basic example taken from the [article about the CSS `matrix()` function](/en-US/docs/Web/CSS/transform-function/matrix): -```html - - - - - My first matrix +```html hidden - - - - - ( - - - - a - - - c - - - 0 - - - - t - x - - - - - - b - - - d - - - 0 - - - - t - y - - - - - - 0 - - - 0 - - - 1 - - - 0 - - - - - 0 - - - 0 - - - 0 - - - 1 - - - - ) - - - - +``` + +```html + + + ( + + + + a + + + c + + + 0 + + + + t + x + + + + + + b + + + d + + + 0 + + + + t + y + + + + + + 0 + + + 0 + + + 1 + + + 0 + + + + + 0 + + + 0 + + + 0 + + + 1 + + + + ) + + ``` {{ EmbedLiveSample('MathML_tabular_elements', 700, 200, "", "") }} diff --git a/files/en-us/learn/mathml/first_steps/text_containers/index.md b/files/en-us/learn/mathml/first_steps/text_containers/index.md index 3da421fbeb4406f..108b6c5c9922a79 100644 --- a/files/en-us/learn/mathml/first_steps/text_containers/index.md +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -76,7 +76,7 @@ We noticed in the [getting started with MathML](/en-US/docs/Learn/MathML/First_s ### Active learning: recognize token elements -Below is a more complex example, which says that the absolute value of a real number is equal to that number if and only if it is nonnegative. Spot the different token elements and what they are used for. Each time you click the corresponding text, it is highlighted and a confirmation message is displayed. Finally, read the MathML source to verify whether that corresponds to your expectation. +Below is a more complex example, which says that the absolute value of a real number is equal to that number if and only if it is nonnegative. Spot the different token elements and what they are used for. Each time you click the corresponding text, it is highlighted and a confirmation message is displayed. ```html hidden @@ -150,6 +150,28 @@ document.getElementById("clearOutput").addEventListener("click", () => { {{ EmbedLiveSample('Active_learning_recognize_token_elements', 700, 400, "", "") }} +Finally, read the MathML source to verify whether that corresponds to your expectation: + +```xml + + + + | + x + | + + = + x + +  iff  + + x + ≥ + 0 + + +``` + > **Note:** It is sometimes difficult to decide the token element to use for a given text content. In practice, choosing the wrong element should not cause major issues because all token elements are generally rendered the same by browser implementations (for visual display and for assistive technologies). However, the `` and `` elements have special distinguishing features that one should be aware of. They are explained in the following sections. ## Automatic italicization of \ @@ -298,7 +320,7 @@ document.getElementById("showSolution").addEventListener( ### Active learning: stretchy operators -The operator dictionary defines a default _stretchy_ property as well as corresponding _stretch axis_ for some operators. For example, an operator can stretch vertically by default to cover the maximum height of non-stretchy siblings within its `` container. By tweaking a bit the [previous exercise](#active_learning_recognize_token_elements), one can make operators stretch vertically. Can you find them? As usual, you are invited to read the source code when you are done. +The operator dictionary defines a default _stretchy_ property as well as corresponding _stretch axis_ for some operators. For example, an operator can stretch vertically by default to cover the maximum height of non-stretchy siblings within its `` container. By tweaking a bit the [previous exercise](#active_learning_recognize_token_elements), one can make operators stretch vertically. Can you find them? ```html hidden @@ -397,6 +419,43 @@ document.getElementById("clearOutput").addEventListener("click", () => { {{ EmbedLiveSample('Active_learning_stretchy_fences', 700, 400, "", "") }} +As usual, you are invited to read the source code when you are done: + +```xml + + + + | + + 1 + x + + | + + = + + 1 + + | + x + | + + + = + + 1 + x + + +  iff  + + x + ≥ + 0 + + +``` + > **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). ## Summary diff --git a/files/en-us/learn/mathml/index.md b/files/en-us/learn/mathml/index.md index f3806fad276bc43..add0e50bbdf969c 100644 --- a/files/en-us/learn/mathml/index.md +++ b/files/en-us/learn/mathml/index.md @@ -35,8 +35,6 @@ Some familarity with mathematical notations and [TeX](https://fr.wikipedia.org/w ## Modules -This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one. - - [MathML first steps](/en-US/docs/Learn/MathML/First_steps) - : MathML is the markup language used to write mathematical formulas in Web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML. From b08811e95d02f804ee2c567c60273616dab809a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Sat, 3 Sep 2022 07:31:21 +0200 Subject: [PATCH 20/20] address review comments from brian --- files/en-us/learn/mathml/first_steps/scripts/index.md | 4 ++-- files/en-us/learn/mathml/first_steps/tables/index.md | 4 ++-- files/en-us/learn/mathml/first_steps/text_containers/index.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index b558289e1f0f26c..3c1a12add01e21f 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -85,7 +85,7 @@ You should notice that: - The second and third children of the `` element are respectively attached as a subscript and superscript of its first child. - The text inside scripts is scaled down. -> **Note:** The MathML elements `` and `` are different from the HTML elements [``](/en-US/docs/Web/HTML/Element/sub) and [``](/en-US/docs/Web/HTML/Element/sup). They allow to use an arbitrary MathML subtree as scripts, not just text. +> **Note:** The MathML elements `` and `` are different from the HTML elements [``](/en-US/docs/Web/HTML/Element/sub) and [``](/en-US/docs/Web/HTML/Element/sup). They allow authors to provide arbitrary MathML subtrees as scripts, not just text. ## Underscripts and overscripts @@ -372,7 +372,7 @@ We now realize that the bottom bracket "⎵" and the rightward arrow "→" stret ### Large operator and limits -So far our example has actually been rendered with the [`display="block"`](/en-US/docs/Learn/MathML/First_steps/Getting_started#the_display_attribute) attribute. Let's detach it from the `` element to show up some interesting changes: +So far our example has actually been rendered with the [`display="block"`](/en-US/docs/Learn/MathML/First_steps/Getting_started#the_display_attribute) attribute. Let's look at the same example, as rendered without that attribute: ```html hidden diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md index ac64bba6d8d2ca3..69f1de2636a2977 100644 --- a/files/en-us/learn/mathml/first_steps/tables/index.md +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -43,7 +43,7 @@ Once all basic math notations are known, it remains to consider tabular layout w ## MathML tabular elements -The MathML tabular elements are similar to the ones for [HTML tables](/en-US/docs/Learn/HTML/Tables): the `` element represents a table, the `` element represents a row and the `` element represents a cell. An `` table can be inserted anywhere in a MathML formula. The `` cell can contain any number of MathML children and will lay them out as an `` container. +The MathML tabular elements are similar to the ones for [HTML tables](/en-US/docs/Learn/HTML/Tables): the `` element represents a mathematical table, it has `` elements as its children (representing rows), each of them having `` elements as its children (representing cells). An `` element can be inserted anywhere in a MathML formula. The `` element can contain any number of MathML children and will lay them out as an `` container. Tables are typically used for matrix-like expressions (including vectors). Here is a basic example taken from the [article about the CSS `matrix()` function](/en-US/docs/Web/CSS/transform-function/matrix): @@ -302,7 +302,7 @@ Besides representing matrix-like objects, MathML tables are sometimes used for a {{ EmbedLiveSample('Usage_for_advanced_layout', 700, 200, "", "") }} -> **Warning:** The [`` article](/en-US/docs/Web/MathML/Element/mtable) provides more advanced layout options via special attributes such as alignment or spacing. This is inherited from the original design of MathML, that was supposed to work in engines that are not CSS-aware. However, these attributes may not be implemented in all browsers. In the future, it is likely that usages of `` for layout-only purpose (i.e. not actual matrix-like objects) can be replaced with CSS-based alternatives. +> **Warning:** The [`` article](/en-US/docs/Web/MathML/Element/mtable) provides more advanced layout options via special attributes such as alignment or spacing. These originated before CSS equivalents and were originally designed and intended for renderers which were not-CSS aware. However, these attributes may not be implemented in all browsers. In the future, it is likely that usages of `` for layout-only purpose (i.e. not actual matrix-like objects) can be replaced with CSS-based alternatives. ## Summary diff --git a/files/en-us/learn/mathml/first_steps/text_containers/index.md b/files/en-us/learn/mathml/first_steps/text_containers/index.md index 108b6c5c9922a79..777f98e7e4f7768 100644 --- a/files/en-us/learn/mathml/first_steps/text_containers/index.md +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -69,7 +69,7 @@ Since most of these characters are not part of Basic Latin Unicode block, it is We noticed in the [getting started with MathML](/en-US/docs/Learn/MathML/First_steps/Getting_started) article that the text in MathML formulas are wrapped in specific container elements such as the `` or ``. More generally, every text in MathML formulas must be included inside such container elements, called _token_ elements. In addition, MathML provides multiple token elements in order to distinguish different meanings of the text content: -- The `` element, which represents a symbolic name or arbitrary text that should be rendered as an identifier. Examples: `x` (variable), `cos` (function name) and `π` (symbolic constant). +- The `` element, which represents an "identifier" which could be a symbolic name or arbitrary text. Examples: `x` (variable), `cos` (function name) and `π` (symbolic constant). - The `` element represents a "numeric literal" or other data that should be rendered as a numeric literal. Examples: `2` (integer), `0.123` (decimal number) or `0xFFEF` (hexadecimal value). - The `` element represents an operator or anything that should be rendered as an operator. For example `+` (binary operation), `≤` (binary relation), `∑` (summation symbol) or `[` (fence). - The `` element is used to represent arbitrary text. For example short words in formulas such as `if` or `maps to`.