<mi>

  • Revision slug: MathML/Element/mi
  • Revision title: mi
  • Revision id: 384555
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment Chrome removed support

Revision Content

The MathML <mi> element indicates that the content should be rendered as an identifier such as function names, variables or symbolic constants. You can also have arbitrary text in it to mark up terms.

Attributes

class, id, style
Provided for use with stylesheets.
dir
The text direction. 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.
mathsize
The size of the content. Possible values are:
  • small: Font is rendered smaller than the current font size.
  • normal: Equivalent to 100% or 1em.
  • big: Font is rendered larger than the current font size.
  • a custom length.
  • or a unitless value which multiplies the default.
mathvariant (partially implemented, see {{ bug("114365") }} & {{ bug("162405") }})
This logical class of the identifier, which varies in typography. That is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography. The following values are allowed:
  • normal (Default value for more than one character)
  • bold
  • italic (Default value for a single character)
  • bold-italic
  • double-struck {{ unimplemented_inline() }}
  • bold-fraktur {{ unimplemented_inline() }} (bold works)
  • script {{ unimplemented_inline() }}
  • bold-script {{ unimplemented_inline() }} (bold works)
  • fraktur {{ unimplemented_inline() }}
  • sans-serif
  • bold-sans-serif
  • sans-serif-italic
  • sans-serif-bold-italic
  • monospace
  • initial {{ unimplemented_inline() }}
  • tailed {{ unimplemented_inline() }}
  • looped {{ unimplemented_inline() }}
  • stretched {{ unimplemented_inline() }}

Examples

<math> 

  <mi> y </mi>  

  <mi> sin </mi>

  <mi mathvariant="monospace"> x </mi>

  <mi mathvariant="bold"> &pi; </mi>

</math>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} (24 only) {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} 9.5 5.1
dir attribute {{ CompatNo() }} {{ CompatGeckoDesktop("12.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
href attribute {{ CompatNo() }} {{webkitbug(85733)}} {{ CompatGeckoDesktop("7.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{webkitbug(85733)}}
mathsize attribute {{ CompatNo() }} (24 only) {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} 5.1
mathvariant attribute {{ CompatNo() }} (24 only) partially supported (see above) {{ CompatNo() }} partially supported (see above) [*] partially supported (see above) [*]
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
dir attribute {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("12.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
href attribute {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("7.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
mathsize attribute {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
mathvariant attribute {{ CompatNo() }} {{ CompatNo() }} partially supported (see above) {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

[*] The font style does not change to normal when the content is more than a single character.

Gecko-specific notes

  • Starting with Gecko 20.0 {{geckoRelease("20.0")}} a unitless value for mathsize is allowed.

Specifications

Specification Status Comment
{{ SpecName('MathML3', 'chapter3.html#presm.mi', 'mi') }} {{ Spec2('MathML3') }} Current specification
{{ SpecName('MathML2', 'chapter3.html#presm.mi', 'mi') }} {{ Spec2('MathML2') }} Initial specification

 

Revision Source

<p>The MathML <code>&lt;mi&gt;</code> element indicates that the content should be rendered as an <strong>identifier</strong> such as function names, variables or symbolic constants. You can also have arbitrary text in it to mark up terms.</p>
<h2 id="Attributes">Attributes</h2>
<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>
    The text direction. 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-mathsize">
    mathsize</dt>
  <dd>
    The size of the content. Possible values are:
    <ul>
      <li><code>small:</code> Font is rendered smaller than the current font size.</li>
      <li><code>normal:</code> Equivalent to 100% or 1em.</li>
      <li><code>big:</code> Font is rendered larger than the current font size.</li>
      <li>a custom <a href="/en-US/docs/CSS/length">length</a>.</li>
      <li>or a unitless value which multiplies the default.</li>
    </ul>
  </dd>
  <dt id="attr-mathvariant">
    mathvariant (partially implemented, see {{ bug("114365") }} &amp; {{ bug("162405") }})</dt>
  <dd>
    This logical class of the identifier, which varies in typography. That is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or might not involve displaying them with the named typography. The following values are allowed:
    <ul>
      <li><code>normal</code> (Default value for <em>more than one character</em>)</li>
      <li><code>bold</code></li>
      <li><code>italic</code> (Default value for <em>a single character</em>)</li>
      <li><code>bold-italic</code></li>
    </ul>
    <ul>
      <li><code>double-struck</code> {{ unimplemented_inline() }}</li>
      <li><code>bold-fraktur</code> {{ unimplemented_inline() }} (bold works)</li>
      <li><code>script</code> {{ unimplemented_inline() }}</li>
      <li><code>bold-script</code> {{ unimplemented_inline() }} (bold works)</li>
      <li><code>fraktur</code> {{ unimplemented_inline() }}</li>
    </ul>
    <ul>
      <li><code>sans-serif</code></li>
      <li><code>bold-sans-serif</code></li>
      <li><code>sans-serif-italic</code></li>
      <li><code>sans-serif-bold-italic</code></li>
      <li><code>monospace</code></li>
    </ul>
    <ul>
      <li><code>initial</code> {{ unimplemented_inline() }}</li>
      <li><code>tailed</code> {{ unimplemented_inline() }}</li>
      <li><code>looped</code> {{ unimplemented_inline() }}</li>
      <li><code>stretched</code> {{ unimplemented_inline() }}</li>
    </ul>
  </dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;math&gt; 

  &lt;mi&gt; y &lt;/mi&gt;&nbsp; 

  &lt;mi&gt; sin &lt;/mi&gt;

  &lt;mi mathvariant="monospace"&gt; x &lt;/mi&gt;

  &lt;mi mathvariant="bold"&gt; &amp;pi; &lt;/mi&gt;

&lt;/math&gt;
</pre>
<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>Basic support</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><code>dir</code> attribute</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("12.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>href</code> attribute</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>mathsize</code> attribute</td>
        <td>{{ CompatNo() }} (24 only)</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td><code>mathvariant</code> attribute</td>
        <td>{{ CompatNo() }} (24 only)</td>
        <td>partially supported (see above)</td>
        <td>{{ CompatNo() }}</td>
        <td>partially supported (see above) [*]</td>
        <td>partially supported (see above) [*]</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>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("1.9.2") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>dir</code> attribute</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> attribute</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>mathsize</code> attribute</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("1.9.2") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>mathvariant</code> attribute</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>partially supported (see above)</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] The font style does not change to <code>normal</code> when the content is more than a single character.</p>
<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
<ul>
  <li>Starting with Gecko 20.0 {{geckoRelease("20.0")}} a unitless value for <code>mathsize</code> is allowed.</li>
</ul>
<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', 'chapter3.html#presm.mi', 'mi') }}</td>
      <td>{{ Spec2('MathML3') }}</td>
      <td>Current specification</td>
    </tr>
    <tr>
      <td>{{ SpecName('MathML2', 'chapter3.html#presm.mi', 'mi') }}</td>
      <td>{{ Spec2('MathML2') }}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision