<mfrac>

  • Revision slug: MathML/Element/mfrac
  • Revision title: mfrac
  • Revision id: 36903
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment Reverted to earlier version; 28 words removed

Revision Content

Summary

The MathML <mfrac> element is used to display fractions.

The syntax is: <mfrac>numerator denominator</mfrac>.

Attributes

bevelled
Specifies the way the fraction is displayed. If true, the fraction line is bevelled, which means that numerator and denominator are displayed side by side and separated by a slash (/). Otherwise, if set to false (which is the default value), numerator and denominator are on top of each other.
class, id, style
Provided for use with stylesheets.
denomalign
The alignment of the denominator under the fraction. Possible values are: left, center (default), and right.
href {{ gecko_minversion_inline("7.0") }}
Used to set a hyperlink to a specified URI.
linethickness
The thickness of the horizontal fraction line. The default value is medium, but thin, thick, and other length values can be set.
Starting with Gecko 7.0 {{ geckoRelease("7.0") }} medium has been corrected to match the default thickness.
mathbackground {{ gecko_minversion_inline("2.0") }}
The background color. You can use #rgb, #rrggbb and HTML color names.
mathcolor {{ gecko_minversion_inline("2.0") }}
The text color and also the fraction line color. You can use #rgb, #rrggbb and HTML color names.
numalign
The alignment of the numerator over the fraction. Possible values are: left, center (default), and right.

Examples

Rendering: (a/b)/(c/d)

<math>  
  <mfrac bevelled="true">
     <mfrac>
        <mi> a </mi>
        <mi> b </mi>
     </mfrac>
     <mfrac>
        <mi> c </mi>
        <mi> d </mi>
     </mfrac>
  </mfrac>
</math>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} 9.5 5.1
bevelled attribute {{ CompatNo() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
bevelled attribute {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Specification

  • {{ spec("http://www.w3.org/TR/MathML/chapter3.html#presm.mfrac","MathML 3.0 Presentation Markup mfrac", "REC") }}

Revision Source

<h2>Summary</h2>
<p>The MathML <code>&lt;mfrac&gt;</code> element is used to display fractions.</p>
<p>The syntax is: <code>&lt;mfrac&gt;<em>numerator</em> <em>denominator</em>&lt;/mfrac&gt;</code>.</p>
<h2>Attributes</h2>
<dl> <dt id="attr-bevelled">bevelled</dt> <dd>Specifies the way the fraction is displayed. If <code>true</code>, the fraction line is bevelled, which means that numerator and denominator are displayed side by side and separated by a slash (/). Otherwise, if set to <code>false</code> (which is the default value), numerator and denominator are on top of each other.</dd> <dt id="attr-class-id-style">class, id, style</dt> <dd>Provided for use with <a href="/en/CSS" title="en/CSS/">stylesheets</a>.</dd> <dt id="attr-denomalign">denomalign</dt> <dd>The alignment of the denominator under the fraction. Possible values are: <code>left</code>, <code>center</code> (default), and <code>right</code>.</dd> <dt id="attr-href">href {{ gecko_minversion_inline("7.0") }}</dt> <dd>Used to set a hyperlink to a specified URI.</dd> <dt id="attr-linethickness">linethickness</dt> <dd>The thickness of the horizontal fraction line. The default value is <code>medium</code>, but <code>thin</code>, <code>thick</code>, and other <a href="/en/CSS/length" title="en/CSS/length">length values</a> can be set.<br> Starting with Gecko 7.0 {{ geckoRelease("7.0") }} <code>medium</code> has been corrected to match the default thickness.</dd> <dt id="attr-mathbackground">mathbackground {{ gecko_minversion_inline("2.0") }}</dt> <dd>The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="en/CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">HTML color names</a>.</dd> <dt id="attr-mathcolor">mathcolor {{ gecko_minversion_inline("2.0") }}</dt> <dd>The text color and also the fraction line color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="en/CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">HTML color names</a>.</dd> <dt id="attr-numalign">numalign</dt> <dd>The alignment of the numerator over the fraction. Possible values are: <code>left</code>, <code>center</code> (default), and <code>right</code>.</dd>
</dl>
<h2>Examples</h2>
<p>Rendering: <img alt="(a/b)/(c/d)" src="/@api/deki/files/4846/=mfrac.png" style="vertical-align: middle; margin-left: 10px;"></p>
<pre class="brush: html">&lt;math&gt;  
  &lt;mfrac bevelled="true"&gt;
     &lt;mfrac&gt;
        &lt;mi&gt; a &lt;/mi&gt;
        &lt;mi&gt; b &lt;/mi&gt;
     &lt;/mfrac&gt;
     &lt;mfrac&gt;
        &lt;mi&gt; c &lt;/mi&gt;
        &lt;mi&gt; d &lt;/mi&gt;
     &lt;/mfrac&gt;
  &lt;/mfrac&gt;
&lt;/math&gt;
</pre>
<h2>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() }}</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>{{ CompatNo() }}</td> <td>9.5</td> <td>5.1</td> </tr> <tr> <td><code>bevelled</code> attribute</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>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>bevelled</code> attribute</td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody>
</table>
</div>
<h2>Specification</h2>
<ul> <li>{{ spec("http://www.w3.org/TR/MathML/chapter3.html#presm.mfrac","MathML 3.0 Presentation Markup mfrac", "REC") }}</li>
</ul>
Revert to this revision