Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use EmbedLiveSample for all MathML examples #20506

Merged
merged 1 commit into from
Sep 27, 2022
Merged

Use EmbedLiveSample for all MathML examples #20506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 33 additions & 24 deletions files/en-us/web/mathml/element/maction/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
9 changes: 9 additions & 0 deletions files/en-us/web/mathml/element/math/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}}
Expand Down
4 changes: 3 additions & 1 deletion files/en-us/web/mathml/element/menclose/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}}
Expand Down
22 changes: 13 additions & 9 deletions files/en-us/web/mathml/element/mfenced/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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)
Expand Down
8 changes: 7 additions & 1 deletion files/en-us/web/mathml/element/mi/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
12 changes: 11 additions & 1 deletion files/en-us/web/mathml/element/mn/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
7 changes: 5 additions & 2 deletions files/en-us/web/mathml/element/mo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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}}
Expand Down
13 changes: 9 additions & 4 deletions files/en-us/web/mathml/element/mover/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}}
Expand Down
Binary file removed files/en-us/web/mathml/element/mover/mover.png
View file
Open in desktop
Binary file not shown.
7 changes: 5 additions & 2 deletions files/en-us/web/mathml/element/mpadded/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
8 changes: 3 additions & 5 deletions files/en-us/web/mathml/element/mphantom/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}}
Expand Down
Binary file removed files/en-us/web/mathml/element/mphantom/mphantom.png
View file
Open in desktop
Binary file not shown.
13 changes: 9 additions & 4 deletions files/en-us/web/mathml/element/mroot/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
Binary file removed files/en-us/web/mathml/element/mroot/mroot.png
View file
Open in desktop
Binary file not shown.
38 changes: 24 additions & 14 deletions files/en-us/web/mathml/element/mrow/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
Loading