Authoring MathML - MathML

Authoring MathML
================

This page explains how to write mathematics using the MathML language, which is described with tags and attributes in text format. Just like for HTML or SVG, this text can become very verbose for complex content and so requires proper authoring tools such as converters from a lightweight markup language or WYSIWYG equation editors. Many such tools are available and it is impossible to provide an exhaustive list. Instead, this article focuses on common approaches and examples.

Using MathML
------------

Even if your MathML formulas will likely be generated by authoring tools, it is important to be aware of a few tips to properly integrate them in your document.

### MathML in HTML pages

Each MathML equation is represented by a root `math` element, which can be embedded directly in HTML pages. By default, the formula will be rendered inline, with extra adjustments to minimize its height. Use a `display="block"` attribute to render complex formulas normally, and in their own paragraph.

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <math>
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>

    <p>
      One over square root of two (display style):
      <math display="block">
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>
  </body>
</html>
```

**Note:** To use MathML in XML documents (e.g. XHTML, EPUB or OpenDocument) place an explicit `xmlns="http://www.w3.org/1998/Math/MathML"` attribute on each `<math>` element.

**Note:** Some email or instant messaging clients are able to send and receive messages in the HTML format. It is thus possible to embed mathematical formulas inside such messages, as long as MathML tags are not filtered out by markup sanitizers.

#### Fallback for browsers without MathML support

It is recommended to provide a fallback mechanism for browsers without MathML support. If your document contains only basic mathematical formulas then a small mathml.css stylesheet might be enough. To load it conditionally, just insert one line in your document header:

```html
<script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>
```

If you need more complex constructions, you might instead consider using the heavier MathJax library as a MathML polyfill:

```html
<script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>
```

Alternatively, you can also just display a warning at the top of the page for browsers without good MathML support and let the users choose between one of the fallback above:

```html
<script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>
```

**Note:** These small scripts perform feature detection (of the mspace or mpadded elements) which is preferred over browser sniffing. Also, they are distributed under an open source license, so feel free to copy them on your own server and adapt them to your need.

#### Mathematical fonts

As explained on the MathML Fonts article, mathematical fonts are instrumental to render MathML content. It's thus always a good idea to share the installation instructions for such fonts or to provide them as Web fonts.

The MathFonts page provides such Web fonts together with proper style sheets. For example, just insert the following line in your document header in order to select the Latin Modern fonts with fallback Web fonts:

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

Several fonts are proposed and you can just select a different style, for example STIX:

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

**Note:** The fonts and stylesheets from that MathFonts page are distributed under open source licenses, so feel free to copy them on your own server and adapt them to your need.

Conversion from a simple syntax
-------------------------------

In this section, we review some tools to convert MathML from a lightweight markup language such as the popular LaTeX language.

### Client-side conversion

With this approach, formulas are written directly in Web pages and a JavaScript library takes care of performing their conversion to MathML. This is probably the easiest option, but it also has some issues: extra JavaScript code must be loaded and executed, authors must escape reserved characters, Web crawlers won't have access to the MathML output...

A custom element can be used to host the source code and ensure the corresponding MathML output is inserted and rendered via a shadow subtree. For example, using TeXZilla's `<la-tex>` element, the MathML example above can just be rewritten more concisely as follows:

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
    <script src="https://fred-wang.github.io/TeXZilla/TeXZilla-min.js"></script>
    <script src="https://fred-wang.github.io/TeXZilla/examples/customElement.js"></script>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <la-tex>\frac{1}{\sqrt{2}}</la-tex>
    </p>

    <p>
      One over square root of two (display style):
      <la-tex display="block">\frac{1}{\sqrt{2}}</la-tex>
    </p>
  </body>
</html>
```

For authors not familiar with LaTeX, alternative input methods are available such as the ASCIIMath or jqMath syntax. Be sure to load the JavaScript libraries and use the proper delimiters:

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>ASCII MathML</title>
    …
    <!-- ASCIIMathML.js -->
    <script src="/path/to/ASCIIMathML.js"></script>
    …
    <!-- jqMath -->
    <script src="https://mathscribe.com/mathscribe/jquery-1.4.3.min.js"></script>
    <script src="https://mathscribe.com/mathscribe/jqmath-etc-0.4.6.min.js"></script>
    …
  </head>
  <body>
    …
    <p>One over square root of two (inline style, ASCIIMath): `1/(sqrt 2)`</p>
    …
    <p>One over square root of two (inline style, jqMath): $1/√2$</p>
    …
    <p>One over square root of two (display style, jqMath): $$1/√2$$</p>
    …
  </body>
</html>
```

### Command-line programs

Instead of generating MathML expression at page load, you can instead rely on command line tools. This will result in pages with static MathML content that will load faster. Let's consider again a page `input.html` with content from client-side conversion:

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>
    <p>One over square root of two (inline style): $\frac{1}{\sqrt{2}}$</p>
    <p>One over square root of two (display style): $$\frac{1}{\sqrt{2}}$$</p>
  </body>
</html>
```

That page does contain any `script` tag. Instead, conversion is executed via the following command line using Node.js and TeXZilla:

```bash
cat input.html | node TeXZilla.js streamfilter > output.html
```

After running that command, a file `output.html` containing the following HTML output is created. The formulas delimited by dollars have been converted into MathML:

```html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>

    <p>
      One over square root of two (display style):
      <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>
  </body>
</html>
```

There are more sophisticated tools that aim at converting an arbitrary LaTeX document into a document with MathML content. For example, using LaTeXML the following commands will convert `foo.tex` into an HTML or EPUB document:

```bash
latexmlc --dest foo.html foo.tex # Generate a HTML document foo.html
latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub
```

`latexmlc` accepts a `--javascript` parameter that you can use to include one of the fallback scripts mentioned above:

```bash
latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathml.css/mspace.js foo.tex  # Add the CSS fallback
latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback
```

**Note:** Command-line tools can be used server-side e.g. MediaWiki performs LaTeX-to-MathML conversion via Mathoid.

Graphical interfaces
--------------------

In this section, we review a few editing tools providing graphical interfaces.

### Input box

A simple approach is to integrate converters from a simple syntax as simple input boxes for mathematics. For example, Thunderbird and SeaMonkey provide an **Insert > Math** command that will open a popup window, with a LaTeX-to-MathML input field and a live MathML preview:

![LaTeX input box in Thunderbird](/en-US/docs/Web/MathML/Authoring/thunderbird.png)

**Note:** You can also use the **Insert > HTML** command to paste any MathML content.

LibreOffice's equation editor (File → New → Formula) shows a possible enhancement: its input box for the *StartMath* syntax provides extra equation panels to insert pre-defined mathematical constructions.

![StarMath input box in Libre Office](/en-US/docs/Web/MathML/Authoring/libreoffice.png)

**Note:** To obtain libreoffice's MathML code, save the document as `mml` and open it with your favorite text editor.

### WYSIYWG editors

Other editors provide math editing features that are directly integrated into their WYSIYWG interface. The following screenshots are taken from LyX and TeXmacs, both of them supporting HTML export:

![Lyx example](/en-US/docs/Web/MathML/Authoring/lyx.png)

![TeXmacs example](/en-US/docs/Web/MathML/Authoring/texmacs.png)

**Note:** By default Lyx and TeXmacs will use images of formulas in their HTML output. To choose MathML instead, follow these instructions for the former and select `User preference > Convert > Export mathematical formulas as MathML` for the latter.

### Optical character and handwriting recognitions

A final option to enter mathematics is to rely on user interface for Optical character recognition or Handwriting recognition. Some of these tools support mathematical formulas and can export them as MathML. The following screenshot shows a demo from MyScript:

![MyScript](/en-US/docs/Web/MathML/Authoring/myscript.png)


Proving the Pythagorean theorem - MathML

Proving the Pythagorean theorem
===============================

We will now prove the Pythagorean theorem:

**Statement**: In a right triangle, the square of the hypotenuse is equal to
 the sum of the squares of the other two sides.

i.e., If a and b are the legs and c is the hypotenuse then

a
2

+

b
2

=

c
2

.

**Proof:** We can prove the theorem algebraically by showing that on
 this figure
 the area of the big square equals the area of the inner square (hypotenuse
 squared) plus the area of the four triangles:

(
a
+
b
)

2

=

c
2

+
4
⋅
(

1
2

a
b
)

a
2

+
2
a
b
+

b
2

=

c
2

+
2
a
b

a
2

+

b
2

=

c
2


Deriving the Quadratic Formula - MathML

Deriving the Quadratic Formula
==============================

This page outlines the derivation of the Quadratic Formula.

We take a quadratic equation in its general form, and solve for x:

a

x
2

+
b

x

+
c

=

0

a

x
2

+
b

x

=

−
c

x
2

+

b
a

x

=

−
c

a

Divide out leading coefficient.

x
2

+

b

a

x
+

(

b

2
a

)

2

=

−
c
(
4
a
)

a
(
4
a
)

+

b
2

4

a
2

Complete the square.

(
x
+

b

2
a

)
(
x
+

b

2
a

)

=

b
2

−
4
a
c

4

a
2

Discriminant revealed.

(
x
+

b

2
a

)

2

=

b
2

−
4
a
c

4

a
2

x
+

b

2
a

=

b
2

−
4
a
c

4

a
2

x

=

−
b

2
a

±

{
C
}

b
2

−
4
a
c

4

a
2

There's the vertex formula.

x

=

−
b
±

{
C
}

b
2

−
4
a
c

2
a


<mfenced> - MathML

<mfenced>
=========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`<mfenced>`** MathML element provides the possibility to add custom opening and closing brackets (such as parenthese) and separators (such as commas or semicolons) to an expression.

