<maction>

  • Revision slug: MathML/Element/maction
  • Revision title: maction
  • Revision id: 332351
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment Document bug 749044 and bug 739556

Revision Content

The MathML <maction> element provides a possibility to bind actions to (sub-) expressions.
The action itself is specified by the actiontype attribute, which accepts several values. To specify which child elements are addressed by the action, you can make use of the selection attribute.

Attributes

actiontype
The action which specifies what happens for this element. Possible values are:
  • 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>.
  • tooltip: When the pointer moves over the expression, a tooltip box with a message is displayed near the expression.
    The syntax is: <maction actiontype="tooltip"> expression message </maction>.
class, id, style
Provided for use with stylesheets.
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 and also the fraction line color. You can use #rgb, #rrggbb and HTML color names.
selection
The child element which is addressed by the action. The default value is 1, which is the first child element.

Examples

<math>

<maction actiontype="toggle">

  <mfrac>
    <mn>6</mn>
    <mn>8</mn>
  </mfrac>
  
  <mfrac>
    <mrow>
      <mn>3</mn>
      <mo>&sdot;</mo>
      <mn>2</mn>
    </mrow>
    <mrow>
      <mn>4</mn>
      <mo>&sdot;</mo>
      <mn>2</mn>
    </mrow>    
  </mfrac>

  <mfrac>
    <mn>3</mn>
    <mn>4</mn>
  </mfrac>

</maction>

</math>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} {{webkitbug(85734) }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{webkitbug(85734) }}
actiontype {{ CompatNo() }} toggle & statusline. tooltip is not implemented {{ bug(544001) }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
href {{ CompatNo() }} {{webkitbug(85733)}} {{ CompatGeckoDesktop("7.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{webkitbug(85733)}}
mathbackground {{ CompatNo() }} {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
mathcolor {{ CompatNo() }} {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
actiontype {{ CompatNo() }} {{ CompatNo() }} toggle & statusline. tooltip is not implemented {{ bug(544001) }} {{ 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() }}

Gecko-specific notes

  • Prior to Gecko 9.0 {{ geckoRelease("9.0") }} the non-standard restyle value on the actiontype attribute was supported. This value has been removed.
  • Prior to Gecko 14.0 {{ geckoRelease("14.0") }} the statusline action type was using a non-standard syntax (see below). This has been fixed to follow the MathML specification.
    <maction actiontype="statusline#(message)">
    (expression)
    </maction>
    
  • With Gecko 15.0 {{geckoRelease("15.0")}} the selection attribute is only taken into account with the actiontype "toggle".
  • Starting with Gecko 16.0 {{geckoRelease("16.0")}} the selection attribute is also taken into account when an unknown actiontype is specified. If an actiontype is not specified (is empty) or when the selection attribute is invalid, the markup will throw an MathML error (invalid-markup).

Specifications

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

 

Revision Source

<p>The MathML <code>&lt;maction&gt;</code> element provides a possibility to bind actions to (sub-) expressions.<br />
  The action itself is specified by the <code>actiontype</code> attribute, which accepts several values. To specify which child elements are addressed by the action, you can make use of the <code>selection</code> attribute.</p>
<h2 id="Attributes">Attributes</h2>
<dl>
  <dt id="attr-actiontype">
    actiontype</dt>
  <dd>
    The action which specifies what happens for this element. Possible values are:
    <ul>
      <li><code>statusline</code>: If there is a click on the <em>expression</em> or the reader moves the pointer over it, the <em>message</em> is sent to the browser's status line. The syntax is: <code>&lt;maction actiontype="statusline"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
      <li><code>toggle</code>: When there is a click on the subexpression, the rendering alternates the display of selected subexpressions. Therefore each click increments the <code>selection</code> value.<br />
        The syntax is: <code>&lt;maction actiontype="toggle" selection="<em>positive-integer</em>" &gt; <em>expression1</em> <em>expression2</em> <em>expressionN</em> &lt;/maction&gt;</code>.</li>
      <li><code>tooltip</code>: When the pointer moves over the <em>expression</em>, a tooltip box with a <em>message</em> is displayed near the expression.<br />
        The syntax is:<code> &lt;maction actiontype="tooltip"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
    </ul>
  </dd>
  <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-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 and also the fraction line 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-selection">
    selection</dt>
  <dd>
    The child element which is addressed by the action. The default value is <code>1</code>, which is the first child element.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;math&gt;

&lt;maction actiontype="toggle"&gt;

  &lt;mfrac&gt;
    &lt;mn&gt;6&lt;/mn&gt;
    &lt;mn&gt;8&lt;/mn&gt;
  &lt;/mfrac&gt;
  
  &lt;mfrac&gt;
    &lt;mrow&gt;
      &lt;mn&gt;3&lt;/mn&gt;
      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
      &lt;mn&gt;2&lt;/mn&gt;
    &lt;/mrow&gt;
    &lt;mrow&gt;
      &lt;mn&gt;4&lt;/mn&gt;
      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
      &lt;mn&gt;2&lt;/mn&gt;
    &lt;/mrow&gt;    
  &lt;/mfrac&gt;

  &lt;mfrac&gt;
    &lt;mn&gt;3&lt;/mn&gt;
    &lt;mn&gt;4&lt;/mn&gt;
  &lt;/mfrac&gt;

&lt;/maction&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() }} {{webkitbug(85734) }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} {{webkitbug(85734) }}</td>
      </tr>
      <tr>
        <td><code>actiontype</code></td>
        <td>{{ CompatNo() }}</td>
        <td><code>toggle</code> &amp; <code>statusline</code>. <code>tooltip</code> is not implemented {{ bug(544001) }}</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() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>mathcolor</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("2.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.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>actiontype</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td><code>toggle</code> &amp; <code>statusline</code>. <code>tooltip</code> is not implemented {{ bug(544001) }}</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>
    </tbody>
  </table>
</div>
<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
<ul>
  <li>Prior to Gecko 9.0 {{ geckoRelease("9.0") }} the non-standard <code>restyle</code> value on the <code>actiontype</code> attribute was supported. This value has been removed.</li>
  <li>Prior to Gecko 14.0 {{ geckoRelease("14.0") }} the <code>statusline</code> action type was using a non-standard syntax (see below). This has been fixed to follow the MathML specification.<br />
    <pre>
&lt;maction actiontype="statusline#(message)"&gt;
(expression)
&lt;/maction&gt;
</pre>
  </li>
  <li>With Gecko 15.0 {{geckoRelease("15.0")}} the <code>selection</code> attribute is only taken into account with the actiontype <code>"toggle"</code>.</li>
  <li>Starting with Gecko 16.0 {{geckoRelease("16.0")}} the <code>selection</code> attribute is also taken into account when an unknown <code>actiontype</code> is specified. If an <code>actiontype</code> is not specified (is empty) or when the <code>selection</code> attribute is invalid, the markup will throw an MathML error (invalid-markup).</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.maction', 'maction') }}</td>
      <td>{{ Spec2('MathML3') }}</td>
      <td>Current specification</td>
    </tr>
    <tr>
      <td>{{ SpecName('MathML2', 'chapter3.html#presm.maction', 'maction') }}</td>
      <td>{{ Spec2('MathML2') }}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision