DanielScully.co.uk

Web Design

A Beginner's Guide to MathML

Fractions

To write a fraction, or any thing which should be displayed in a similar way (e.g.: binomial coefficients), we can use the <mfrac> element.

  1. <mfrac>
  2. <mrow> <mi>x</mi><mo>+</mo><mn>2</mn> </mrow>
  3. <mn>3</mn>
  4. </mfrac>
 MathML rendering of an mfrac element

The fraction is our first example of a feature which is strange to XML but common to MathML: the importance of order. Within an <mfrac> the first child is defined as the numerator and the second child the denominator. This also means that it must have exactly two children, no more, no less. When either the numerator or denominator are expressions in their own right, they must be grouped together in some other tag such as the <mrow> in the example above.

There are also four fraction-specific attributes which can be set to describe the layout of the fraction:

AttributeDescriptionAllowed Values
linethickness Sets the thickness of the line which separates the numerator and the denominator
  • number (a multiplier of the default thickness)
  • thick
  • medium (default)
  • thin
numalign Sets the alignment of the numerator
  • left
  • center (default)
  • right
denomalign Sets the alignment of the numerator
  • left
  • center (default)
  • right
bevelled Determines whether the fraction is displayed with the separating line horizontal (false) or at an angle (true)
  • true
  • false (default)

Here are some examples of their use:

Example: Binomial coefficients

As we said earlier, <mfrac> is not just for fractions. By setting linethickness="0" we can use <mfrac> to display binomial coefficients:

  1. <mfenced>
  2. <mfrac linethickness="0">
  3. <mn>2</mn>
  4. <mn>3</mn>
  5. </mfrac>
  6. </mfenced>
 MathML rendering of binomial coefficients using the mfrac element
Example: Alignment

Using the 'denomalign' attribute, we can align the denominator in this expression to the right of the fraction.

  1. <mfrac denomalign="right">
  2. <mrow> <mi>x</mi><mo>+</mo><mn>2</mn> </mrow>
  3. <mn>3</mn>
  4. </mfrac>
 MathML rendering of an mfrac element with a right-aligned denominator

The same can be done with the numerator using 'numalign'.

Example: Beveled fractions

When the 'bevelled' attribute is set to 'true', the fraction is displayed with a diagonal separator, instead of the horizontal one in the other examples above.

  1. <mfrac bevelled="true">
  2. <mrow> <mi>x</mi><mo>+</mo><mn>2</mn> </mrow>
  3. <mn>3</mn>
  4. </mfrac>
 MathML rendering of an mfrac element with a diagonal sivider