**Note:** Historically, the `<mfenced>` element was defined as a shorthand for writing fenced expressions and equivalent to an expanded form involving `<mrow>` and `<mo>` elements. Nowadays, it is recommended to use that equivalent form instead.

Attributes
----------

This element's attributes include the global MathML attributes.

`close`

A string for the closing delimiter. The default value is `")`" and any white space is trimmed.

`open`

A string for the opening delimiter. The default value is `"("` and any white space is trimmed.

`separators`

A sequence of zero or more characters to be used for different separators, optionally divided by white space, which is ignored. The default value is ",". By specifying more than one character, it is possible to set different separators for each argument in the expression. If there are too many separators, all excess is ignored. If there are too few separators in the expression, the last specified separator is repeated.

Examples
--------

### The last separator is repeated (`,`)

```html
<math display="block">
  <mfenced open="{" close="}" separators=";;,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```

Sample rendering:
 ![{a;b;c,d,e}](/en-US/docs/Web/MathML/Element/mfenced/mfenced01.png)

Rendering in your browser:

### All excess is ignored (`,`)

```html
<math display="block">
  <mfenced open="[" close="]" separators="||||,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```

Sample rendering:
 ![[a|b|c|d|e]](/en-US/docs/Web/MathML/Element/mfenced/mfenced02.png)

Rendering in your browser:

Specifications
--------------

The `<mfenced>` element is not defined in any browser-oriented specification but you can find a description in MathML 4.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<munder> - MathML

<munder>
========

The **`<munder>`** MathML element is used to attach an accent or a limit under an expression. It uses the following syntax: `<munder> base underscript </munder>`

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attribute:

`accentunder`

A `<boolean>` indicating whether the under script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

Examples
--------

```html
<math display="block">
  <munder accentunder="true">
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mi>y</mi>
      <mo>+</mo>
      <mi>z</mi>
    </mrow>
    <mo>⏟<!--BOTTOM CURLY BRACKET--></mo>
  </munder>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mover>` (Overscript)
* `<munderover>` (Underscript-overscript pair)


<mpadded> - MathML

<mpadded>
=========

The **`<mpadded>`** MathML element is used to add extra padding and to set the general adjustment of position and size of enclosed contents.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`depth`

A `<length-percentage>` indicating the desired depth (below the baseline) of the `<mpadded>` element.

`height`

A `<length-percentage>` indicating the desired height (above the baseline) of the `<mpadded>` element.

`lspace`

A `<length-percentage>` indicating the horizontal location of the positioning point of the child content with respect to the positioning point of the `<mpadded>` element.

`voffset`

A `<length-percentage>` indicating the vertical location of the positioning point of the child content with respect to the positioning point of the `<mpadded>` element.

`width`

A `<length-percentage>` indicating the desired horizontal length of the `<mpadded>` element.

### Legacy syntax

For the `depth`, `height`, `lspace`, `voffset` and `width` attributes, some browsers may instead accept a more complex syntax:

