The top-level element in MathML is <math>
. Every valid MathML instance must be wrapped in <math>
tags. In addition you must not nest a second <math>
element in another, but you can have an arbitrary number of other child elements in it.
Attributes
In addition to the following attributes, the <math>
element accepts any attributes of the <mstyle>
element.
- class, id, style
- Provided for use with stylesheets.
- dir
- Overall directionality of formulas. Possible values are either
ltr
(left to right) orrtl
(right to left). - href
- Used to set a hyperlink to a specified URI.
- mathbackground
- The background color. You can use
#rgb
,#rrggbb
and HTML color names. - mathcolor
- The text color. You can use
#rgb
,#rrggbb
and HTML color names. - 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 outside the current span of text, as a block that can be positioned anywhere without changing the meaning of the text;inline
, which means that this element will be displayed inside the current span of text, and cannot be moved out of it without changing the meaning of that text.
If not present, its default value is
inline
. - mode
- Deprecated in favor of the display attribute.
Possible values are:display
(which has the same effect asdisplay="block"
) andinline
. - overflow
- Specifies how an expression behaves if it is too long to fit in the allowed width.
Possible values are:linebreak
(default),scroll
,elide
,truncate
,scale
.
Examples
HTML5 notation
<!DOCTYPE html> <html> <head> <title>MathML in HTML5</title> </head> <body> <math> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html>
XHTML notation
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>MathML in XHTML</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html>
Notes: XHTML documents with MathML must be served as application/xhtml+xml
. You can achieve that easily by adding the .xhtml
extension to your local files. For Apache servers you can configure your .htaccess
file to map extensions to the correct Mime type. Since you notate your MathML in an XML document, also be sure you write a well-formed XML document.
Specifications
Specification | Status | Comment |
---|---|---|
MathML 3.0 The definition of 'The Top-Level math Element' in that specification. |
Recommendation | Current specification |
MathML 2.0 The definition of 'The Top-Level math Element' in that specification. |
Recommendation | Initial specification |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
math | Chrome No support 24 — 25 | Edge No support No | Firefox
Full support
4
| IE No support No | Opera
No support
9.5 — 15
| Safari Full support 5.1 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android
No support
10.1 — 14
| Safari iOS Full support 5.1 | Samsung Internet Android No support No |
dir | Chrome No support No | Edge No support No | Firefox Full support 12 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 14 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
display | Chrome No support 24 — 25 | Edge No support No | Firefox Full support 1 | IE No support No | Opera No support No | Safari Full support 5.1 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android No support No | Safari iOS Full support 5.1 | Samsung Internet Android No support No |
href | Chrome No support No | Edge No support No | Firefox Full support 7 | IE No support No | Opera No support No | Safari
No support
No
| WebView Android No support No | Chrome Android No support No | Firefox Android Full support 7 | Opera Android No support No | Safari iOS
No support
No
| Samsung Internet Android No support No |
mathbackground | Chrome No support 24 — 25 | Edge No support No | Firefox Full support 4 | IE No support No | Opera No support No | Safari Full support 5.1 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android No support No | Safari iOS Full support 5.1 | Samsung Internet Android No support No |
mathcolor | Chrome No support 24 — 25 | Edge No support No | Firefox Full support 4 | IE No support No | Opera No support No | Safari Full support 5.1 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android No support No | Safari iOS Full support 5.1 | Samsung Internet Android No support No |
mode | Chrome No support 24 — 25 | Edge No support No | Firefox No support 1 — 70 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
overflow | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
Firefox-specific notes
Firefox 7 introduced support for accepting all MathML attributes on the top-level math element (i.e. the same behavior as a <mstyle>
element). However, the displaystyle
attribute was not taken into account and has been added in Firefox 8.
A textual fall-back (alttext
) or referring to an alternative image using the attributes altimg
, altimg-width
, altimg-height
or altimg-valign
is currently not implemented in Firefox.
See also
- HTML top-level element:
<html>
- SVG top-level element:
<svg>
- MathML browser test