Skip NavigationDesign Science: How Science Communicates
Products Solutions Store Support Reference Company View Cart
 
 

MathML 3 Elementary Math Examples

Elementary Math Elements

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.

Addition, Subtraction, and Multiplication Problems

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 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 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 below

Long Division

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>

Repeating Decimal

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>

MathML 3 Sample Page

Examples on this page have been collected together into a sample page.  In order to view the page properly, you need a browser that has implemented MathML 3's elementary math elements.

MathML Makes Elementary Math Accessible

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

- top of page -
Copyright © 1996-2014 Design Science. All rights reserved. | Privacy statement