1. An optional `+` or `-` sign as a prefix, specifying an increment or decrement to the corresponding dimension (if absent, the corresponding dimension is set directly to specified value).
2. Followed by an `<unsigned-number>` (let's call it α below).
3. Optionally followed by a value (if absent, the specified value is interpreted as "100 times α percent").
    * A unit. The specified value is interpreted the same as legacy MathML lengths.
    * A namedspace constant. The specified value is interpreted as α times the constant.
    * A pseudo-unit `width`, `height` or `depth`. The specified value is interpreted as α times the corresponding dimension of the content.
    * A percent sign followed by a pseudo-unit `width`, `height` or `depth`. The specified value is interpreted as α% the corresponding dimension of the content.
Examples
--------

### Dimensions and offsets

```html
<math display="block">
  <mpadded width="400px" height="5em" depth="4em"
 lspace="300px" voffset="-2em"
 style="background: lightblue">
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </mpadded>
</math>
```

### Legacy syntax

```html
<math display="block">
  <!-- increment by a length -->
  <mpadded width="+20px" style="background: lightblue">
    <mtext>+20px</mtext>
  </mpadded>

  <!-- set to a pseudo-unit -->
  <mpadded width="2width" style="background: lightgreen">
    <mtext>2width</mtext>
  </mpadded>

  <!-- increment by a percent of a pseudo-unit -->
  <mpadded width="+400%height" style="background: lightyellow">
    <mtext>+400%height</mtext>
  </mpadded>

  <!-- decrement to a multiple of a namedspace -->
  <mpadded width="-1thickmathspace" style="background: pink">
    <mtext>-.5thickmathspace</mtext>
  </mpadded>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # adjust-space-around-content-mpadded |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mphantom>`
* `<mspace>`


<mover> - MathML

<mover>
=======

The **`<mover>`** MathML element is used to attach an accent or a limit over an expression. Use the following syntax: `<mover> base overscript </mover>`

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attribute:

`accent`

A `<boolean>` indicating whether the over script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

Examples
--------

```html
<math display="block">
  <mover accent="true">
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mi>y</mi>
      <mo>+</mo>
      <mi>z</mi>
    </mrow>
    <mo>⏞<!--TOP CURLY BRACKET--></mo>
  </mover>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<munder>` (Underscript)
* `<munderover>` (Underscript-overscript pair)


<mspace> - MathML

<mspace>
========

The **`<mspace>`** MathML element is used to display a blank space, whose size is set by its attributes.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`depth`

A `<length-percentage>` indicating the desired depth (below the baseline) of the space.

`height`

A `<length-percentage>` indicating the desired height (above the baseline) of the space.

`width`

A `<length-percentage>` indicating the desired width of the space.

**Note:** For the `depth`, `height`, `width` attributes, some browsers may also accept legacy MathML lengths.

Examples
--------

```html
<math display="block">
  <mn>1</mn>
  <mspace depth="40px" height="20px" width="100px"
 style="background: lightblue;"/>
  <mn>2</mn>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # space-mspace |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mpadded>`
* `<mphantom>`


<ms> - MathML

<ms>
====

The **`<ms>`** MathML element represents a **string** literal meant to be interpreted by programming languages and computer algebra systems.

Attributes
----------

This element's attributes include the global MathML attributes.

Some browsers may also support the following deprecated attributes and will render the content of the `<ms>` element surrounded by the specified opening and closing quotes:

`lquote`

The opening quote to enclose the content. The default value is `"`.

`rquote`

The closing quote to enclose the content. The default value is `"`.

Examples
--------

### Default rendering

```html
<math display="block">
  <ms>Hello World!</ms>
</math>
```

### Legacy quote attributes

```html
<math display="block">
  <ms lquote="„" rquote="'">abc</ms>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # string-literal-ms |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<munderover> - MathML

<munderover>
============

The **`<munderover>`** MathML element is used to attach accents or limits both under and over an expression.

It uses the following syntax: `<munderover> base underscript overscript </munderover>`

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`accent`

A `<boolean>` indicating whether the over script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

`accentunder`

A `<boolean>` indicating whether the under script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

Examples
--------

```html
<math display="block">
  <munderover>
    <mo>∑</mo>
    <mrow>
      <mi>n</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mo>+</mo>
      <mn>∞</mn>
    </mrow>
  </munderover>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<munder>` (Underscript)
* `<mover>` (Overscript)


<maction> - MathML

<maction>
=========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`<maction>`** MathML element allows to bind actions to mathematical expressions. By default, only the first child is rendered but some browsers may take into account `actiontype` and `selection` attributes to implement custom behaviors.

**Note:** Historically, this element provided a mechanism to make MathML formulas interactive. Nowadays, it is recommended to rely on JavaScript and other Web technologies to implement this use case.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`actiontype`
Deprecated

Non-standard

 The action which specifies what happens for this element. Special behavior
 for the following values were implemented by some browsers:

* `statusline`: If there is a click on the *expression* or the reader moves the pointer over it, the *message* is sent to the browser's status line. The syntax is: `<maction actiontype="statusline"> expression message </maction>`.
* `toggle`: When there is a click on the subexpression, the rendering alternates the display of selected subexpressions. Therefore each click increments the `selection` value.
 The syntax is: `<maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionN </maction>`.

`selection`
Deprecated

Non-standard

The child element currently visible, only taken into account for `actiontype="toggle"` or non-standard `actiontype` values. The default value is `1`, which is the first child element.

Examples
--------

The following example uses the "toggle" `actiontype`:

```html
<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>
        <mn>4</mn>
      </mfrac>
    </maction>
  </math>
</p>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-maction |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<msqrt> - MathML

<msqrt>
=======

The **`<msqrt>`** MathML element is used to display square roots (no index is displayed). The square root accepts only one argument, which leads to the following syntax: `<msqrt> base </msqrt>`.

Attributes
----------

This element accepts the global MathML attributes.

Examples
--------

```html
<math display="block">
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # radicals-msqrt-mroot |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mroot>` (Radical with an index)


<mn> - MathML

<mn>
====

The **`<mn>`** MathML element represents a **numeric** literal which is normally a sequence of digits with a possible separator (a dot or a comma). However, it is also allowed to have arbitrary text in it which is actually a numeric quantity, for example "eleven".

Attributes
----------

This element accepts the global MathML attributes.

Examples
--------

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

Specifications
--------------

| Specification |
| --- |
| MathML Core # number-mn |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mtd> - MathML

<mtd>
=====

The **`<mtd>`** MathML element represents a cell in a table or a matrix. It may only appear in a `<mtr>` element. This element is similar to the `<td>` element of HTML.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`columnspan`

A non-negative integer value that indicates on how many columns does the cell extend.

`rowspan`

A non-negative integer value that indicates on how many rows does the cell extend.

Some browsers may also support the following attributes:

`columnalign`
Non-standard

 Specifies the horizontal alignment of this cell and overrides values specified by `<mtable>` or `<mtr>`.
 Possible values are: `left`, `center` and `right`.

`rowalign`
Non-standard

 Specifies the vertical alignment of this cell and overrides values specified by `<mtable>` or `<mtr>`.
 Possible values are: `axis`, `baseline`, `bottom`, `center` and `top`.

Specifications
--------------

| Specification |
| --- |
| MathML Core # entry-in-table-or-matrix-mtd |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mtable>`
* `<mtr>`


<mphantom> - MathML

<mphantom>
==========

The **`<mphantom>`** MathML element is rendered invisibly, but dimensions (such as height, width, and baseline position) are still kept.

Attributes
----------

This element accepts the global MathML attributes.

Examples
--------

```html
<math display="block">
  <mrow>
    <mi>x</mi>
    <mo>+</mo>
    <mphantom>
      <mi>y</mi>
      <mo>+</mo>
    </mphantom>
    <mi>z</mi>
  </mrow>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # making-sub-expressions-invisible-mphantom |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mspace>`
* `<mpadded>`


<msup> - MathML

<msup>
======

The **`<msup>`** MathML element is used to attach a superscript to an expression.

It uses the following syntax: `<msup> base superscript </msup>`.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following deprecated attribute:

`superscriptshift`
Deprecated

Non-standard

A `<length-percentage>` indicating the minimum amount to shift the baseline of the superscript up.

**Note:** For the `superscriptshift` attribute, some browsers may also accept legacy MathML lengths.

Examples
--------

```html
<math display="block">
  <msup>
    <mi>X</mi>
    <mn>2</mn>
  </msup>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<msub>` (Subscript)
* `<msubsup>` (Subscript-superscript pair)
* `<mmultiscripts>` (Prescripts and tensor indices)


<mstyle> - MathML

<mstyle>
========

The **`<mstyle>`** MathML element is used to change the style of its children.

**Note:** Historically, this element accepted almost all the MathML attributes and it was used to override the default attribute values of its descendants. It was later restricted to only a few relevant styling attributes that were used in existing web pages. Nowadays, these styling attributes are common to all MathML elements and so `<mstyle>` is really just equivalent to an `<mrow>` element. However, `<mstyle>` may still be relevant for compatibility with MathML implementations outside browsers.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following deprecated attributes:

`background`
Deprecated

Non-standard

Use `background-color` instead.

`color`
Deprecated

Non-standard

Use `color` instead.

`fontsize`
Deprecated

Non-standard

Use `font-size` instead.

`fontstyle`
Deprecated

Non-standard

Use `font-style` instead.

`fontweight`
Deprecated

Non-standard

Use `font-weight` instead.

`scriptminsize`
Deprecated

Non-standard

Specifies a minimum font size allowed due to changes in `scriptlevel`. The default value is `8pt`.

`scriptsizemultiplier`
Deprecated

Non-standard

Specifies the multiplier to be used to adjust font size due to changes in `scriptlevel`. The default value is `0.71`.

Examples
--------

### Attributes mapped to CSS

The following example uses global attributes `displaystyle` and `mathcolor` to respectively override the `math-style` and `color` of the `<munder>` and `<munderover>` children:

```html
<math display="block">
  <mstyle displaystyle="false" mathcolor="teal">
    <munder>
      <mo>∑</mo>
      <mi>I</mi>
    </munder>
    <munderover>
      <mo>∏</mo>
      <mrow>
        <mi>i</mi>
        <mo>=</mo>
        <mn>1</mn>
      </mrow>
      <mi>N</mi>
    </munderover>
  </mstyle>
</math>
```

### Legacy script attributes

The following example shows a formula with `font-size` set to `128pt`. It contains numbers that are placed in nested superscripts as well as an `<mstyle>` element with legacy attributes `scriptsizemultiplier` and `scriptminsize`. The `font-size` is multiplied by `0.5` when entering each superscript as long as that does not make it smaller than `16pt`.

```html
<math display="block" style="font-size: 128pt">
  <mstyle scriptsizemultiplier="0.5" scriptminsize="16pt">
    <msup>
      <mn>2</mn>
      <msup>
        <mn>2</mn>
        <msup>
          <mn>2</mn>
          <msup>
            <mn>2</mn>
            <msup>
              <mn>2</mn>
              <msup>
                <mn>2</mn>
                <mn>2</mn>
              </msup>
            </msup>
          </msup>
        </msup>
      </msup>
    </msup>
  </mstyle>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # style-change-mstyle |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<merror> - MathML

<merror>
========

The **`<merror>`** MathML element is used to display contents as error messages. The intent of this element is to provide a standard way for programs that generate MathML from other input to report syntax errors.

Attributes
----------

This element accepts the global MathML attributes.

Examples
--------

In the following example, `<merror>` is used to indicate a parsing error for some LaTeX-like input:

```html
<math display="block">
  <mfrac>
    <merror>
      <mtext>Syntax error: \frac{1}</mtext>
    </merror>
    <mn>3</mn>
  </mfrac>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # error-message-merror |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<semantics> - MathML

<semantics>
===========

The **`<semantics>`** MathML element associates annotations with a MathML expression, for example its text source as a lightweight markup language or mathematical meaning expressed in a special XML dialect. Typically, its structure is:

* a first child which is a MathML expression to be annotated.
* subsequent `<annotation>` or `<annotation-xml>` elements, the latter being reserved for XML formats such as OpenMath.

By default, only the first child of the `<semantics>` element is rendered while the others have their display set to `none`.

**Note:** Legacy MathML specifications allowed renderers to decide the default rendering according to available annotations. The following rules for determining the visible child have been implemented in some browsers. See MathML 4 for the distinction between Presentation and Content MathML.

* If no other rules apply: By default only the first child is rendered, which is supposed to be Presentation MathML.
* If the first child is a Presentation MathML element other than `<annotation>` or `<annotation-xml>`, render the first child.
* If no Presentation MathML is found, render the first `<annotation>` or `<annotation-xml>` child element of `<semantics>` without a `src` attribute. For `<annotation-xml>` elements the `encoding` attribute must be equal to one of following values:
    + `"application/mathml-presentation+xml"`
    + `"MathML-Presentation"`
    + `"SVG1.1"`
    + `"text/html"`
    + `"image/svg+xml"`
    + `"application/xml`".

Note that `"application/mathml+xml"` is *not* mentioned here as it does not distinguish between Content or Presentation MathML.

Attributes
----------

`<semantics>`, `<annotation>` and `<annotation-xml>` elements accept the global MathML attributes. Additionally, the following attributes can be set on the `<annotation>` and `<annotation-xml>` elements:

`encoding`

The encoding of the semantic information in the annotation (e.g. `"MathML-Content"`, `"MathML-Presentation"`, `"application/openmath+xml"`, `"image/png"`)

`src`
Deprecated

The location of an external source for semantic information.

Example
-------

```html
<math display="block">
  <semantics>
    <!-- The first child is the MathML expression rendered by default. -->
    <mrow>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>

    <!-- Annotate with "Content MathML", a dedicated XML dialect to
 express the meaning of mathematical formulas. -->
    <annotation-xml encoding="MathML-Content">
      <apply>
        <plus />
        <apply>
          <power />
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>

    <!-- Annotate with a PNG image of the formula. -->
    <annotation encoding="image/png" src="some/path/formula.png" />

    <!-- Annotate with LaTeX, a lightweight markup language to write
 mathematical formulas. -->
    <annotation encoding="application/x-tex"> x^{2} + y </annotation>
  </semantics>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # semantics-and-presentation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mrow> - MathML

<mrow>
======

The **`<mrow>`** MathML element is used to group sub-expressions, which usually contain one or more operators with their respective operands (such as `<mi>` and `<mn>`). This element renders as a horizontal row containing its arguments.

When writing a MathML expression, you should group elements within an `<mrow>` in the same way as they are grouped in the mathematical interpretation of the expression. Proper grouping helps the rendering of the expression in several ways:

* It can improve the display by possibly affecting spacing and preventing line breaks.
* It simplifies the interpretation of the expression by automated systems such as computer algebra systems and audio renderers.
Attributes
----------

This element accepts the global MathML attributes.

Examples
--------

```html
<math display="block">
  <mfrac>
    <mrow>
      <!-- numerator content grouped in one mrow -->
      <mn>1</mn>
      <mo>+</mo>
      <mi>K</mi>
    </mrow>
    <mrow>
      <!-- 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>
  </mfrac>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # horizontally-group-sub-expressions-mrow |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Grouping HTML elements: `<div>`


<mo> - MathML

<mo>
====

The **`<mo>`** MathML element represents an **operator** in a broad sense. Besides operators in strict mathematical meaning, this element also includes "operators" like parentheses, separators like comma and semicolon, or "absolute value" bars.

Attributes
----------

In addition to the global MathML attributes, this element accepts the following attributes whose default values depend on the operator's form and content:

`accent`
Non-standard

A `<boolean>` indicating whether the operator should be treated as an accent when used as an under- or overscript (i.e. drawn bigger and closer to the base expression).

`fence`

A `<boolean>` indicating whether the operator is a fence (such as parentheses). There is no visual effect for this attribute.

`largeop`

A `<boolean>` indicating whether the operator should be drawn bigger when `math-style` is set to `normal`.

`lspace`

A `<length-percentage>` indicating the amount of space before the operator.

`maxsize`

A `<length-percentage>` indicating the maximum size of the operator when it is stretchy.

`minsize`

A `<length-percentage>` indicating the minimum size of the operator when it is stretchy.

`movablelimits`

A `<boolean>` indicating whether attached under- and overscripts move to sub- and superscript positions when `math-style` is set to `compact`.

`rspace`

A `<length-percentage>` indicating the amount of space after the operator.

`separator`

A `<boolean>` indicating whether the operator is a separator (such as commas). There is no visual effect for this attribute.

`stretchy`

A `<boolean>` indicating whether the operator stretches to the size of the adjacent element.

`symmetric`

A `<boolean>` indicating whether a stretchy operator should be vertically symmetric around the imaginary math axis (centered fraction line).

**Note:** For the `lspace`, `maxsize`, `minsize` and `rspace` attributes, some browsers may also accept legacy MathML lengths.

Examples
--------

```html
<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 -->
      <mn>1</mn>
    </mrow>
    <mo>)</mo> <!-- default form value: postfix -->
  </mrow>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # operator-fence-separator-or-accent-mo |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<msubsup> - MathML

<msubsup>
=========

The **`<msubsup>`** MathML element is used to attach both a subscript and a superscript, together, to an expression.

It uses the following syntax: `<msubsup> base subscript superscript </msubsup>`.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following deprecated attributes:

`subscriptshift`
Deprecated

Non-standard

A `<length-percentage>` indicating the minimum amount to shift the baseline of the subscript down.

`superscriptshift`
Deprecated

Non-standard

A `<length-percentage>` indicating the minimum amount to shift the baseline of the superscript up.

**Note:** For the `subscriptshift` and `superscriptshift` attributes, some browsers may also accept legacy MathML lengths.

Examples
--------

```html
<math display="block">
  <msubsup>
    <mo>∫<!--Integral --></mo>
    <mn>0</mn>
    <mn>1</mn>
  </msubsup>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<msub>` (Subscript)
* `<msup>` (Superscript)
* `<mmultiscripts>` (Prescripts and tensor indices)


<mtext> - MathML

<mtext>
=======

The **`<mtext>`** MathML element is used to render arbitrary text with *no* notational meaning, such as comments or annotations.

To display text *with* notational meaning, use `<mi>`, `<mn>`, `<mo>` or `<ms>` instead.

Attributes
----------

This element accepts the global MathML attributes.

Examples
--------

```html
<math display="block">
  <mtext>Theorem of Pythagoras</mtext>
</math>

<math display="block">
  <mtext>/* comment here */</mtext>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # text-mtext |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mfrac> - MathML

<mfrac>
=======

 The **`<mfrac>`** MathML element is used to display fractions. It can also be used
 to mark up fraction-like objects such as
 binomial coefficients
 and Legendre symbols.

Syntax
------

```html
<mfrac>numerator denominator</mfrac>
```

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`denomalign`
Deprecated

Non-standard

The alignment of the denominator under the fraction. Possible values are: `left`, `center` (default), and `right`.

`linethickness`

A `<length-percentage>` indicating the thickness of the horizontal fraction line.

`numalign`
Deprecated

Non-standard

The alignment of the numerator over the fraction. Possible values are: `left`, `center` (default), and `right`.

**Note:** For the `linethickness` attribute, some browsers may also accept the deprecated values `medium`, `thin` and `thick` (whose exact interpretation is left to implementers) or legacy MathML lengths.

Examples
--------

### Simple fraction

 The following MathML code should render as a fraction with numerator "a + 2" and
 denominator "3 − b":

```html
<math display="block">
  <mfrac>
    <mrow>
      <mi>a</mi>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
    <mrow>
      <mn>3</mn>
      <mo>−</mo>
      <mi>b</mi>
    </mrow>
  </mfrac>
</math>
```

### Fraction without bar

The following MathML code should render as a binomial coefficient:

```html
<math display="block">
  <mrow>
    <mo>(</mo>
    <mfrac linethickness="0">
      <mi>n</mi>
      <mi>k</mi>
    </mfrac>
    <mo>)</mo>
  </mrow>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # fractions-mfrac |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<math> - MathML

<math>
======

The **`<math>`** MathML element is the top-level MathML element, used to write a single mathematical formula. It can be placed in HTML content where flow content is permitted.

**Note:** See the Authoring MathML page for tips to properly integrate MathML formulas in your web pages and the Examples page for more demos.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attribute:

`display`

This enumerated attribute specifies how the enclosed MathML markup should be rendered. It can have one of the following values:

* `block`, which means that this element will be displayed in its own block outside the current span of text and with `math-style` set to `normal`.
* `inline`, which means that this element will be displayed inside the current span of text and with `math-style` set to `compact`.

If not present, its default value is `inline`.

Examples
--------

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
<p>
  The infinite sum
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  is equal to the real number
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac></math
 >.
</p>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # the-top-level-math-element |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTML top-level element: `<html>`
* SVG top-level element: `<svg>`


<mroot> - MathML

<mroot>
=======

The **`<mroot>`** MathML element is used to display roots with an explicit index. Two arguments are accepted, which leads to the syntax: `<mroot> base index </mroot>`.

Attributes
----------

This element accepts the global MathML attributes.

Examples
--------

```html
<math display="block">
  <mroot>
    <mi>x</mi>
    <mn>3</mn>
  </mroot>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # radicals-msqrt-mroot |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<msqrt>` (Square root without an index)


<mi> - MathML

<mi>
====

The **`<mi>`** MathML element indicates that the content should be rendered as an **identifier**, such as a function name, variable or symbolic constant.

 By default `<mi>` elements that contain multiple characters are a rendered as normal text, while single character characters are rendered as italic: the same formatting behaviour as the CSS `text-transform` property with a value of `math-auto`.
 The `mathvariant` attribute with a value of `normal` can be used to reset a single character to the normal font.

In order to use a particular form of a character such as bold/italic, serif, sans-serif, script/calligraphy, monospaced, double-struck, and so on, you should use the appropriate Mathematical Alphanumeric Symbols.

**Note:** In a previous specification (MathML3), the `mathvariant` attribute was used to define logical classes that could apply the character formatting for mathematical alphanumeric symbols.
 The associated values are now deprecated, and expected to be removed from browsers in future releases.

Attributes
----------

`mathvariant`

The only value allowed in the current specification is `normal` (case insensitive):

`normal`

Use default/normal rendering, removing automatic styling of single characters to italic.

Deprecated legacy values are:

`bold`
Deprecated

Try and use bold characters e.g. "𝐀".

`italic`
Deprecated

Try and use italic characters e.g. "𝐴".

`bold-italic`
Deprecated

Try and use bold-italic characters e.g. "𝑨".

`double-struck`
Deprecated

Try and use double-struck characters e.g. "𝔸".

`bold-fraktur`
Deprecated

Try and use bold-fraktur characters e.g. "𝕬".

`script`
Deprecated

Try and use script characters e.g. "𝒜".

`bold-script`
Deprecated

Try and use bold-script characters e.g. "𝓐".

`fraktur`
Deprecated

Try and use fraktur characters e.g. "𝔄".

`sans-serif`
Deprecated

Try and use sans-serif characters e.g. "𝖠".

`bold-sans-serif`
Deprecated

Try and use bold-sans-serif characters e.g. "𝗔".

`sans-serif-italic`
Deprecated

Try and use sans-serif-italic characters e.g. "𝘈".

`sans-serif-bold-italic`
Deprecated

Try and use sans-serif-bold-italic characters e.g. "𝘼".

`monospace`
Deprecated

Try and use monospace characters e.g. "𝙰".

`initial`
Deprecated

Try and use initial characters e.g. "𞸢".

`tailed`
Deprecated

Try and use tailed characters e.g. "𞹂".

`looped`
Deprecated

Try and use looped characters e.g. "𞺂".

`stretched`
Deprecated

Try and use stretched characters e.g. "𞹢".

This element also accepts the global MathML attributes.

Examples
--------

```html
<math display="block">
  <!-- Multiple characters render as "normal" text -->
  <mi>sin</mi>
</math>
<hr />
<math display="block">
  <!-- Single characters render as italic by default (i.e. "A" renders as "𝐴") -->
  <mi>A</mi>
</math>
<hr />
<math display="block">
  <!-- Use mathvariant="normal" to make single character render as normal text -->
  <mi mathvariant="normal">F</mi>
</math>
<hr />
<math display="block">
  <!-- To use a specific variant, such as "B" in Fraktur -->
  <mi>𝔅</mi>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-mi |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mtr> - MathML

<mtr>
=====

The **`<mtr>`** MathML element represents a row in a table or a matrix. It may only appear in a `<mtable>` element and its children are `<mtd>` elements representing cells. This element is similar to the `<tr>` element of HTML.

Attributes
----------

This element's attributes include the global MathML attributes. Some browsers may also support the following attributes:

`columnalign`
Non-standard

Overrides the horizontal alignment of cells specified by `<mtable>` for this row. Multiple values separated by space are allowed and apply to the corresponding columns (e.g. `columnalign="left center right"`). Possible values are: `left`, `center` and `right`.

`rowalign`
Non-standard

Overrides the vertical alignment of cells specified by `<mtable>` for this row. Possible values are: `axis`, `baseline`, `bottom`, `center` and `top`.

Specifications
--------------

| Specification |
| --- |
| MathML Core # row-in-table-or-matrix-mtr |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mtable>`
* `<mtd>`


<mmultiscripts> - MathML

<mmultiscripts>
===============

The **`<mmultiscripts>`** MathML element is used to attach an arbitrary number of subscripts and superscripts to an expression at once, generalizing the `<msubsup>` element. Scripts can be either prescripts (placed before the expression) or postscripts (placed after it).

MathML uses the syntax below, that is a base expression, followed by an arbitrary number of postsubscript-postsuperscript pairs (attached in the given order) optionally followed by an `<mprescripts>` and an arbitrary number of presubscript-presuperscript pairs (attached in the given order). In addition, empty `<mrow>` elements can be used to represent absent scripts.

```html
<mmultiscripts>
  base
  postsubscript1 postsuperscript1
  postsubscript2 postsuperscript2
  postsubscript3 postsuperscript3
  ...
  postsubscriptN postsuperscriptN
  <mprescripts/>                ⎫
  presubscript1 presuperscript1 ⎪
  presubscript2 presuperscript2 ⎬ Optional
  presubscript3 presuperscript3 ⎪
  ...                           ⎪
  presubscriptM presuperscriptM ⎭
</mmultiscripts>
```

Attributes
----------

This element's attributes include the global MathML attributes as well as the following deprecated attributes:

`subscriptshift`
Deprecated

Non-standard

A `<length-percentage>` indicating the minimum amount to shift the baseline of the subscript down.

`superscriptshift`
Deprecated

Non-standard

A `<length-percentage>` indicating the minimum amount to shift the baseline of the superscript up.

**Note:** For the `subscriptshift` and `superscriptshift` attributes, some browsers may also accept legacy MathML lengths.

Examples
--------

### Using `<mprescripts/>`

Children after the `<mprescripts/>` element are placed as pre-scripts (before the base expression):

```html
<math display="block">
  <mmultiscripts>
    <mi>X</mi>      <!-- base expression -->
    <mi>d</mi>      <!-- postsubscript -->
    <mi>c</mi>      <!-- postsuperscript -->
    <mprescripts />
    <mi>b</mi>      <!-- presubscript -->
    <mi>a</mi>      <!-- presuperscript -->
  </mmultiscripts>
</math>
```

### Empty scripts

Empty `<mrow>` elements can be used to represent absent scripts:

```html
<math display="block">
  <mmultiscripts>
    <mi>X</mi>      <!-- base expression -->
    <mrow></mrow>   <!-- postsubscript -->
    <mi>c</mi>      <!-- postsuperscript -->
    <mprescripts />
    <mi>b</mi>      <!-- presubscript -->
    <mrow></mrow>   <!-- presuperscript -->
  </mmultiscripts>
</math>
```

### Order of scripts

Here is a more complex example with many scripts, so you can see in which order they are attached to the base:

```html
<math display="block">
  <mmultiscripts>
    <mtext>base</mtext>
    <mtext>postsubscript1</mtext>
    <mtext>postsupscript1</mtext>
    <mtext>postsubscript2</mtext>
    <mtext>postsupscript2</mtext>
    <mtext>postsubscript3</mtext>
    <mtext>postsupscript3</mtext>
    <mtext>postsubscript4</mtext>
    <mtext>postsupscript4</mtext>
    <mprescripts />
    <mtext>presubscript1</mtext>
    <mtext>presupscript1</mtext>
    <mtext>presubscript2</mtext>
    <mtext>presupscript2</mtext>
    <mtext>presubscript3</mtext>
    <mtext>presupscript3</mtext>
  </mmultiscripts>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # prescripts-and-tensor-indices-mmultiscripts |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<msub>` (Subscript)
* `<msup>` (Superscript)
* `<msubsup>` (Subscript-superscript pair)


<mtable> - MathML

<mtable>
========

The **`<mtable>`** MathML element allows you to create tables or matrices. Its children are `<mtr>` elements (representing rows), each of them having `<mtd>` elements as its children (representing cells). These elements are similar to `<table>`, `<tr>` and `<td>` elements of HTML.

Attributes
----------

This element's attributes include the global MathML attributes. Some browsers may also support the following attributes:

`align`
Non-standard

 Specifies the **vertical** alignment of the table with respect to its environment.
 Possible values are:

* `axis` (default): The vertical center of the table aligns on the environment's axis (typically the minus sign).
* `baseline`: The vertical center of the table aligns on the environment's baseline.
* `bottom`: The bottom of the table aligns on the environments baseline.
* `center`: See baseline.
* `top`: The top of the table aligns on the environments baseline.

In addition, values of the `align` attribute can end with a *rownumber* (e.g. `align="center 3"`). This allows you to align the specified row of the table rather than the whole table. A negative Integer value counts rows from the bottom of the table.

`columnalign`
Non-standard

Specifies the horizontal alignment of the cells. Multiple values separated by space are allowed and apply to the corresponding columns (e.g. `columnalign="left right center"`). Possible values are: `left`, `center` (default) and `right`.

`columnlines`
Non-standard

Specifies column borders. Multiple values separated by space are allowed and apply to the corresponding columns (e.g. `columnlines="none none solid"`). Possible values are: `none` (default), `solid` and `dashed`.

`columnspacing`
Non-standard

Specifies the space between table columns. Multiple values separated by space are allowed and apply to the corresponding columns (e.g. `columnspacing="1em 2em"`). Possible values are `<length-percentage>`.

`frame`
Non-standard

Specifies borders of the entire table. Possible values are: `none` (default), `solid` and `dashed`.

`framespacing`
Non-standard

Specifies additional space added between the table and frame. The first value specifies the spacing on the right and left; the second value specifies the spacing above and below. Possible values are `<length-percentage>`.

`rowalign`
Non-standard

Specifies the vertical alignment of the cells. Multiple values separated by space are allowed and apply to the corresponding rows (e.g. `rowalign="top bottom axis"`). Possible values are: `axis`, `baseline` (default), `bottom`, `center` and `top`.

`rowlines`
Non-standard

Specifies row borders. Multiple values separated by space are allowed and apply to the corresponding rows (e.g. `rowlines="none none solid"`). Possible values are: `none` (default), `solid` and `dashed`.

`rowspacing`
Non-standard

Specifies the space between table rows. Multiple values separated by space are allowed and apply to the corresponding rows (e.g. `rowspacing="1em 2em"`). Possible values are `<length-percentage>`.

`width`
Non-standard

A `<length-percentage>` indicating the width of the entire table.

**Note:** For the `width` attribute, some browsers may also accept legacy MathML lengths.

Examples
--------

### Alignment with row number

```html
<math display="block">
  <mi>X</mi>
  <mo>=</mo>
  <mtable frame="solid" rowlines="solid" align="axis 3">
    <mtr>
      <mtd><mi>A</mi></mtd>
      <mtd><mi>B</mi></mtd>
    </mtr>
    <mtr>
      <mtd><mi>C</mi></mtd>
      <mtd><mi>D</mi></mtd>
    </mtr>
    <mtr>
      <mtd><mi>E</mi></mtd>
      <mtd><mi>F</mi></mtd>
    </mtr>
  </mtable>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # table-or-matrix-mtable |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mtd>` (Table cell)
* `<mtr>` (Table row)


<msub> - MathML

<msub>
======

The **`<msub>`** MathML element is used to attach a subscript to an expression.

It uses the following syntax: `<msub> base subscript </msub>`.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following deprecated attribute:

`subscriptshift`
Deprecated

Non-standard

A `<length-percentage>` indicating the minimum amount to shift the baseline of the subscript down.

**Note:** For the `subscriptshift` attribute, some browsers may also accept legacy MathML lengths.

Examples
--------

```html
<math display="block">
  <msub>
    <mi>X</mi>
    <mn>1</mn>
  </msub>
</math>
```

Specifications
--------------

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<msup>` (Superscript)
* `<msubsup>` (Subscript-superscript pair)
* `<mmultiscripts>` (Prescripts and tensor indices)


<menclose> - MathML

<menclose>
==========

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`<menclose>`** MathML element renders its content inside an enclosing notation specified by the `notation` attribute.

Attributes
----------

This element's attributes include the global MathML attributes.

`notation`
Non-standard

A list of notations, separated by white space, to apply to the child elements. The symbols are each drawn as if the others are not present, and therefore may overlap. Possible values are:

| Value | Sample Rendering | Rendering in your browser | Description |
| --- | --- | --- | --- |
| `longdiv` (default) | longdiv |

a
2

+

b
2

 | long division symbol |
| `actuarial` | actuarial |

a
2

+

b
2

 | actuarial symbol |
| `box` | box |

a
2

+

b
2

 | box |
| `roundedbox` | roundedbox |

a
2

+

b
2

 | rounded box |
| `circle` | circle |

a
2

+

b
2

 | circle |
| `left` | left |

a
2

+

b
2

 | line to the left of the contents |
| `right` | right |

a
2

+

b
2

 | line to the right of the contents |
| `top` | top |

a
2

+

b
2

 | line above of the contents |
| `bottom` | bottom |

a
2

+

b
2

 | line below of the contents |
| `updiagonalstrike` | updiagonalstrike |

a
2

+

b
2

 | strikeout line through contents from lower left to upper right |
| `downdiagonalstrike` | downdiagonalstrike |

a
2

+

b
2

 | strikeout line through contents from upper left to lower right |
| `verticalstrike` | verticalstrike |

a
2

+

b
2

 | vertical strikeout line through contents |
| `horizontalstrike` | horizontalstrike |

a
2

+

b
2

 | horizontal strikeout line through contents |
| `madruwb` | madruwb |

a
2

+

b
2

 | Arabic factorial symbol |
| `updiagonalarrow` | Arrow pointing up and to the right. |

a
2

+

b
2

 | diagonal arrow |
| `phasorangle` | Screenshot of the phasorangle notation |

a
2

+

b
2

 | phasor angle |

Examples
--------

```html
<math display="block">
  <menclose notation="circle box">
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </menclose>
</math>
```

Specifications
--------------

The `<menclose>` element is not defined in any browser-oriented specification but you can find a description in MathML 4.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


scriptlevel - MathML

scriptlevel
===========

The **`scriptlevel`** global attribute sets the math-depth of a MathML element. It allows overriding rules from the user agent stylesheet that define automatic calculation of font-size within MathML formulas.

Example
-------

```html
<!-- math-depth defaults to 0 on the <math> root. -->
<math style="font-size: 64pt">
  <msubsup>
    <!-- math-depth and font-size remain unchanged on the base. -->
    <mtext>BASE</mtext>
    <!-- math-depth defaults to add(1) within the subscript, so it
 is incremented by 1 and the font-size is scaled down once. -->
    <mtext>SUBSCRIPT</mtext>
    <!-- math-depth defaults to add(1) within the superscript too, but
 the scriptlevel attribute tells to increment it by 2 instead,
 so the font-size is actually scaled down twice. -->
    <mtext scriptlevel="+2">SUPERSCRIPT</mtext>
  </msubsup>
</math>
```

Syntax
------

```html
<math scriptlevel="-1"> <!-- decrease math-depth by 1 -->
<math scriptlevel="+2"> <!-- increase math-depth by 2 -->
<math scriptlevel="0"> <!-- reset math-depth to 0 -->
```

### Values

If `<U>` is an unsigned integer (i.e. with prefix sign symbol removed) then the accepted values are:

`<U>`

Sets the `math-depth` to value `<U>`. This will set `font-size` of the element to the same value as the one of elements at the specified depth.

`+<U>`

Sets the `math-depth` to value `add(<U>)`. This will scale down `font-size` on the element `<U>` times.

`-<U>`

Sets the `math-depth` to value `add(-<U>)`. This will scale up `font-size` on the element `<U>` times.

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-scriptlevel |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* The displaystyle global attribute.
* `font-size`
* `math-depth`
* `math-style`


displaystyle - MathML

displaystyle
============

The **`displaystyle`** global attribute is a boolean setting the math-style of a MathML element.

Example
-------

In this example, an munder element is used to attach a script "A" to a base "∑". By default, the summation symbol is rendered with the font-size inherited from its parent and the A as a scaled down subscript. With the explicit `displaystyle="true"` attribute, the summation symbol is instead drawn bigger and the "A" becomes an underscript.

```html
<math>
  <munder>
    <mo>∑</mo>
    <mi>A</mi>
  </munder>
  <munder displaystyle="true">
    <mo>∑</mo>
    <mi>A</mi>
  </munder>
</math>
```

Syntax
------

```html
<math displaystyle="true"></math>
<math displaystyle="false"></math>
```

### Values

`true`

Sets the display style to `normal`.

`false`

Sets the display style to `compact`.

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-displaystyle |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* The scriptlevel global attribute.
* `font-size`
* `math-depth`
* `math-style`


href - MathML

href
====

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`href`** global attribute creates a hyperlink on the MathML element pointing to the specified URL.

Example
-------

```html
<!-- Make this math equation a link to Wikipedia's article
 about the Pythagorean theorem. -->
<math href="https://en.wikipedia.org/wiki/Pythagorean\_theorem">
  <mi>c</mi>
  <mo>=</mo>
  <!-- Make this square root a link to corresponding
 SageMath's calculation. -->
  <msqrt href="https://sagecell.sagemath.org/?z=eJwrLiwq0TCOM9I2iTPSBAAeqgPO">
    <msup>
      <mn>3</mn>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <msup>
      <mn>4</mn>
      <mn>2</mn>
    </msup>
  </msqrt>
  <mo>=</mo>
  <mn>5</mn>
</math>
```

Specifications
--------------

The `href` attribute is not defined in any browser-oriented specification but you can find a description in MathML 4.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.


dir - MathML

dir
===

The **`dir`** global attribute is an enumerated attribute that indicates the directionality of the MathML element.

Syntax
------

```html
<!-- Moroccan style -->
<math dir="ltr">
  <msqrt>
    <mi>س</mi>
  </msqrt>
  <mo>=</mo>
  <msup>
    <mn>3</mn>
    <mi>ب</mi>
  </msup>
</math>

<!-- Maghreb/Machrek style -->
<math dir="rtl">
  <msqrt>
    <mi>س</mi>
  </msqrt>
  <mo>=</mo>
  <msup>
    <mn>٣</mn>
    <mi>ب</mi>
  </msup>
</math>
```

### Values

* `ltr`, which means *left to right* and is used to render mathematical expressions from the left to the right (e.g. English or Moroccan style);
* `rtl`, which means *right to left* and is used to render mathematical expressions from the right to the left (e.g. Maghreb or Machrek style);

**Note:**

* This attribute can be overridden by the CSS property `direction`, if a CSS page is active and the element supports these properties.
* As the directionality of mathematics is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the formulas will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
* The `dir` attribute is used to set the directionality of math formulas, which is often from right to left in Arabic-speaking world. However, languages written from right to left often embed mathematical content written from left to right. Consequently, the `auto` keyword from the HTML `dir` attribute is not recognized and by default the user agent stylesheet resets the direction property on the `math` element.

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-dir |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* `direction`
* The HTML `dir` global attribute


mathcolor - MathML

mathcolor
=========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`mathcolor`** global attribute sets the color of a MathML element.

**Note:** Use CSS for styling MathML whenever possible. The `mathcolor` attribute should only be included for applications that are not CSS-aware and will be overridden by the CSS `color` property, if set.

Syntax
------

```html
<!-- Keyword values -->
<math mathcolor="currentcolor">

<!-- <named-color> values -->
<math mathcolor="red">
<math mathcolor="orange">
<math mathcolor="tan">
<math mathcolor="rebeccapurple">

<!-- <hex-color> values -->
<math mathcolor="#090">
<math mathcolor="#009900">
<math mathcolor="#090a">
<math mathcolor="#009900aa">

<!-- <rgb()> values -->
<math mathcolor="rgb(34, 12, 64, 0.6)">
<math mathcolor="rgb(34 12 64 / 0.6)">
<math mathcolor="rgb(34.6 12 64 / 60%)">

<!-- <hsl()> values -->
<math mathcolor="hsl(30, 100%, 50%, 0.6)">
<math mathcolor="hsl(30 100% 50% / 0.6)">
<math mathcolor="hsl(30.2 100% 50% / 60%)">

<!-- <hwb()> values -->
<math mathcolor="hwb(90 10% 10%)">
<math mathcolor="hwb(90 10% 10% / 0.5)">
<math mathcolor="hwb(90deg 10% 10%)">
<math mathcolor="hwb(1.5708rad 60% 0%)">
<math mathcolor="hwb(.25turn 0% 40% / 50%)">
```

### Values

`<color>`

 Sets the color of the textual and decorative parts of the element,
 including e.g. fraction bars or radical symbols.

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-mathcolor |

* In MathML 3 and earlier versions, a more limited set of values was supported.
 Since MathML Core, the syntax matches CSS `<color>`
 values.
* This attribute was designed for MathML applications that are not CSS-aware.
 Since MathML Core, the use of equivalent CSS is recommended instead.
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* `color`


mathbackground - MathML

mathbackground
==============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`mathbackground`** global attribute sets the background-color of a MathML element.

**Note:** Use CSS for styling MathML whenever possible. The `mathbackground` attribute should only be included for applications that are not CSS-aware and will be overridden by the CSS `background-color` property value, if set.

Syntax
------

```html
<!-- Keyword values -->
<math mathbackground="red">
<math mathbackground="indigo">

<!-- Hexadecimal value -->
<math mathbackground="#bbff00"> <!-- Fully opaque -->
<math mathbackground="#bf0"> <!-- Fully opaque shorthand -->
<math mathbackground="#11ffee00"> <!-- Fully transparent -->
<math mathbackground="#1fe0"> <!-- Fully transparent shorthand -->
<math mathbackground="#11ffeeff"> <!-- Fully opaque -->
<math mathbackground="#1fef"> <!-- Fully opaque shorthand -->

<!-- RGB value -->
<math mathbackground="rgb(255 255 128)"> <!-- Fully opaque -->
<math mathbackground="rgb(117 190 218 / 50%)"> <!-- 50% transparent -->

<!-- HSL value -->
<math mathbackground="hsl(50 33% 25%)"> <!-- Fully opaque -->
<math mathbackground="hsl(50 33% 25% / 75%)"> <!-- 75% opaque, i.e. 25% transparent -->
```

### Values

`<color>`

The uniform color of the background.

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-mathbackground |

* In MathML 3 and earlier versions, a more limited set of values was supported.
 Since MathML Core, the syntax matches CSS `<color>`
 values.
* This attribute was designed for MathML applications that are not CSS-aware.
 Since MathML Core, the use of equivalent CSS is recommended instead.
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* `background-color`


mathsize - MathML

mathsize
========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`mathsize`** global attribute sets the font-size of a MathML element.

**Note:** Use CSS for styling MathML whenever possible. The `mathsize` attribute should only be included for applications that are not CSS-aware and will be overridden by the CSS `font-size` property, if set.

Syntax
------

```html
<!-- <length> values -->
<math mathsize="12px">
<math mathsize="0.8em">

<!-- <percentage> values -->
<math mathsize="80%">
```

### Values

`<length>`

A positive `<length>` value. For most font-relative units (such as `em` and `ex`), the font size is relative to the parent element's font size.

`<percentage>`

A positive `<percentage>` value, relative to the parent element's font size.

**Note:** Some browsers may also accept legacy MathML lengths.

Specifications
--------------

| Specification |
| --- |
| MathML Core # dfn-mathsize |

* In MathML 3 and earlier versions, keywords `small`, `normal`, and `big` as
 well as the MathML3-specific syntax for lengths was supported.
 Since MathML Core, the syntax matches CSS
 `<length-percentage>` values.
* This attribute was designed for MathML applications that are not CSS-aware.
 Since MathML Core, the use of equivalent CSS is recommended instead.
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* `font-size`


PI Parameters - XSLT: Extensible Stylesheet Language Transformations

PI Parameters
=============

### Overview

XSLT supports the concept of passing parameters to a stylesheet when executing it. This has been possible for a while when using the `XSLTProcessor` in JavaScript. However when using an `<?xml-stylesheet?>` processing instruction (PI) there used to be no way to provide parameters.

To solve this two new PIs are implemented in Firefox 2 (see Supported versions below for details), `<?xslt-param?>` and `<?xslt-param-namespace?>`. Both PIs can contain "pseudo attributes" the same way that the `xml-stylesheet` PI does.

The following document passes the two parameters "color" and "size" to the stylesheet "style.xsl".

```xml
<?xslt-param name="color" value="blue"?>
<?xslt-param name="size" select="2"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
```

Note that these PIs have no effect when transformation is done using the `XSLTProcessor` object in JavaScript.

### Processing instructions

The attributes in the `xslt-param` and `xslt-param-namespace` PIs are parsed using the rules defined in xml-stylesheet. Any unrecognized attributes must be ignored. Parsing of any attribute must not fail due to the presence of an unrecognized attribute as long as that attribute follows the syntax in `xml-stylesheet`.

Both the `xslt-param` and the `xslt-param-namespace` PIs must appear in the prolog of the document, i.e. before the first element tag. All PIs in the prolog must be honored, both ones occurring before and ones occurring after any `xml-stylesheet` PIs.

If there are multiple `xml-stylesheet` PIs the parameters apply to all stylesheets as a consequence of that all stylesheets are imported into a single stylesheet per the XSLT spec.reference? Note that multiple `xml-stylesheet` XSLT PIs are not supported in Firefox currently.

#### xslt-param

The `xslt-param` PI supports 4 attributes:

`name`

The local-name part of the parameter name. No syntax checking is done on the attribute, however if it is not a valid NCName it will never match any parameter in the stylesheet.

`namespace`

The namespace of the parameter name. No syntax checking is done on the attribute.

`value`

Contains the string value for the parameter. The value of the attribute is used as value for the parameter. The datatype will always be *string*.

`select`

An XPath expression for the parameter. The value of the attribute is parsed as an XPath expression. The result of evaluating the expression is used as value for the parameter.

If the `name` attribute is missing or empty the PI is ignored.

If the `namespace` attribute is missing or empty the null namespace is used.

It is not an error to specify a parameter name that does not exist in the stylesheet (or that is a variable in the stylesheet). The PI is ignored.

If both `value` and `select` are present or if neither `value` nor `select` are present the PI is ignored.

Note that `value="..."` is not strictly equal to `select="'...'"` since the value can contain both apostrophe and quote characters.

##### Examples

Set the parameter 'color' to the string 'red':

```xml
<?xslt-param name="color" value="red"?>
```

Set the parameter 'columns' to the number 2:

```xml
<?xslt-param name="columns" select="2"?>
```

Set the parameter 'books' to a nodeset containing all `<book>` elements in the null namespace:

```xml
<?xslt-param name="books" select="//book"?>
```

Set the parameter 'show-toc' to boolean `true`:

```xml
<?xslt-param name="show-toc" select="true()"?>
```

##### The select attribute context

The following context is used to parse and evaluate the expression in the **select** attribute.

* The context node is the node used as initial current node used when executing the stylesheet.
* The context position is the position of the context node in the initial current node list used when executing the stylesheet.
* The context size is the size of the initial current node list used when executing the stylesheet.
* No variables are available.
* The function library is the standard XPath function library.
* The namespace declarations are determined by the `xslt-param-namespace` PIs, see below.

If the **select** attribute fails to parse or execute, the PI is ignored (in particular, it does not fall back to the **value** attribute).

#### xslt-param-namespace

The `xslt-param-namespace` uses two attributes:

prefix

The prefix that is mapped.

namespace

The namespace the prefix maps to.

An `xslt-param-namespace` PI affects the expression in the **select** attribute for all `xslt-param`s following the PI. This applies even if there are other nodes such as comments or other PIs between the `xslt-param-namespace` and `xslt-param` PIs.

It is not an error for multiple PIs to use the same prefix, every new PI just changes what namespace the prefix maps to.

If **prefix** is missing, empty, or equals an invalid NCName, the PI is ignored.

If **namespace** is missing, the PI is ignored. If **namespace** is empty, the prefix mapping is removed.

##### Examples

Set the parameter 'books' to a nodeset containing all `<book>` elements in the 'http://www.example.org/myNamespace' namespace:

```xml
<?xslt-param-namespace prefix="my" namespace="http://www.example.org/myNamespace"?>
<?xslt-param name="books" select="//my:book"?>
```

### Supported versions

Supported as of Firefox 2.0.0.1. The **value** attribute is supported in Firefox 2, but the **select** attribute crashes for some expressions in the 2.0 release.

### Possible future developments

Should we allow any XSLT functions in the expression? `document()` seems useful, but it seems tricky to maintain the invariant that `generate-id()` should produce the same string for the same document.

What about querying URL parameters in the XSLT stylesheet? E.g. Passing them to specified <xsl:param>'s.


Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations

Common XSLT Errors
==================

### MIME types

Your server needs to send both the source and the stylesheet with a XML mime type, `text/xml` or `application/xml`. To find out the current type, load the file in Mozilla and look at the page info. Or use a download tool, those usually tell the mime type.

In Firefox 6 and forward, you can also use the official XSLT mimetype: `application/xslt+xml`.

### Namespace

The XSLT 1.0 namespace is `http://www.w3.org/1999/XSL/Transform`. Older versions of IE used a different namespace. However these versions also used a draft version of XSLT which is incompatible with what eventually became the XSLT 1.0 specification. Firefox only supports the official XSLT 1.0 version.

### Missing features

There are some features in the XSLT 1.0 specification which Firefox unfortunately does not yet support. Specifically:

* The `namespace::` axis in XPath expressions. Support for this will hopefully be available in the future.
* The `disable-output-escaping` attribute. This feature controls how serializing the constructed output document works. However Firefox never serializes the output document and so the attribute isn't really applicable. While we could try to add some heuristics to serialize and reparse just the part of the output document which has `disable-output-escaping` applied, heuristics often get things wrong and lead to surprising results, hence we've been reluctant to add this so far. Often times stylesheets contain code like `<xsl:text disable-output-escaping="yes"> </xsl:text>`, this is equivalent to putting ` ` in the stylesheet which will work great in all XSLT engines. We do realize that the lack of `disable-output-escaping` is a problem and we'd like to find a solution for it, however so far we haven't found any good solutions.
* The `<xsl:namespace-alias>` element.

If you'd like to help out with any of the above features, help would be greatly appreciated.


Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations

Transforming XML with XSLT
==========================

An Overview
-----------

An Overview

The separation of content and presentation is a key design feature of XML. The structure of an XML document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented. This intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous machines linked by a network.

Yet eventually much of the content stored in XML documents will need to be presented to human readers. Because a browser provides a familiar and highly flexible interface, it is an ideal mechanism for delivering such presentation versions of XML content. Built from the ground up utilizing a wide variety of XML technologies, Firefox incorporates within itself all of the mechanisms needed to process both original XML documents and the specialized stylesheets used to style and lay them out for HTML display, reducing server load with client-side processing.

At present, Gecko (the layout engine behind Firefox) supports two forms of XML stylesheets. For basic control of appearance — fonts, colors, position, and so forth — Gecko uses CSS.

Our focus here is on the second type of stylesheet that Gecko supports: the XSLT stylesheet. XSLT stands for eXtensible Stylesheet Language/Transform and the name is apt. XSLT allows a stylesheet author to transform a primary XML document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format (and in the case of Firefox, the focus is on converting it on the fly into HTML which can then be displayed by the browser).

XSLT/XPath reference
--------------------

### Elements

Elements

* xsl:apply-imports *(supported)*
* xsl:apply-templates *(supported)*
* xsl:attribute *(supported)*
* xsl:attribute-set *(supported)*
* xsl:call-template *(supported)*
* xsl:choose *(supported)*
* xsl:comment *(supported)*
* xsl:copy *(supported)*
* xsl:copy-of *(supported)*
* xsl:decimal-format *(supported)*
* xsl:element *(supported)*
* xsl:fallback *(not supported)*
* xsl:for-each *(supported)*
* xsl:if *(supported)*
* xsl:import *(mostly supported)*
* xsl:include *(supported)*
* xsl:key *(supported)*
* xsl:message *(supported)*
* xsl:namespace-alias *(not supported)*
* xsl:number *(partially supported)*
* xsl:otherwise *(supported)*
* xsl:output *(partially supported)*
* xsl:param *(supported)*
* xsl:preserve-space *(supported)*
* xsl:processing-instruction
* xsl:sort *(supported)*
* xsl:strip-space *(supported)*
* xsl:stylesheet *(partially supported)*
* xsl:template *(supported)*
* xsl:text *(partially supported)*
* xsl:transform *(supported)*
* xsl:value-of *(partially supported)*
* xsl:variable *(supported)*
* xsl:when *(supported)*
* xsl:with-param *(supported)*
### Axes

Axes

* ancestor
* ancestor-or-self
* attribute
* child
* descendant
* descendant-or-self
* following
* following-sibling
* namespace *(not supported)*
* parent
* preceding
* preceding-sibling
* self
### Functions

Functions

* boolean() *(supported)*
* ceiling() *(supported)*
* concat() *(supported)*
* contains() *(supported)*
* count() *(supported)*
* current() *(supported)*
* document() *(supported)*
* element-available() *(supported)*
* false() *(supported)*
* floor() *(supported)*
* format-number() *(supported)*
* function-available() *(supported)*
* generate-id() *(supported)*
* id() *(partially supported)*
* key() *(supported)*
* lang() *(supported)*
* last() *(supported)*
* local-name() *(supported)*
* name() *(supported)*
* namespace-uri() *(supported)*
* normalize-space() *(supported)*
* not() *(supported)*
* number() *(supported)*
* position() *(supported)*
* round() *(supported)*
* starts-with() *(supported)*
* string() *(supported)*
* string-length() *(supported)*
* substring() *(supported)*
* substring-after() *(supported)*
* substring-before() *(supported)*
* sum() *(supported)*
* system-property() *(supported)*
* translate() *(supported)*
* true() *(supported)*
* unparsed-entity-url() *(not supported)*
For Further Reading
-------------------

For Further Reading

* Books
* Digital
    + Websites
    + Articles
    + Tutorials/Examples
    + Other
Original Document Information
-----------------------------

* Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
* Note: This reprinted article was originally part of the DevEdge site.


XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations

XSLT elements reference
=======================

There are two types of elements discussed here: top-level elements and instructions. A top-level element must appear as the child of either `<xsl:stylesheet>` or `<xsl:transform>`. An instruction, on the other hand, is associated with a template. A stylesheet may include several templates. A third type of element, not discussed here, is the literal result element (LRE). An LRE also appears in a template. It consists of any non-instruction element that should be copied as-is to the result document, for example, an `<hr>` element in an HTML conversion stylesheet.

On a related note, any attribute in an LRE and some attributes of a limited number of XSLT elements can also include what is known as an attribute value template. An attribute value template is a string that includes an embedded XPath expression which is used to specify the value of an attribute. At run-time the expression is evaluated and the result of the evaluation is substituted for the XPath expression. For example, assume that a variable "`image-dir`" is defined as follows:

```xml
<xsl:variable name="image-dir">/images</xsl:variable>
```

The expression to be evaluated is placed inside curly braces:

```xml
<img src="{$image-dir}/mygraphic.jpg"/>
```

This would result in the following:

```xml
<img src="/images/mygraphic.jpg"/>
```

The element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a description of type and position, its source in the W3C Recommendation and an explanation of the degree of present Gecko support.

* `<xsl:apply-imports>`
* `<xsl:apply-templates>`
* `<xsl:attribute>`
* `<xsl:attribute-set>`
* `<xsl:call-template>`
* `<xsl:choose>`
* `<xsl:comment>`
* `<xsl:copy>`
* `<xsl:copy-of>`
* `<xsl:decimal-format>`
* `<xsl:element>`
* `<xsl:fallback>` *(not supported)*
* `<xsl:for-each>`
* `<xsl:if>`
* `<xsl:import>` *(mostly supported)*
* `<xsl:include>`
* `<xsl:key>`
* `<xsl:message>`
* `<xsl:namespace-alias>` *(not supported)*
* `<xsl:number>` *(partially supported)*
* `<xsl:otherwise>`
* `<xsl:output>` *(partially supported)*
* `<xsl:param>`
* `<xsl:preserve-space>`
* `<xsl:processing-instruction>`
* `<xsl:sort>`
* `<xsl:strip-space>`
* `<xsl:stylesheet>` *(partially supported)*
* `<xsl:template>`
* `<xsl:text>` *(partially supported)*
* `<xsl:transform>`
* `<xsl:value-of>` *(partially supported)*
* `<xsl:variable>`
* `<xsl:when>`
* `<xsl:with-param>`


The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations

The Netscape XSLT/XPath Reference
=================================

The following is an alphabetized and annotated list of the elements, axes, and functions from the W3C's 1.0 Recommendation for XSLT, as well as from the appropriate sections of the XPath Recommendation. Development of the XSLT processor is ongoing, and this document will be updated as functionality is expanded.

### Elements

* xsl:apply-imports *(supported)*
* xsl:apply-templates *(supported)*
* xsl:attribute *(supported)*
* xsl:attribute-set *(supported)*
* xsl:call-template *(supported)*
* xsl:choose *(supported)*
* xsl:comment *(supported)*
* xsl:copy *(supported)*
* xsl:copy-of *(supported)*
* xsl:decimal-format *(supported)*
* xsl:element *(supported)*
* xsl:fallback *(not supported)*
* xsl:for-each *(supported)*
* xsl:if *(supported)*
* xsl:import *(mostly supported)*
* xsl:include *(supported)*
* xsl:key *(supported)*
* xsl:message *(supported)*
* xsl:namespace-alias *(not supported)*
* xsl:number *(partially supported)*
* xsl:otherwise *(supported)*
* xsl:output *(partially supported)*
* xsl:param *(supported)*
* xsl:preserve-space *(supported)*
* xsl:processing-instruction
* xsl:sort *(supported)*
* xsl:strip-space *(supported)*
* xsl:stylesheet *(partially supported)*
* xsl:template *(supported)*
* xsl:text *(partially supported)*
* xsl:transform *(supported)*
* xsl:value-of *(partially supported)*
* xsl:variable *(supported)*
* xsl:when *(supported)*
* xsl:with-param *(supported)*
### Axes

* ancestor
* ancestor-or-self
* attribute
* child
* descendant
* descendant-or-self
* following
* following-sibling
* namespace *(not supported)*
* parent
* preceding
* preceding-sibling
* self
### Functions

* boolean() *(supported)*
* ceiling() *(supported)*
* concat() *(supported)*
* contains() *(supported)*
* count() *(supported)*
* current() *(supported)*
* document() *(supported)*
* element-available() *(supported)*
* false() *(supported)*
* floor() *(supported)*
* format-number() *(supported)*
* function-available() *(supported)*
* generate-id() *(supported)*
* id() *(partially supported)*
* key() *(supported)*
* lang() *(supported)*
* last() *(supported)*
* local-name() *(supported)*
* name() *(supported)*
* namespace-uri() *(supported)*
* normalize-space() *(supported)*
* not() *(supported)*
* number() *(supported)*
* position() *(supported)*
* round() *(supported)*
* starts-with() *(supported)*
* string() *(supported)*
* string-length() *(supported)*
* substring() *(supported)*
* substring-after() *(supported)*
* substring-before() *(supported)*
* sum() *(supported)*
* system-property() *(supported)*
* translate() *(supported)*
* true() *(supported)*
* unparsed-entity-url() *(not supported)*


For further reading - XSLT: Extensible Stylesheet Language Transformations

For further reading
===================

« Transforming XML with XSLT

Print
-----

### Books

* **XSLT: Programmer's Reference, Second Edition**
    + **Author**: Michael H. Kay
    + **Length**: 992 pages
    + **Publisher**: Wrox; 2 edition (May 3, 2001)
    + **ISBN**: 0764543814
        - Michael Kay is a member of the W3C XSL Working Group and the developer of his own open-source XSLT processor, Saxon. He is also the author of the only book on this subject to have reached a second edition. This is a very big book, well laid out, and exhaustive, if sometimes exhausting, in detail, covering every possible base in the XSLT story.

https://www.amazon.com/XSLT-Programmers-Reference-Programmer/dp/0764543814

* **XSLT**
    + **Author**: Doug Tidwell
    + **Length**: 473 pages
    + **Publisher**: O'Reilly Media; 1 edition (August 15, 2001)
    + **ISBN**: 0596000537
        - Doug Tidwell is a senior developer at IBM and a prominent evangelist for XML technologies generally. He is the author of several articles and tutorials on various aspects of XML at IBM's extensive XML developer site. This book is somewhat less comprehensive than Michael Kay's, but it covers the basics well, and offers some intriguing examples.

https://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537

* **Learning XML, Second Edition**
    + **Author**: Erik T. Ray
    + **Length**: 432 pages
    + **Publisher**: O'Reilly Media; 2 edition (September 22, 2003)
    + **ISBN**: 0596004206
        - As the title indicates, this is an overview of XML generally. Chapter 6 is devoted specifically to XSLT.

https://www.amazon.com/gp/product/0596004206

Digital
-------

### Websites

* **World Wide Web Consortium**
    + **The W3C homepage**: https://www.w3.org
    + **The main XSL page**: https://www.w3.org/Style/XSL/
    + **XSLT specifications overview**: https://www.w3.org/TR/xslt/
    + **Archive of public style (CSS and XSLT) discussions**: https://lists.w3.org/Archives/Public/www-style/
    + **XPath specifications overview**: https://www.w3.org/TR/xpath/
        - The World Wide Web Consortium is the body that publishes Recommendations for a number of web-based technologies, many of which become the de-facto standard.
### Articles

* Hands-on XSL by Don R. Day
* What is XSLT? by G. Ken Holman
### Tutorials/Examples

* Jeni's XSLT Pages
* XMLPitstop.com
* XSL Tutorial
### Other

* Extensible Stylesheet Language (XSL)
* **XSL-List**
    + **Subscribe**: https://www.mulberrytech.com/xsl/xsl-list/index.html
    + **Archives**: https://www.biglist.com/lists/xsl-list/archives/