MathML 3 elementary math examples

MathML 3 adds several elements to handle elementary math problems.  The elementary math elements below should be inside of either an mstack or an mlongdiv element.  Both mstack and mlongdiv make the digits of numbers contained in them be in their own columns and their children appear in their own row; mlongdiv's first three children are the divisor, dividend, and result and are treated specially.

  • msgroup groups rows with similar alignment; options control the position and shifting of children (see multiplication and division examples below)
  • msrow groups digits and operators into a row; options control the position of the children
  • msline draws lines between rows of the stack; options control the position, length, thickness, and overhang of the line
  • mscarries annotates the following row with optional borrows/carries and/or crossouts; options control the default location, style, and size of the borrows, carries, and crossouts
  • mscarry a borrow/carry and/or crossout for a single digit; options control the location, style, and size of the borrow, carry, and/or crossout

If a blank entry in a column is needed, the element none can be used. This is shown in some of the examples below.

Here's a simple addition problem that spaces the "+" away from the operand by using the element none:

Addition problem with two numbers 
<mstack>
  <mn>496</mn>
  <msrow> <mo>+</mo> <none/> <mn>28</mn> </msrow>
  <msline/>
</mstack>

Here's a more complicated subtraction problem that shows carries and borrows and crossouts:

subtraction problem with borrows
<mstack>
  <mscarries location="nw">
    <none/>
    <mscarry crossout="updiagonalstrike" location="n">
      <mn>2</mn>
    </mscarry>
    <mn>1</mn>
    <none/>
  </mscarries>
  <mn>2,327</mn>
  <msrow> <mo>-</mo> <mn> 1,156</mn> </msrow>
  <msline/>
  <mn>1,171</mn>
</mstack>

Notice that the carry/borrow default of "n" (north/above) is changed to the "nw" (northwest) position by mscarries, but that is overridden for the borrow and changed back to "n". The carry/borrow can be in any compass position. Several different styles for crossouts are possible.

Here's a multiplication problem that shows multiple rows of carries:

multiplication problem with two rows of initial carries and one in the middle for the addition
<mstack charspacing="loose">
  <mscarries position="1"> <mn>1</mn> </mscarries>
  <mscarries position="1"> <mn>1</mn> <mn>3</mn> </mscarries>
  <mn>435</mn>
  <msrow> <mo>&#xD7;</mo> <none/> <mn>25</mn> </msrow>
  <msline/>

  <mscarries position="2"> <mn>1</mn> </mscarries>
  <mn>2185</mn>
  <msrow position="1"><mn>874</mn></msrow>
  <msline/>

  <mn>10925</mn>
</mstack>

There are a few things to note about this example:

  • We specified loose spacing between the characters on the mstack tag; absolute values such as "10px" can also be given.
  • The carries are shifted over; we could also have used an msrow and none, but specifying a position is simpler.
  • The '874' uses msrow to shift the number over one column, but a "0" could have been added and this would not have been needed; alternatively, msgroup with shift="1" could have been used, similar to what is done in the long division problem in our next example.

There are many different styles of long division used around the world. MathML has ten named styles, but the list is open-ended. All styles share how the intermediate steps are displayed, but differ in the placement of the divisor, result, and where lines are drawn. The default style is the style used in the U.S., Great Britain, and elsewhere.

Below are two examples that differ only in the style and what character is used for the decimal separator. Because the separator is typically set on the math element, it is included in these examples.

long division problem: 198 divided by 12 equals 16.5
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mlongdiv>
  <mn> 12 </mn>
  <mn> 16.5 </mn>
  <mn> 198 </mn>
  <msgroup position='1' shift='-1'>
    <msgroup>
      <mn> 12 </mn>
      <msline length='2'/>
    </msgroup>
    <msgroup>
      <mn> 78 </mn>
      <mn> 72 </mn>
      <msline length='2'/>
      <mn> 6.0 </mn>
      <mn> 6.0 </mn>
    </msgroup>
    <msgroup position='-1'> <!-- extra shift to move to the right of the "." -->
      <msline length='3'/>
      <mn> 0 </mn>
    </msgroup>
  </msgroup>
</mlongdiv>
</math>
Long division problem in the style used in France
<math xmlns="http://www.w3.org/1998/Math/MathML"
      decimalpoint=",">
<mlongdiv longdivstyle='stackedrightright'>
  <mn> 12 </mn>
  <mn> 16,5 </mn>
  <mn> 198 </mn>
  <msgroup position='1' shift='-1'>
    <msgroup>
      <mn> 12 </mn>
      <msline length='2'/>
    </msgroup>
    <msgroup>
      <mn> 78 </mn>
      <mn> 72 </mn>
      <msline length='2'/>
      <mn> 6,0 </mn>
      <mn> 6,0 </mn>
    </msgroup>
    <msgroup position='-1'> <!-- extra shift to move to the right of the "," -->
      <msline length='3'/>
      <mn> 0 </mn>
    </msgroup>
  </msgroup>
</mlongdiv>
</math>

There are two common styles for indicating a repeating decimal in a decimal expansion of fractions like ⅓. The most common style puts a line above the part that repeats and the other style puts dots on the first and last digits of the part that repeats. Both are easy to write as shown below:

repeating decimal with line over repeating part
<mstack stackalign="right">
  <msline length="6"/>
  <mn> 0.4047619 </mn>
</mstack>
repeated decimal 0.4047619 with dots over last 0 and 9
<mstack stackalign="right">
  <msrow> <mo>.</mo> <none/><none/><none/><none/> <mo>.</mo> </msrow>
  <mn> 0.4047619 </mn>
</mstack>

The video below shows a prototype of MathPlayer speaking and highlighting the speech for two elementary math examples: