The rendering of online mathematics has been a struggle to say the least. There have been advancements made in recent years, but for some professors, the Internet still remains a poor fit for mathematics:


\begin{quotation}
It has been an extremely frustrating experience teaching math online... [t]his aspect of my internet course is the most discouraging. I find myself spending an exorbitant amount of time responding to students mathematically [because the infrastructure does not support it] and not enough time teaching. If this doesn't change, it will eventually be the reason why I give up teaching mathematics on the internet. \cite[2]{diagrams}
\end{quotation}



Rendering Math

In the beginning there was server-side rendering, providing online math as a Web service. That meant that the \LaTeX\ was sent from the client to the server, where image files were generated and then served back to the client for display within an {\tt img} tag in an HTML document. 


I attempted this quite some years ago with some success. I utilized the ``textogif'' command on a server and enabled real-time AJAX communication to dynamically serve generated images. The results were similar to that of MathTRAN, another server-side rendering solution. 


A major downside of this is that the server has to generate files and serve them, and the client must make HTTP requests for every single equation, which is very inefficient. 


Another issue with MathTRAN was that the syntax was verbose. You had to set an HTML element's attribute to the \LaTeX\ code you wanted rendered, so it was a very disconnected editing experience, since you had to combine HTML and \TeX.


MathTRAN was some sort of \TeX\ and HTML:

\begin{print}
\begin{verbatim}

 <p>The equation of the unit circle <img alt="tex:x^2+y^2=1" /> and
   a related trignometric identity <img alt="tex:\sin^2\theta +
   \cos^2\theta = 1" />.  </p>
   
\end{verbatim}
\end{print}


\begin{interactive}
\begin{verbatim}
   
 &lt;p&gt;The equation of the unit circle &lt;img alt=&quot;tex:x^2+y^2=1&quot; /&gt; and
   a related trignometric identity &lt;img alt=&quot;tex:sin^2theta +
   cos^2theta = 1&quot; /&gt;.  &lt;/p&gt;
   
\end{verbatim}
\end{interactive}


This type of authorship interface cannot put an author into a ``flow''. HTML, as much as I love it, is starting to resemble a sort of assembly language.

Server Side Rendering

In addition to \TeX\ rendering, there are also the equation editors that exist out there, which provide a graphical user interface for generating equations. Although the market is potentially larger, because fewer professors know \LaTeX\ than those who do, it is typically difficult to modify or copy the equations that are generated, since they are graphical \cite[6]{diagrams}.


Equation Editors

The W3C came up with a recommendation called MathML, which is a form of XML used to describe mathematical symbols online. Unfortunately, support for MathML is low and it is extremely verbose. 

For example, here is an equation $x=\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$, that is rendered in \TeX\ like so:

\begin{verbatim}
     x=\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\end{verbatim}

and rendered in MathML like this (source \href{http://en.wikipedia.org/wiki/MathML}{wikipedia}):

\begin{print}
\begin{verbatim}
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <apply>
    <eq></eq>
    <ci>x</ci>
    <apply>
      <frac></frac>
      <apply>
        <csymbol definitionURL="http://www.example.com/mathops/multiops.html#plusminus">
          <mo>±</mo>
        </csymbol>
        <apply>
          <minus></minus>
          <ci>b</ci>
        </apply>
        <apply>
          <power></power>
          <apply>
            <minus></minus>
            <apply>
              <power></power>
              <ci>b</ci>
              <cn>2</cn>
            </apply>
            <apply>
              <times></times>
              <cn>4</cn>
              <ci>a</ci>
              <ci>c</ci>
            </apply>
          </apply>
          <cn>0.5</cn>
        </apply>
      </apply>
      <apply>
        <times></times>
        <cn>2</cn>
        <ci>a</ci>
      </apply>
    </apply>
  </apply>
</math>
\end{verbatim}
\end{print}

\begin{interactive}
\begin{verbatim}
&lt;math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;&gt;
  &lt;apply&gt;
    &lt;eq/&gt;
    &lt;ci&gt;x&lt;/ci&gt;
    &lt;apply&gt;
      &lt;frac/&gt;
      &lt;apply&gt;
        &lt;csymbol definitionURL=&quot;http://www.example.com/mathops/multiops.html#plusminus&quot;&gt;
          &lt;mo&gt;&amp;PlusMinus;&lt;/mo&gt;
        &lt;/csymbol&gt;
        &lt;apply&gt;
          &lt;minus/&gt;
          &lt;ci&gt;b&lt;/ci&gt;
        &lt;/apply&gt;
        &lt;apply&gt;
          &lt;power/&gt;
          &lt;apply&gt;
            &lt;minus/&gt;
            &lt;apply&gt;
              &lt;power/&gt;
              &lt;ci&gt;b&lt;/ci&gt;
              &lt;cn&gt;2&lt;/cn&gt;
            &lt;/apply&gt;
            &lt;apply&gt;
              &lt;times/&gt;
              &lt;cn&gt;4&lt;/cn&gt;
              &lt;ci&gt;a&lt;/ci&gt;
              &lt;ci&gt;c&lt;/ci&gt;
            &lt;/apply&gt;
          &lt;/apply&gt;
          &lt;cn&gt;0.5&lt;/cn&gt;
        &lt;/apply&gt;
      &lt;/apply&gt;
      &lt;apply&gt;
        &lt;times/&gt;
        &lt;cn&gt;2&lt;/cn&gt;
        &lt;ci&gt;a&lt;/ci&gt;
      &lt;/apply&gt;
    &lt;/apply&gt;
  &lt;/apply&gt;
&lt;/math&gt;
\end{verbatim}
\end{interactive}

Pretty obvious why it didn't really catch on. However, probably a bigger problem with MathML is that it cannot be used to create diagrams \cite[686]{diagrams}.


MathML

Many people resorted to using third-party plug-ins in browsers such as Java applets within web pages to make them interactive or mathematical. These have numerous problems. The first is that the browser blocks these plug-ins these days as a security feature, and the install process is not always intuitive or successful. 


Other formats exist that are more promising, such as Wolfram's computable document format, however, you still have to download it! We need to look at Adobe's flash as a metaphor here. It's dead. Browsers are ready, are you?


Other formats

Organizations including the American Mathematical Society, Design Science, Inc., and the Society for Industrial and Applied Mathematics have provided major funding to produce what is known as MathJax. It is a way to create beautiful math on all browsers. It is a simple JavaScript library that you can include on your site, and you can type \LaTeX\ and it will handle all the rendering for you.


MathJax, however, only does math (although it does it extremely well!). There still needs to be additional work done to create diagrams and also general typesetting via \TeX\ syntax online.

MathJAX

So there are a number of JavaScript libraries out there that render amazing graphics. However, not a single one does for diagrams what MathJax does for math formulae. 


Even if they make it easy, things like D3, or paper.js, people that don't code the Web simply won't use even the simplest JavaScript libraries. That's why it's important to take an enthographic approach to design.


In the end, there are no solutions for blending mathematics and diagrams together using \TeX\ online. Seems as though instructors out there are still waiting for something that works:


``Either way, since mathematics is emphasized as an educational priority for many developed countries, one would think the longstanding woes of online mathematics instructors would shortly be solved. However, like the long overdue artificial intelligence (AI) revolution which never arrives, most online mathematics instructors still wait for a simple and convenient way to communicate two-way with their students in the very language of mathematics.'' \cite[6]{diagrams}


7 The Mathematical Web