<math>

  • Revision slug: Web/MathML/Element/math
  • Revision title: math
  • Revision id: 384753
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Chrome removed supportMoved From MathML/Element/math to Web/MathML/Element/math

Revision Content

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 {{ MathMLElement("mstyle") }} element.

class, id, style
Provided for use with stylesheets.
dir
 Overall directionality of formulas. Possible values are either ltr (left to right) or rtl (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_inline() }}
Deprecated in favor of the display attribute.
Possible values are: display (which has the same effect as display="block") and inline.
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

Theorem of Pythagoras

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.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
XHTML notation {{ CompatNo() }} (24 only) {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} 9.5 5.1
HTML5 notation {{ CompatNo() }} (24 only) {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} {{ CompatNo() }} 5.1
dir {{ CompatNo() }} {{ CompatGeckoDesktop("12.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
href {{ CompatNo() }} {{webkitbug(85733)}} {{ CompatGeckoDesktop("7.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{webkitbug(85733)}}
mathbackground {{ CompatNo() }} (24 only) {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} {{ CompatNo() }} 5.1
mathcolor {{ CompatNo() }} (24 only) {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} {{ CompatNo() }} 5.1
overflow {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
XHTML notation {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
HTML5 notation {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("2.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
dir {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("12.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
href {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("7.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
mathbackground {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("2.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
mathcolor {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("2.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
overflow {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Gecko-specific notes

Gecko 7.0 {{ geckoRelease("7.0") }} introduced support for accepting all MathML attributes on the top-level math element (i.e. the same behavior as a {{ MathMLElement("mstyle") }} element). However, the displaystyle attribute was not taken into account and has been added in Gecko 8.0 {{ geckoRelease("8.0") }}.

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 Gecko.

Specifications

Specification Status Comment
{{ SpecName('MathML3', 'chapter2.html#interf.toplevel', 'The Top-Level math Element') }} {{ Spec2('MathML3') }} Current specification
{{ SpecName('MathML2', 'chapter7.html#interf.toplevel', 'The Top-Level math Element') }} {{ Spec2('MathML2') }} Initial specification

See also

  • HTML top-level element: {{ HTMLElement("html") }}
  • SVG top-level element: {{ SVGElement("svg") }}
  • MathML browser test: For XHTML and HTML5

Revision Source

<p>The top-level element in MathML is <code>&lt;math&gt;</code>. Every valid MathML instance must be wrapped in <code>&lt;math&gt;</code> tags. In addition you must not nest a second <code>&lt;math&gt;</code> element in another, but you can have an arbitrary number of other child elements in it.</p>
<h2 id="Attributes">Attributes</h2>
<p>In addition to the following attributes, the <code>&lt;math&gt;</code> element accepts any attributes of the {{ MathMLElement("mstyle") }} element.</p>
<dl>
  <dt id="attr-class-id-style">
    class, id, style</dt>
  <dd>
    Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd>
  <dt id="attr-dir">
    dir</dt>
  <dd>
    <span style="display: none;">&nbsp;</span>Overall directionality of formulas. Possible values are either <code>ltr</code> (left to right) or <code>rtl</code> (right to left).</dd>
  <dt id="attr-href">
    href</dt>
  <dd>
    Used to set a hyperlink to a specified URI.</dd>
  <dt id="attr-mathbackground">
    mathbackground</dt>
  <dd>
    The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd>
  <dt id="attr-mathcolor">
    mathcolor</dt>
  <dd>
    The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd>
  <dt id="attr-display">
    display</dt>
  <dd>
    This enumerated attribute specifies how the enclosed MathML markup should be rendered. It can have one of the following values:
    <ul>
      <li><code>block</code>, 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;</li>
      <li><code>inline</code>, 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.</li>
    </ul>
    <p>If not present, its default value is <code>inline</code>.</p>
  </dd>
  <dt id="attr-mode">
    mode {{ deprecated_inline() }}</dt>
  <dd>
    Deprecated in favor of the <a href="/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br />
    Possible values are: <code>display</code> (which has the same effect as <code>display="block"</code>) and <code>inline</code>.</dd>
  <dt id="attr-overflow">
    overflow</dt>
  <dd>
    Specifies how an expression behaves if it is too long to fit in the allowed width.<br />
    Possible values are: <code>linebreak</code> (default), <code>scroll</code>, <code>elide</code>, <code>truncate</code>, <code>scale</code>.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p><img alt="Theorem of Pythagoras" src="/files/3157/math.jpg" /></p>
<h3 id="HTML5_notation">HTML5 notation</h3>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&nbsp;&nbsp;&lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;MathML in HTML5&lt;/title&gt;
&nbsp;&nbsp;&lt;/head&gt;
&nbsp;&nbsp;&lt;body&gt;

  &lt;math&gt;
    &lt;mrow&gt;
      &lt;mrow&gt;
        &lt;msup&gt;
          &lt;mi&gt;a&lt;/mi&gt;
          &lt;mn&gt;2&lt;/mn&gt;
        &lt;/msup&gt;
        &lt;mo&gt;+&lt;/mo&gt;
        &lt;msup&gt;
          &lt;mi&gt;b&lt;/mi&gt;
          &lt;mn&gt;2&lt;/mn&gt;
        &lt;/msup&gt;
      &lt;/mrow&gt;
      &lt;mo&gt;=&lt;/mo&gt;
      &lt;msup&gt;
        &lt;mi&gt;c&lt;/mi&gt;
        &lt;mn&gt;2&lt;/mn&gt;
      &lt;/msup&gt;
    &lt;/mrow&gt;
  &lt;/math&gt;

&nbsp; &lt;/body&gt;
&lt;/html&gt; 
</pre>
<h3 id="XHTML_notation">XHTML notation</h3>
<pre class="brush: xml">
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
 &lt;title&gt;MathML in XHTML&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

  &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
    &lt;mrow&gt;
      &lt;mrow&gt;
        &lt;msup&gt;
          &lt;mi&gt;a&lt;/mi&gt;
          &lt;mn&gt;2&lt;/mn&gt;
        &lt;/msup&gt;
        &lt;mo&gt;+&lt;/mo&gt;
        &lt;msup&gt;
          &lt;mi&gt;b&lt;/mi&gt;
          &lt;mn&gt;2&lt;/mn&gt;
        &lt;/msup&gt;
      &lt;/mrow&gt;
      &lt;mo&gt;=&lt;/mo&gt;
      &lt;msup&gt;
        &lt;mi&gt;c&lt;/mi&gt;
        &lt;mn&gt;2&lt;/mn&gt;
      &lt;/msup&gt;
    &lt;/mrow&gt;
  &lt;/math&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
<p><strong>Notes</strong>: XHTML documents with MathML must be served as <code>application/xhtml+xml</code>. You can achieve that easily by adding the <code>.xhtml</code> extension to your local files. For Apache servers you can <a class="external" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype" title="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">configure your <code>.htaccess</code> file</a> 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.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>XHTML notation</td>
        <td>{{ CompatNo() }} (24 only)</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>9.5</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td>HTML5 notation</td>
        <td>{{ CompatNo() }} (24 only)</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td><code>dir</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("12.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>href</code></td>
        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
        <td>{{ CompatGeckoDesktop("7.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
      </tr>
      <tr>
        <td><code>mathbackground</code></td>
        <td>{{ CompatNo() }} (24 only)</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td><code>mathcolor</code></td>
        <td>{{ CompatNo() }} (24 only)</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td><code>overflow</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>XHTML notation</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>HTML5 notation</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>dir</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("12.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>href</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("7.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>mathbackground</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>mathcolor</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>overflow</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
<p>Gecko 7.0 {{ geckoRelease("7.0") }} introduced support for accepting all MathML attributes on the top-level math element (i.e. the same behavior as a {{ MathMLElement("mstyle") }} element). However, the <code>displaystyle</code> attribute was not taken into account and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=669719" title="https://bugzilla.mozilla.org/show_bug.cgi?id=669719">has been added</a> in Gecko 8.0 {{ geckoRelease("8.0") }}.</p>
<p>A textual fall-back (<code>alttext</code>) or referring to an alternative image using the attributes <code>altimg</code>, <code>altimg-width</code>, <code>altimg-height</code> or <code>altimg-valign</code> is currently not implemented in Gecko.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table" height="49" width="1000">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('MathML3', 'chapter2.html#interf.toplevel', 'The Top-Level math Element') }}</td>
      <td>{{ Spec2('MathML3') }}</td>
      <td>Current specification</td>
    </tr>
    <tr>
      <td>{{ SpecName('MathML2', 'chapter7.html#interf.toplevel', 'The Top-Level math Element') }}</td>
      <td>{{ Spec2('MathML2') }}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<h2 id="See_also">See also</h2>
<ul>
  <li>HTML top-level element: {{ HTMLElement("html") }}</li>
  <li>SVG top-level element: {{ SVGElement("svg") }}</li>
  <li>MathML browser test: For <a class="link-https" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> and <a class="link-https" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></li>
</ul>
Revert to this revision