Mathematical Expressions & Notations Using MathJax

Click Here To Download
Click Here To View the Demo

Few months back I was handling a project which was to develop mathematics based tools for primary school students. The tool includes solving linear and quadratic expressions. The total functionality of this tool is developed using JQuery. While developing the tool we faced a hurdle where the client requirement is to display the fraction as stacked fraction i.e., instead of displaying a fraction say ‘1/2’ we need to display it as 1/2(instacked form).
Initially I came up with a solution of displaying stacked fraction with CSS styling. The Code I put up is like

HTML:

<div class="stackedfraction">
<span class="num">4</span>
<span class="bar">/</span>
<span class="den">5</span>
</div>

CSS:

. stackedfraction {
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.001em;
text-align: center;
font-size: 12px;
}
. stackedfraction > span {
display: block;
padding: 0.1em;
}
. stackedfraction span.num {border-top: thin solid black;}
. stackedfraction span.bar {display: none;}

Then gradually I realized that it will be difficult to maintain and evaluate the stacked fraction using this method. So I had to do a R&D for alternative solution. I beat my brains out all day to find the solution and finally came up with an alternative that is MathJax. So,in the following lines I’ll demonstrate how to use MathJax to simplify the requirements.

Using MathJax we can write any difficult Mathematical Expressions & Notations easily. It is very easy to understand and implement. Mathematics notation is generally either authored by using graphical software tools such as word processors and equation editors, or by writing source code in a document markup language which is then compiled to product the final output. Over the years, many authoring tools and markup languages have been developed, but there has also been a significant push towards standardization. Most applications now utilize MathML or LaTeX. Consequently, MathJax aims to support both as input formats.

MathML:
MathML(Mathematical Markup Language) is the XML standard for representing math expressions, developed by the World Wide Web Consortium in 1995. It is the dominant means of representing mathematics in XML contexts. Because MathML can be validated easily, and emphasizes the logical structure of expressions, it is favored by graphical authoring tools, and for advanced applications such as accessibility, interoperability between applications, and math-aware search.
The elements’ names all begin with m. Lets write MathML code to display a quadratic expression
ax^2+bx+c=0 and roots of quadratic expression -b +- b^2-4ac/2a.

CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of MathML embedded in an HTML5 file</title>
  </head>
  <body>
    <h1>Example of <abbr title="Mathematical Markup Language">MathML</abbr> embedded in an <abbr title="HyperText Markup Language">HTML</abbr>5 file</h1>
    <p>
      Given the quadratic equation
      <math>
        <mrow>
          <mi>a</mi>
          <mo>⁢</mo>
          <msup>
            <mi>x</mi>
            <mn>2</mn>
          </msup>
          <mo>+</mo>
          <mi>b</mi>
          <mo>⁢</mo>
          <mi>x</mi>
          <mo>+</mo>
          <mi>c</mi>
          <mo>=</mo>
          <mi>0</mi>
        </mrow>
      </math>,
      the roots are given by
      <math>
        <mrow>
          <mi>x</mi>
          <mo>=</mo>
          <mfrac>
            <mrow>
              <mo form="prefix">−</mo>
              <mi>b</mi>
              <mo>±</mo>
              <msqrt>
                <msup>
                  <mi>b</mi>
                  <mn>2</mn>
                </msup>
                <mo>−</mo>
                <mn>4</mn>
                <mo>⁢</mo>
                <mi>a</mi>
                <mo>⁢</mo>
                <mi>c</mi>
              </msqrt>
            </mrow>
            <mrow>
              <mn>2</mn>
              <mo>⁢</mo>
              <mi>a</mi>
            </mrow>
          </mfrac>
        </mrow>
      </math>.
    </p>
  </body>
</html>

The above code works fine in all browsers except Chrome. The support for MathML in chrome was introduced in Version 24 but it was retained in the next versions since they realized that MathML is unstable. So to make this work in chrome we need to take the help of MathJax library. By extending the functionalities of MathJax we can view the MathML notation in chrome. Below is the revised code

CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of MathML embedded in an HTML5 file</title>
<script type="text/x-mathjax-config;executed=true">
        MathJax.Hub.Config({
          "HTML-CSS": {

            availableFonts: [],
            preferredFonts: "TeX",
            webFont:"",
            imageFont:"",
            undefinedFamily:"'Arial Unicode MS',serif"
          }
        });
        </script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

  </head>
  <body>
    <h1>Example of <abbr title="Mathematical Markup Language">MathML</abbr> embedded in an <abbr title="HyperText Markup Language">HTML</abbr>5 file</h1>
    <p>
      Given the quadratic equation
      <math>
        <mrow>
          <mi>a</mi>
          <mo>⁢</mo>
          <msup>
            <mi>x</mi>
            <mn>2</mn>
          </msup>
          <mo>+</mo>
          <mi>b</mi>
          <mo>⁢</mo>
          <mi>x</mi>
          <mo>+</mo>
          <mi>c</mi>
          <mo>=</mo>
          <mi>0</mi>
        </mrow>
      </math>,
      the roots are given by
      <math>
        <mrow>
          <mi>x</mi>
          <mo>=</mo>
          <mfrac>
            <mrow>
              <mo form="prefix">−</mo>
              <mi>b</mi>
              <mo>±</mo>
              <msqrt>
                <msup>
                  <mi>b</mi>
                  <mn>2</mn>
                </msup>
                <mo>−</mo>
                <mn>4</mn>
                <mo>⁢</mo>
                <mi>a</mi>
                <mo>⁢</mo>
                <mi>c</mi>
              </msqrt>
            </mrow>
            <mrow>
              <mn>2</mn>
              <mo>⁢</mo>
              <mi>a</mi>
            </mrow>
          </mfrac>
        </mrow>
      </math>.
    </p>
<script type="text/javascript">
MathJax.Hub.Typeset();
</script>
  </body>
</html>

If you are writing a dynamic web page where content containing mathematics may appear after MathJax has already typeset the rest of the page, then you will need to tell MathJax to look for mathematics in the page again when that new content is produced. To do that, you need to use the MathJax.Hub.Typeset() method.

LaTex:
TeX is a document markup language developed by Donald Knuth in the 70’s and 80’s. It was influential in empowering researchers to prepare high-quality research publications, and remains in wide use. The core TeX language is small, but it is easily extended via “macros,” which has lead to a proliferation of dialects. The LaTeX dialect is fairly standard, but there are still many variations. The subset of LaTeX commands used for mathematics expressions has become popular in web applications such as blogs and wikis as a linear input syntax for math since it uses only ASCII characters that can be entered in web forms, and is widely known.
The above example in LaTex notation can be implemented using following simple lines

The roots of a quadratic polynomial $a x^2 + bx + c$ with
$a neq 0$ are given by the formula
[ frac{-b pm sqrt{b^2 - 4ac}}{2a} ]

Since both TeX and MathML are important to various communities that share a common interest in math on the Web, MathJax will support them both. In both cases, the relevant input language will be parsed into an internal MathJax data structure, which will in turn be rendered. Because MathML is the preferred format for accessibility, interoperability and other advanced applications, client applications will be able to pro-grammatically obtain a MathML representation of an expression, regardless of the original format.
So by using MathJax Mathematical Expressions & Notations can be implemented easily.

Hope you enjoyed following this article. 🙂


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Venkatesh has 2 years experience in the field of web Designing. He holds bachelor degree in Computer Science Engineering from JNT University ,Hyderabad. Venkatesh is well versed with HTML5, CSS3 and JQUERY. He has also worked on KINETIC JS and EXT JS. As a UX developer, Venkatesh has tried to bring about effective teaching and learning in the courses he designed.