<mstyle>

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

Revision Content

The MathML <mstyle> element is used change the style of its children. It accepts all attributes of all MathML presentation elements with some exceptions and additional attributes listed below.

Attributes

dir
Overall directionality of formulas. Possible values are either ltr (left to right) or rtl (right to left).
decimalpoint
This attribute is specifying the character for the alignment point within {{ MathMLElement("mstack") }} and {{ MathMLElement("mtable") }} columns, if the decimalpoint value is used to specify the alignment.
displaystyle
A Boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. The main effect is that larger versions of operators are displayed, when displaystyle is set to true. See also largeop and movablelimits on {{ MathMLElement("mo") }}.
infixlinebreakstyle
Specifies the default linebreakstyle to use for infix operators. The values before, after and duplicate are allowed.
scriptlevel
Controls mostly the font-size. The higher the scriptlevel, the smaller the font size. This attribute accepts a non-negative integer, as well as a "+" or a "-" sign, which increments or decrements the current value. In addition, the scriptlevel attribute can never reduce the font size below scriptminsize in order to avoid unreadable small font sizes and depends on the multiplier specified in scriptsizemultiplier.
scriptminsize
Specifies a minimum font size allowed due to changes in scriptlevel. The default value is 8pt.
scriptsizemultiplier
Specifies the multiplier to be used to adjust font size due to changes in scriptlevel. The default value is 0.71.

The <mstyle> element accepts all attributes of all presentation attributes with the following exceptions:

  • height, depth or width do not apply to {{ MathMLELement("mglyph") }}, {{ MathMLELement("mpadded") }} or {{ MathMLELement("mtable") }}.
  • rowalign, columnalign, or groupalign do not apply to {{ MathMLELement("mtr") }}, {{ MathMLELement("mlabeledtr") }}, {{ MathMLELement("mtd") }} or {{ MathMLELement("maligngroup") }}.
  • lspace or voffset do not apply to {{ MathMLELement("mpadded") }}.
  • fontfamily does not apply to {{ MathMLELement("mglyph") }}.
  • align does not apply to {{ MathMLELement("mtable") }} or {{ MathMLELement("mstack") }}.
  • index cannot be set on <mstyle>.
  • src and alt on {{ MathMLElement("mglyph" ) }} cannot be set on <mstyle>.
  • actiontype on {{ MathMLElement("maction") }} cannot be set on <mstyle>.

Examples

Example 1: Using displaystyle and mathcolor to effect style changes in the layout of the whole sum.

<math> 

  <mstyle displaystyle="true" mathcolor="teal">
    <mrow>
    
      <munderover>
        <mo stretchy="true" form="prefix">&sum;</mo>
        <mrow>
          <mi>i</mi>
          <mo form="infix">=</mo>
          <mn>1</mn>
        </mrow>
        <mi>n</mi>
      </munderover>

      <mstyle displaystyle="true">
        <mfrac>
          <mn>1</mn>          
          <mi>n</mi>   
        </mfrac>
      </mstyle>

    </mrow>
  </mstyle>

