Use EmbedLiveSample for all MathML examples (#20506)

Done: - Add live sample to show the result in the browser, replacing "rendering in your browser" for some examples. - Remove "sample rendering" for some examples, the only exception being `<mfenced>` which is not intended to be supported by browsers in the future, so it's still useful show how it was supposed to render. - Use display="block" for MathML examples, so they show up more "beautifully" (centered in their own line with optimization on readability). - Add a hidden link to math web font for some of them, to ensure that stretchy characters can display correctly. - Adjust indentation and spacing. - Other minimal tweaks of the examples (adding background to spacing elements, add click instruction to maction, split token element examples into multiple lines, fix one quote in ms example, ...) Rationale: - Makes examples a bit clearer and consistent. - All browsers are going to have MathML in the short future (or can already be enabled by a flag), using EmbedLiveSample is more convenient for maintenance of the wiki pages.
mdn · Sep 27, 2022 · 95be180 · 95be180
1 parent 46ed7c1
commit 95be180
Show file tree

Hide file tree

Showing 34 changed files with 223 additions and 112 deletions.
diff --git a/files/en-us/web/mathml/element/maction/index.md b/files/en-us/web/mathml/element/maction/index.md
@@ -35,34 +35,43 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 The following example uses the "toggle" `actiontype`:
 
 ```html
-<math>
-  <maction actiontype="toggle">
-    <mfrac>
-      <mn>6</mn>
-      <mn>8</mn>
-    </mfrac>
-
-    <mfrac>
-      <mrow>
+<p>Try clicking this formula several times:
+
+  <math display="block">
+
+    <maction actiontype="toggle">
+
+      <mfrac>
+        <mn>6</mn>
+        <mn>8</mn>
+      </mfrac>
+
+      <mfrac>
+        <mrow>
+          <mn>3</mn>
+          <mo>×</mo>
+          <mn>2</mn>
+        </mrow>
+        <mrow>
+          <mn>4</mn>
+          <mo>×</mo>
+          <mn>2</mn>
+        </mrow>
+      </mfrac>
+
+      <mfrac>
         <mn>3</mn>
-        <mo>×</mo>
-        <mn>2</mn>
-      </mrow>
-      <mrow>
         <mn>4</mn>
-        <mo>×</mo>
-        <mn>2</mn>
-      </mrow>
-    </mfrac>
-
-    <mfrac>
-      <mn>3</mn>
-      <mn>4</mn>
-    </mfrac>
-  </maction>
-</math>
+      </mfrac>
+
+    </maction>
+
+  </math>
+</p>
 ```
 
+{{ EmbedLiveSample('maction_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/math/index.md b/files/en-us/web/mathml/element/math/index.md
@@ -31,6 +31,13 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 
 This example contains two MathML formula. The first one is rendered in its own centered block, taking as much space as needed. The second one is rendered inside the paragraph of text, with reduced size and spacing in order to minimize its height.
 
+```html hidden
+ <link
+   rel="stylesheet"
+   href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css"
+  />
+```
+
 ```html
 <p>
   The infinite sum
@@ -70,6 +77,8 @@ This example contains two MathML formula. The first one is rendered in its own c
 </p>
 ```
 
+{{ EmbedLiveSample('math_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/menclose/index.md b/files/en-us/web/mathml/element/menclose/index.md
@@ -44,7 +44,7 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 ## Examples
 
 ```html
-<math>
+<math display="block">
   <menclose notation="circle box">
     <mi>x</mi>
     <mo>+</mo>
@@ -53,6 +53,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 </math>
 ```
 
+{{ EmbedLiveSample('menclose_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mfenced/index.md b/files/en-us/web/mathml/element/mfenced/index.md
@@ -30,12 +30,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 
 ### The last separator is repeated (`,`)
 
-Sample rendering: ![{a;b;c,d,e}](mfenced01.png)
-
-Rendering in your browser: <math><mfenced close="}" open separators=";;,"><mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi></mfenced></math>
-
 ```html
-<math>
+<math display="block">
   <mfenced open="{" close="}" separators=";;,">
     <mi>a</mi>
     <mi>b</mi>
@@ -46,14 +42,16 @@ Rendering in your browser: <math><mfenced close="}" open separators=";;,"><mi>a<
 </math>
 ```
 
-### All excess is ignored (`,`)
+Sample rendering: ![{a;b;c,d,e}](mfenced01.png)
 
-Sample rendering: ![[a|b|c|d|e]](mfenced02.png)
+Rendering in your browser:
 
-Rendering in your browser: <math><mfenced close="]" open separators="||||,"><mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi></mfenced></math>
+{{ EmbedLiveSample('mfenced_example1', 700, 200, "", "") }}
+
+### All excess is ignored (`,`)
 
 ```html
-<math>
+<math display="block">
   <mfenced open="[" close="]" separators="||||,">
     <mi>a</mi>
     <mi>b</mi>
@@ -64,6 +62,12 @@ Rendering in your browser: <math><mfenced close="]" open separators="||||,"><mi>
 </math>
 ```
 
+Sample rendering: ![[a|b|c|d|e]](mfenced02.png)
+
+Rendering in your browser:
+
+{{ EmbedLiveSample('mfenced_example1', 700, 200, "", "") }}
+
 ## Specifications
 
 The \<mfenced> element is no longer part of the [latest MathML standard](https://github.com/w3c/mathml/issues/2). Use the {{MathMLElement("mrow")}} and {{MathMLElement("mo")}} elements instead, or, for backwards compatibility, see [mathml-polyfills/mfenced.](https://github.com/mathml-refresh/mathml-polyfills/tree/main/mfenced)

diff --git a/files/en-us/web/mathml/element/mi/index.md b/files/en-us/web/mathml/element/mi/index.md
@@ -20,18 +20,24 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
 ## Examples
 
 ```html
-<math>
+<math display="block">
   <!-- Multiple characters, default mathvariant is "normal". -->
   <mi>sin</mi>
+</math>
 
+<math display="block">
   <!-- Single character, default mathvariant is "italic". -->
   <mi>y</mi>
+</math>
 
+<math display="block">
   <!-- Overriding default mathvariant. -->
   <mi mathvariant="normal">F</mi>
 </math>
 ```
 
+{{ EmbedLiveSample('mi_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mn/index.md b/files/en-us/web/mathml/element/mn/index.md
@@ -20,19 +20,29 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
 ## Examples
 
 ```html
-<math>
+<math display="block">
   <mn>0</mn>
+</math>
 
+<math display="block">
   <mn>1.337</mn>
+</math>
 
+<math display="block">
   <mn>twelve</mn>
+</math>
 
+<math display="block">
   <mn>XVI</mn>
+</math>
 
+<math display="block">
   <mn>2e10</mn>
 </math>
 ```
 
+{{ EmbedLiveSample('mi_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mo/index.md b/files/en-us/web/mathml/element/mo/index.md
@@ -58,16 +58,17 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 ## Examples
 
 ```html
-<math>
+<math display="block">
   <mrow>
     <mn>5</mn>
     <mo>+</mo>
     <mn>5</mn>
   </mrow>
+</math>
 
+<math display="block">
   <mrow>
     <mo>[</mo> <!-- default form value: prefix -->
-
     <mrow>
       <mn>0</mn>
       <mo>;</mo> <!-- default form value: infix -->
@@ -78,6 +79,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 </math>
 ```
 
+{{ EmbedLiveSample('mo_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mover/index.md b/files/en-us/web/mathml/element/mover/index.md
@@ -23,12 +23,15 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 
 ## Examples
 
-Sample rendering: ![x+y+z](mover.png)
-
-Rendering in your browser: <math><mover accent="true"><mrow><mi>x</mi><mo>+</mo><mi>y</mi><mo>+</mo><mi>z</mi></mrow><mo>⏞</mo></mover></math>
+```html hidden
+ <link
+   rel="stylesheet"
+   href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css"
+  />
+```
 
 ```html
-<math>
+<math display="block">
   <mover accent="true">
     <mrow>
       <mi>x</mi>
@@ -42,6 +45,8 @@ Rendering in your browser: <math><mover accent="true"><mrow><mi>x</mi><mo>+</mo>
 </math>
 ```
 
+{{ EmbedLiveSample('mover_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mover/mover.png b/files/en-us/web/mathml/element/mover/mover.png
diff --git a/files/en-us/web/mathml/element/mpadded/index.md b/files/en-us/web/mathml/element/mpadded/index.md
@@ -35,15 +35,18 @@ It is possible to use the keywords `"depth`", `"height"`, and `"width"` as a pse
 ## Examples
 
 ```html
-<math>
-  <mpadded height="+150px" width="100px" lspace="2height">
+<math display="block">
+  <mpadded height="+150px" width="100px" lspace="2height"
+           style="background: lightblue">
     <mi>x</mi>
     <mo>+</mo>
     <mi>y</mi>
   </mpadded>
 </math>
 ```
 
+{{ EmbedLiveSample('mover_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mphantom/index.md b/files/en-us/web/mathml/element/mphantom/index.md
@@ -19,12 +19,8 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
 
 ## Examples
 
-Sample rendering: ![x+  z](mphantom.png)
-
-Rendering in your browser: <math><mrow><mi>x</mi><mo>+</mo><mphantom><mi>y</mi><mo>+</mo></mphantom><mi>z</mi></mrow></math>
-
 ```html
-<math>
+<math display="block">
   <mrow>
     <mi>x</mi>
     <mo>+</mo>
@@ -37,6 +33,8 @@ Rendering in your browser: <math><mrow><mi>x</mi><mo>+</mo><mphantom><mi>y</mi><
 </math>
 ```
 
+{{ EmbedLiveSample('mphantom_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mphantom/mphantom.png b/files/en-us/web/mathml/element/mphantom/mphantom.png
diff --git a/files/en-us/web/mathml/element/mroot/index.md b/files/en-us/web/mathml/element/mroot/index.md
@@ -19,19 +19,24 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
 
 ## Examples
 
-Sample Rendering: ![x](mroot.png)
-
-Rendering in your browser: <math><mroot><mi>x</mi> <mn>3</mn></mroot></math>
+```html hidden
+ <link
+   rel="stylesheet"
+   href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css"
+  />
+```
 
 ```html
-<math>
+<math display="block">
   <mroot>
     <mi>x</mi>
     <mn>3</mn>
   </mroot>
 </math>
 ```
 
+{{ EmbedLiveSample('mroot_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/mathml/element/mroot/mroot.png b/files/en-us/web/mathml/element/mroot/mroot.png
diff --git a/files/en-us/web/mathml/element/mrow/index.md b/files/en-us/web/mathml/element/mrow/index.md
@@ -25,25 +25,35 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
 ## Examples
 
 ```html
-<math>
-  <mrow>
-    <mn>1</mn>
-    <mo>+</mo>
-    <mn>1</mn>
-  </mrow>
-
-  <mrow>
-    <mo>(</mo>
+<math display="block">
+  <mfrac>
+   <mrow>
+      <!-- numerator content grouped in one mrow -->
+      <mn>1</mn>
+      <mo>+</mo>
+      <mi>K</mi>
+    </mrow>
     <mrow>
-      <mi>x</mi>
-      <mo>,</mo>
-      <mi>y</mi>
+      <!-- denominator content grouped in one mrow -->
+      <mn>3</mn>
+      <mrow>
+        <!-- fenced expression grouped in one mrow -->
+        <mo>(</mo>
+        <mrow>
+          <!-- fenced content grouped in one mrow -->
+          <mi>x</mi>
+          <mo>+</mo>
+          <mi>y</mi>
+        </mrow>
+        <mo>)</mo>
+      </mrow>
     </mrow>
-    <mo>)</mo>
-  </mrow>
+  </mfrac>
 </math>
 ```
 
+{{ EmbedLiveSample('mrow_example', 700, 200, "", "") }}
+
 ## Specifications
 
 {{Specifications}}