Tips For Hand Coding MathML

\sin θ = ∑_{n \geq 0} \frac{{(-1)}^{n θ 2 n + 1}}{(2 n + 1)!}

You my recognize the function shown above as the trigonometric formula to calculate arc length in radians. In this article I explain my method for hand-coding complex mathematical expressions such as this.

(-1)

^nθ2n+1

<math>
<mo>(</mo><mn>-1</mn><mo>)</mo>
<sup><mrow><mi>n</mi><mo>&#x03B8</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn></mrow></sup>
</math>

First, write the code for the numerator of the fraction, which contains a complex exponent.

(2 n + 1)!

<math>
<mo>(</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo><mo>!</mo>
</math>

Next, write the code for the denominator of the fraction.

\frac{{(-1)}^{n θ 2 n + 1}}{(2 n + 1)!}

<math>
<mfrac>
   <mrow>
      <msup>
         <mrow><mo>(</mo><mn>-1</mn><mo>)</mo></mrow>
         <mrow><mi>n</mi><mo>&#x03B8</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn></mrow>
     </msup>
  </mrow>
  <mrow>
     <mo>(</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo><mo>!</mo>
  </mrow>
</mfrac>
</math>

Then use an <mfrac> element to create the fraction.

\sum \frac{{(-1)}^{n θ 2 n + 1}}{(2 n + 1)!}

<math>
<mo>&#x2211;</mo>
<mfrac>
  <mrow>
    <msup> <mrow><mo>(</mo><mn>-1</mn><mo>)</mo></mrow>
    <mrow><mi>n</mi><mo>&#x03B8</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn></mrow>
    </msup> </mrow>
  <mrow>
 <mo>(</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo><mo>!</mo>
</mrow>
</mfrac>
</math>

Next place the code for the summation symbol before the fraction.

∑_{n \geq 0} \frac{{(-1)}^{n θ 2 n + 1}}{(2 n + 1)!}

<math>
<munder>
 <mrow><ms lquote=" " rquote=" ">∑</ms></mrow>
 <mrow><mi>n</mi><mo>≥</mo><mn>0</mn></mrow>
</munder>
<mfrac>
<mrow>
<msup>
 <mrow><mo>(</mo><mn>-1</mn><mo>)</mo></mrow>
 <mrow><mi>n</mi><mo>θ</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn></mrow>
</msup>
</mrow>
<mrow>
 <mo>(</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo><mo>!</mo>
</mrow>
</mfrac>
</math>

Then use a <munder> element to put the range under the summation symbol.

\sin θ = ∑_{n \geq 0} \frac{{(-1)}^{n θ 2 n + 1}}{(2 n + 1)!}

<math>
<mi>sin</mi>
<mo>θ</mo>
<mo>=</mo>
<munder>
  <mrow><ms lquote=" " rquote=" ">∑</ms></mrow>
  <mrow><mi>n</mi><mo>≥</mo><mn>0</mn></mrow>
</munder>
<mfrac>
 <mrow>
  <msup>
    <mrow><mo>(</mo><mn>-1</mn><mo>)</mo></mrow>
    <mrow><mi>n</mi><mo>θ</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn></mrow>
  </msup>
 </mrow>
 <mrow>
   <mo>(</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo><mo>!</mo>
 </mrow>
</mfrac>
</math>

Then code the left side and equals sign of the equation.

\sin θ = ∑_{n \geq 0} \frac{{(-1)}^{n θ 2 n + 1}}{(2 n + 1)!}

<math>
<mi>sin</mi>
<mo>θ</mo>
<mo>=</mo>
<munder>
 <mrow><ms lquote=" " rquote=" ">∑</ms></mrow>
 <mrow><mi>n</mi><mo>≥</mo><mn>0</mn></mrow>
</munder>
<mfrac>
 <mrow>
   <msup>
     <mrow><mo>(</mo><mn>-1</mn><mo>)</mo></mrow>
     <mrow>
     <mstyle mathsize="big">
     <mi>n</mi><mo>θ</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn></mrow>
     </mstyle>
   </msup>
 </mrow>
 <mrow>
   <mo>(</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo><mo>!</mo>
 </mrow>
 </mfrac>
</math>

You may have noticed that the text size of the exponent in the numerator of the fraction is very tiny. You can fix this by using an <mstyle> element with a mathsize attribute set to "big".

More Graphics Design Tips:
• MathML mtext Element to Display Plain Text
• How to Really Create an Arc in SVG
• History of Type Development and Type Terminology
• Graphics File Formats for Your Web Page
• SVG Image Masking
• Inkscape Layers and Z-Order
• Inkscape Rectangles and Squares Drawing Tutorial
• Graphics Design for Beginners - Cropping Images
• Pencil Free Open Source Cartoon Animation Drawing Program
• Draw Bezier SVG Drawing Application