</math>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} (24 only) {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} 5.1
decimalpoint {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
dir {{ CompatNo() }} {{ CompatGeckoDesktop("12.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
displaystyle {{ CompatNo() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
infixbreakstyle {{ CompatNo() }} {{ CompatNo() }} {{ bug(534962) }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
scriptlevel {{ CompatNo() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
scriptminsize {{ CompatNo() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
scriptsizemultiplier {{ CompatNo() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
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() }}
decimalpoint {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
dir {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("12.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
displaystyle {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
infixbreakstyle {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ bug(534962) }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
scriptlevel {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
scriptminsize {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
scriptsizemultiplier {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Gecko-specific notes

  • Prior to Gecko 6.0 {{ geckoRelease("6.0") }} the implementation of <mstyle> was not complete and has been corrected. In particular, setting these attributes on mstyle had no effect to its children:
    • The bevelled attribute on {{ MathMLElement("mfrac") }} elements.
    • The notation attribute on {{ MathMLElement("menclose") }} elements.
    • The open, close and separators attributes on {{ MathMLElement("mfenced") }} elements.
    • The accent and accentunder attributes on {{ MathMLElement("mover") }}, {{ MathMLElement("munder") }} and {{ MathMLElement("munderover") }} elements.
    • The selection attribute on {{ MathMLElement("maction") }} elements.
    • The mathvariant attribute on {{ MathMLElement("mi") }} elements.
  • Starting with Gecko 20.0 {{geckoRelease("20.0")}} unitless values and percent values for the scriptminsize attribute are allowed and interpreted as multiple of "8pt".

Specifications

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

 

Revision Source

<p>The MathML <code>&lt;mstyle&gt;</code> element is used change the style of its children. It accepts all attributes of all MathML presentation elements with some exceptions and additional attributes listed below.</p>
<h2 id="Attributes">Attributes</h2>
<dl>
  <dt id="attr-dir">
    dir</dt>
  <dd>
    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-decimalpoint">
    decimalpoint</dt>
  <dd>
    This attribute is specifying the character for the alignment point within {{ MathMLElement("mstack") }} and {{ MathMLElement("mtable") }} columns, if the <code>decimalpoint</code> value is used to specify the alignment.</dd>
  <dt id="attr-displaystyle">
    displaystyle</dt>
  <dd>
    A Boolean value specifying whether more vertical space is used for displayed equations or, if set to <code>false</code>, a more compact layout is used to display formulas. The main effect is that larger versions of operators are displayed, when <code>displaystyle</code> is set to <code>true</code>. See also <code>largeop</code> and <code>movablelimits</code> on {{ MathMLElement("mo") }}.</dd>
  <dt id="attr-infixlinebreakstyle">
    infixlinebreakstyle</dt>
  <dd>
    Specifies the default <code>linebreakstyle</code> to use for infix operators. The values <code>before</code>, <code>after</code> and <code>duplicate</code> are allowed.</dd>
  <dt id="attr-scriptlevel">
    scriptlevel</dt>
  <dd>
    Controls mostly the font-size. The higher the <code>scriptlevel</code>, the smaller the font size. This attribute accepts a non-negative integer, as well as a "+" or a "-" sign, which increments or decrements the current value. In addition, the <code>scriptlevel</code> attribute can never reduce the font size below <code>scriptminsize</code> in order to avoid unreadable small font sizes and depends on the multiplier specified in <code>scriptsizemultiplier</code>.</dd>
  <dt id="attr-scriptminsize">
    scriptminsize</dt>
  <dd>
    Specifies a minimum font size allowed due to changes in <code>scriptlevel</code>. The default value is 8pt.</dd>
  <dt id="attr-scriptsizemultiplier">
    scriptsizemultiplier</dt>
  <dd>
    Specifies the multiplier to be used to adjust font size due to changes in <code>scriptlevel</code>. The default value is 0.71.</dd>
</dl>
<p>The <code>&lt;mstyle&gt;</code> element accepts <a href="/en-US/docs/MathML/Attributes">all attributes</a> of all presentation attributes with the following exceptions:</p>
<ul>
  <li><code>height</code>, <code>depth</code> or <code>width</code> do not apply to {{ MathMLELement("mglyph") }}, {{ MathMLELement("mpadded") }} or {{ MathMLELement("mtable") }}.</li>
  <li><code>rowalign</code>, <code>columnalign</code>, or <code>groupalign</code> do not apply to {{ MathMLELement("mtr") }}, {{ MathMLELement("mlabeledtr") }}, {{ MathMLELement("mtd") }} or {{ MathMLELement("maligngroup") }}.</li>
  <li><code>lspace</code> or <code>voffset</code> do not apply to {{ MathMLELement("mpadded") }}.</li>
  <li><code>fontfamily</code> does not apply to {{ MathMLELement("mglyph") }}.</li>
  <li><code>align</code> does not apply to {{ MathMLELement("mtable") }} or {{ MathMLELement("mstack") }}.</li>
  <li><code>index</code> cannot be set on <code>&lt;mstyle&gt;</code>.</li>
  <li><code>src</code> and <code>alt</code> on {{ MathMLElement("mglyph" ) }} cannot be set on <code>&lt;mstyle&gt;</code>.</li>
  <li><code>actiontype</code> on {{ MathMLElement("maction") }} cannot be set on <code>&lt;mstyle&gt;</code>.</li>
</ul>
<h2 id="Examples">Examples</h2>
<p>Example 1: Using <code>displaystyle</code> and <code>mathcolor</code> to effect style changes in the layout of the whole sum.</p>
<pre class="brush: html">
&lt;math&gt; 

  &lt;mstyle displaystyle="true" mathcolor="teal"&gt;
    &lt;mrow&gt;
    
      &lt;munderover&gt;
        &lt;mo stretchy="true" form="prefix"&gt;&amp;sum;&lt;/mo&gt;
        &lt;mrow&gt;
          &lt;mi&gt;i&lt;/mi&gt;
          &lt;mo form="infix"&gt;=&lt;/mo&gt;
          &lt;mn&gt;1&lt;/mn&gt;
        &lt;/mrow&gt;
        &lt;mi&gt;n&lt;/mi&gt;
      &lt;/munderover&gt;

&nbsp;     &lt;mstyle displaystyle="true"&gt;
        &lt;mfrac&gt;
          &lt;mn&gt;1&lt;/mn&gt;          
          &lt;mi&gt;n&lt;/mi&gt;   
        &lt;/mfrac&gt;
      &lt;/mstyle&gt;

   &nbsp;&lt;/mrow&gt;
  &lt;/mstyle&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>{{ CompatNo() }}</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td><code>decimalpoint</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</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>displaystyle</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>infixbreakstyle</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} {{ bug(534962) }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>scriptlevel</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>scriptminsize</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>scriptsizemultiplier</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</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>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>decimalpoint</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</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>displaystyle</code></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>infixbreakstyle</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} {{ bug(534962) }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>scriptlevel</code></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>scriptminsize</code></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>scriptsizemultiplier</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("1.9.2") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
<ul>
  <li>Prior to Gecko 6.0 {{ geckoRelease("6.0") }} the implementation of <code>&lt;mstyle&gt;</code> was not complete and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=569125">has been corrected</a>. In particular, setting these attributes on <code>mstyle</code> had no effect to its children:
    <ul>
      <li>The <code>bevelled</code> attribute on {{ MathMLElement("mfrac") }} elements.</li>
      <li>The <code>notation</code> attribute on {{ MathMLElement("menclose") }} elements.</li>
      <li>The <code>open</code>, <code>close</code> and <code>separators</code> attributes on {{ MathMLElement("mfenced") }} elements.</li>
      <li>The <code>accent</code> and <code>accentunder</code> attributes on {{ MathMLElement("mover") }}, {{ MathMLElement("munder") }} and {{ MathMLElement("munderover") }} elements.</li>
      <li>The <code>selection</code> attribute on {{ MathMLElement("maction") }} elements.</li>
      <li>The <code>mathvariant</code> attribute on {{ MathMLElement("mi") }} elements.</li>
    </ul>
  </li>
  <li>Starting with Gecko 20.0 {{geckoRelease("20.0")}} unitless values and percent values for the <code>scriptminsize</code> attribute are allowed and interpreted as multiple of "8pt".</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.mstyle', 'mstyle') }}</td>
      <td>{{ Spec2('MathML3') }}</td>
      <td>Current specification</td>
    </tr>
    <tr>
      <td>{{ SpecName('MathML2', 'chapter3.html#presm.mstyle', 'mstyle') }}</td>
      <td>{{ Spec2('MathML2') }}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision