You’re reading Ry’s MathML Tutorial

Calculus

Now that we have the bulk of MathML’s typesetting capabilities out of the way, we can focus on a few elements and entities directly related to calculus. By combining these new tools with previous concepts, we’ll learn how to mark up limits, summations, derivatives, and integrals.

Underscripts

First, we’ll look at <mover>’s counterpart: <munder>. Underscripts are often used to draw limits.

lim 1/x as x->0

This expression can be marked up with the following. Also note the new &infin; entity for creating the infinity symbol.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <munder>
    <mo>lim</mo>
    <mrow>
      <mi>x</mi>
      <mo>&rarr;</mo>
      <mn>0</mn>
    </mrow>
  </munder>
  <mo>&ApplyFunction;</mo>
  <mfrac>
    <mn>1</mn>
    <mi>x</mi>
  </mfrac>
  <mo>=</mo>
  <mi>&infin;</mi>
</math>

Like <mfrac>, this element also includes a few attributes to control how the underscript is rendered:

Attribute Description
accentunder Whether the underscript is the same size as the base or shrunk down. Value should be true or false, respectively.
align The alignment of the script with respect to the base. Can be left, right, or center.

Over/Underscripts

To specify the bounds for summations (&sum;) and products (&prod;), we’ll need <munderover>. It takes three arguments: a base, an underscript, and an overscript. For example:

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <munderover>
    <mo>&sum;</mo>
    <mrow>
      <mi>n</mi>
      <mo>=</mo>
      <mn>0</mn>
    </mrow>
    <mi>k</mi>
  </munderover>
</math>

Your browser should display this as the following.

Summation from n=0 to k

The midline ellipsis entity &ctdot; is very useful for marking up series. It’s typically rendered higher up than the &hellip; entity, as demonstrated in the following equation.

Summation from n=0 to k showing terms a(0) through a(k)
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <munderover>
    <mo>&sum;</mo>
    <mrow>
        <mi>n</mi>
        <mo>=</mo>
        <mn>0</mn>
    </mrow>
    <mi>k</mi>
  </munderover>
  <msub>
    <mi>a</mi><mi>n</mi>
  </msub>
  <mo>=</mo>
  <msub>
    <mi>a</mi><mn>0</mi>
  </msub>
  <mo>+</mo>
  <msub>
    <mi>a</mi><mn>1</mi>
  </msub>
  <mo>+</mo>
  <mi>&ctdot;</mi>
  <mo>+</mo>
  <msub>
    <mi>a</mi><mn>k</mi>
  </msub>
</math>

Notice that the ellipsis is placed in an <mi> tag, not an <mo> as you might expect. This reflects the underlying meaning of the elision—the ellipsis takes the place of symbols that would be rendered as identifiers.

Derivatives

Underscripts and overscripts are the only new MathML elements we need for calculus-related mathematics. All that’s left are the HTML entities for derivatives and integrals. Common symbols for differentiation are listed below.

Symbol Entity Hex Description
&prime; &#x2032; Prime
&Prime; &#x2033; Double prime
&tprime; &#x2034; Triple prime
&qprime; &#x2057; Quadruple prime
&part; &#x2202; Partial Differential
Δ &Delta; &#x0394; Increment
&Del; &#x2207; Gradient

For example, we can use these prime entities to render the Taylor series. Note that when used in this manner, they should be explicitly associated with their function via an <msup> tag.

<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mrow>
    <mi>f</mi>
    <mo>&ApplyFunction;</mo>
    <mfenced><mi>a</mi></mfenced>
  </mrow>
  <mo>+</mo>
  <mrow>
    <mfrac>
      <mrow>
        <msup>
          <mi>f</mi>
          <mo>&prime;</mo>
        </msup>
        <mo>&ApplyFunction;</mo>
        <mfenced><mi>a</mi></mfenced>
      </mrow>
      <mrow>
        <mn>1</mi><mo>!</mo>
      </mrow>
    </mfrac>
    <mo>&InvisibleTimes;</mo>
    <mfenced separators=''>
      <mi>x</mi><mo>&minus;</mo><mi>a</mi>
    </mfenced>
  </mrow>
  <mo>+</mo>
  <mrow>
    <mfrac>
      <mrow>
        <msup>
          <mi>f</mi>
          <mo>&Prime;</mo>
        </msup>
        <mo>&ApplyFunction;</mo>
        <mfenced><mi>a</mi></mfenced>
      </mrow>
      <mrow>
        <mn>2</mi><mo>!</mo>
      </mrow>
    </mfrac>
    <mo>&InvisibleTimes;</mo>
    <msup>
      <mfenced separators=''>
        <mi>x</mi><mo>&minus;</mo><mi>a</mi>
      </mfenced>
      <mn>2</mn>
    </msup>
  </mrow>
  <mo>+</mo>
  <mi>&ctdot;</mi>
</math>

Or, if you’re more interested in multivariable calculus, take a look at the markup for a two-dimensional gradient:

Definition of a 2D gradient
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <mo>&Del;</mo>
  <mi>f</mi>
  <mfenced>
    <mi>x</mi><mi>y</mi>
  </mfenced>
  <mo>=</mo>
  <mfenced>
    <mrow>
      <mfrac>
        <mrow>
          <mo>&part;</mo><mi>f</mi>
        </mrow>
        <mrow>
          <mo>&part;</mo><mi>x</mi>
        </mrow>
      </mfrac>
      <mfenced>
        <mi>x</mi><mi>y</mi>
      </mfenced>
    </mrow>
    <mrow>
      <mfrac>
        <mrow>
          <mo>&part;</mo><mi>f</mi>
        </mrow>
        <mrow>
          <mo>&part;</mo><mi>y</mi>
        </mrow>
      </mfrac>
      <mfenced>
        <mi>x</mi><mi>y</mi>
      </mfenced>
    </mrow>
  </mfenced>
</math>

Integrals

Finally, we come to integrals, of which there are many:

Symbol Entity Hex Description
&int; &#x222B; Integral
&Int; &#x222C; Double integral
&tint; &#x222D; Triple integral
&qint; &#x2A0C; Quadruple integral
&conint; &#x222E; Contour integral
&cwconint; &#x2232; Clockwise contour integral
&awconint; &#x2233; Anticlockwise contour integral
&Conint; &#x222F; Surface integral
&Cconint; &#x2230; Volume integral

Stokes’ Theorem serves as a fitting example for integral entities:

Stokes' Theorem
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
  <msub>
    <mo>&conint;</mo>
    <mrow>
      <mo>&part;</mo><mi>S</mi>
    </mrow>
  </msub>
  <mi mathvariant='bold'>F</mi>
  <mo>&sdot;</mo>
  <mrow>
    <mi>d</mi><mi mathvariant='bold'>s</mi>
  </mrow>
  <mo>=</mo>
  <msub>
    <mo>&Int;</mo><mi>S</mi>
  </msub>
  <mo>&Del;</mo>
  <mo>&times;</mo>
  <mi mathvariant='bold'>F</mi>
  <mo>&sdot;</mo>
  <mrow>
    <mi>d</mi><mi mathvariant='bold'>s</mi>
  </mrow>
</math>

Note that integral bounds are typically marked up as superscript/subscript pairs, regardless of whether they are drawn as block or inline elements (more on this in the Advanced Formatting section).

Summary

This section introduced two new elements, <munder> and <munderover>, along with several HTML entities for drawing derivatives and integrals. For the most part, the preceding examples serve as a useful reference for building up complex expressions, rather than a demonstration of brand new MathML concepts.

By now, I hope you’re relatively comfortable marking up equations. However, we have yet to discuss one of the most powerful features of MathML: tables.

Mailing List

Sign up for my low-volume mailing list to find out when new content is released. Next up is a comprehensive Swift tutorial planned for late January.

You’ll only receive emails when new tutorials are released, and your contact information will never be shared with third parties. Click here to unsubscribe.