From 84c6561f78effc7843fcb61757a7ea69999828fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Mon, 5 Sep 2022 13:24:26 +0200 Subject: [PATCH] Add MathML tutorial (#19467) * Add MathML tutorial An introduction to basic MathML constructions, using similar structure as the lessons for HTML, CSS and JavaScript. This only introduces the "first steps" module but more advanced topics may be added in the future. * fix typo with sub/supp * find -type f -name *.md | xargs sed -i 's///g' * for x in $(find files/en-us/learn/mathml/first_steps -name *.png); do yarn filecheck "$x" --save-compression; done * format files * Don't introduce the display/inline term which are specific to LaTeX / math typesetting, but not mentioned in MathML and confusing with MathML display attribute CSS block/inline. Intead just say whether the has a display="block" attribute or not. Also add an initial note about CSS math-style. * Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/getting_started/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/getting_started/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/tables/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/text_containers/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md Co-authored-by: Ruth John * Update files/en-us/learn/mathml/first_steps/scripts/index.md Co-authored-by: Ruth John * Address review comments from @Rumyra * address review comments from brian Co-authored-by: Joshua Chen Co-authored-by: Ruth John --- .../first_steps/fractions_and_roots/index.md | 307 +++++++++++ .../fractions_and_roots/mfrac-msqrt-mroot.png | Bin 0 -> 3204 bytes .../first_steps/getting_started/index.md | 209 ++++++++ files/en-us/learn/mathml/first_steps/index.md | 52 ++ .../learn/mathml/first_steps/scripts/index.md | 496 ++++++++++++++++++ .../learn/mathml/first_steps/tables/index.md | 320 +++++++++++ .../first_steps/text_containers/index.md | 472 +++++++++++++++++ .../text_containers/operator-spacing.png | Bin 0 -> 15626 bytes .../index.md | 137 +++++ .../xelatex-output.png | Bin 0 -> 29027 bytes files/en-us/learn/mathml/index.md | 44 ++ 11 files changed, 2037 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..6bb97f0fffcfe7e --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -0,0 +1,307 @@ +--- +title: MathML fractions and roots +slug: Learn/MathML/First_steps/Fractions_and_roots +tags: + - Beginner + - MathML + - Landing +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps")}} + +Relying on text containers, this article describes how to build more complex MathML expressions by nesting fractions and roots. + + + + + + + + + + + + +
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: + +![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. + +### 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: 0.5em; +} +``` + +```js hidden +const options = document.getElementById("options"); +const comment = document.getElementById("comment"); +const checkboxes = Array.from(options.getElementsByTagName("input")); +const status = document.getElementById("status"); +function verifyOption(checkbox) { + let mathml = checkbox.dataset.highlight; + if (mathml) { + mathml = document.getElementById(mathml); + } + if (checkbox.checked) { + comment.textContent = checkbox.dataset.comment; + if (mathml) { + mathml.classList.add("highlight"); + } else { + checkbox.checked = false; + } + } else { + comment.textContent = ""; + if (mathml) { + mathml.classList.remove("highlight"); + } + } + const finished = checkboxes.every( + (checkbox) => !!checkbox.checked === !!checkbox.dataset.highlight, + ); + status.textContent = finished + ? "Congratulations, you checked all the correct answers!" + : ""; +} +checkboxes.forEach((checkbox) => { + checkbox.addEventListener("change", () => { + verifyOption(checkbox); + }); +}); +``` + +{{ EmbedLiveSample('Active_learning_nesting_different_elements', 700, 600, "", "") }} + +## Stretchy radical symbols + +As previously seen, the overbar of the `` 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 + + + + + 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 hidden + +``` + +```html + + + ( + + 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..f1fb314732fee95cb7362c1065727102c66d0e49 GIT binary patch literal 3204 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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. + +### 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, you 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('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. 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: + +```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 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")}} + +## 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-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/index.md b/files/en-us/learn/mathml/first_steps/index.md new file mode 100644 index 000000000000000..3b9b16019c041a3 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/index.md @@ -0,0 +1,52 @@ +--- +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 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 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 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) + - : 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..3c1a12add01e21f --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -0,0 +1,496 @@ +--- +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 focus 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. + +{{ 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. + +> **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 + +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: 0.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 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 + + + + + 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 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. + +## 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..69f1de2636a2977 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -0,0 +1,320 @@ +--- +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 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): + +```html hidden + +``` + +```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, "", "") }} + +## Allowing cells to span multiple rows and columns + +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 + + + + + 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. 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 + +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..777f98e7e4f7768 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -0,0 +1,472 @@ +--- +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 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`. + +### 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. + +```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, "", "") }} + +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 \ + +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. + +### 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: 0.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? + +```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, "", "") }} + +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 + +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..c4861805859d2d4 --- /dev/null +++ b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md @@ -0,0 +1,137 @@ +--- +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 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. +- 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- 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 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..add0e50bbdf969c --- /dev/null +++ b/files/en-us/learn/mathml/index.md @@ -0,0 +1,44 @@ +--- +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 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 + +- [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.