<mfrac>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2023.
* Some parts of this feature may have varying levels of support.
The <mfrac> MathML element is used to display fractions. It can also be used
to mark up fraction-like objects such as
binomial coefficients
and Legendre symbols.
Syntax
html
<mfrac>numerator denominator</mfrac>
Attributes
This element's attributes include the global MathML attributes as well as the following attributes:
denomalign-
The alignment of the denominator under the fraction. Possible values are:
left,center(default), andright. linethickness-
A
<length-percentage>indicating the thickness of the horizontal fraction line. numalign-
The alignment of the numerator over the fraction. Possible values are:
left,center(default), andright.
Note:
For the linethickness attribute, some browsers may also accept the deprecated values medium, thin and thick (whose exact interpretation is left to implementers) or legacy MathML lengths.
Examples
Simple fraction
The following MathML code should render as a fraction with numerator "a + 2" and denominator "3 − b":
html
<math display="block">
<mfrac>
<mrow>
<mi>a</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
<mrow>
<mn>3</mn>
<mo>−</mo>
<mi>b</mi>
</mrow>
</mfrac>
</math>
Fraction without bar
The following MathML code should render as a binomial coefficient:
html
<math display="block">
<mrow>
<mo>(</mo>
<mfrac linethickness="0">
<mi>n</mi>
<mi>k</mi>
</mfrac>
<mo>)</mo>
</mrow>
</math>
Technical summary
| Implicit ARIA role | None |
|---|
Specifications
| Specification |
|---|
| MathML Core # fractions-mfrac |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
mfrac
|
|
|
|
|
|
|
|
|
|
|
|
|
denomalign
|
|
|
|
|
|
|
|
|
|
|
|
|
linethickness
|
|
|
|
|
|
|
|
|
|
|
|
|
Named spaces (e.g. thinmathspace to mean 3/18em)
|
|
|
|
|
|
|
|
|
|
|
|
|
| Nonzero unitless values (e.g. 5 to mean 500% the default thickness) |
|
|
|
|
|
|
|
|
|
|
|
|
thin, medium, thick values
|
|
|
|
|
|
|
|
|
|
|
|
|
numalign
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- Has more compatibility info.