\input{rdfa_helpers.def}
\input{style_helpers.def}
\subject{MathML}
\subject{MathJax}
\subject{KaTeX}
\subject{HTML5}
\subject{Browsers}
\subject{Rant}
\rights{\ccby}
\title{MathML on the Web -- Please!}
\summary{The artificial juggling of JavaScript snippets to get common sense, usable mathematical rendering needs to stop.}
\date{Sep 16, 2015}
\published{2015-09-16}
\maketitle
Today I merged a pull request for {\authorea} which introduced the following setup for equation editing, as an alpha feature for our RichText editor:
\begin{enumerate}
\item The ``status quo'' \mathjax renderer, displaying the mathematics on all "read-mode" article components.
\item A new \katex renderer, specifically loaded in the iframe of our editor widget. Why? Because loading MathJax twice is too slow for our show, but we still want our displayed richtext equations to be, well, rich.
\item An additional math renderer, part of our equation-specific editing widget, so that authors can also \textbf{input} formulas in an appealing richtext flow.\footnote{We also have an upcoming equation button palette to put the WYSIWYG cherry on our cake.} See the great demos by \mathquill for examples.
\end{enumerate}
You read that correctly - not one, not two, but \textbf{three separate math renderers on the same HTML page}, each of which different due to balancing on the trade-offs of performance, coverage and visualization.
I hear you cry:
\begin{quote}
-- Well, this is clearly horrible design, simplify and streamline it!
\end{quote}
Indeed! My thoughts exactly. But the \textbf{great solution}, the one that solves this problem not only for me, but for the \textbf{entire math-on-the-web developer ecosystem}, is not for me or my team to implement.
This renderer medley can be traced to a single root cause - the absence of ubiquitous \mathml support in modern browsers. If you are not familiar with MathML, it is a W3C and ISO standard and a core part of HTML5. MathML does a great job of providing a single language for representing mathematics in structured documents, especially web pages. But while we have that great language, we lack major browser implementations -- in fact only Firefox has \textbf{great} MathML support, and has long been the browser-lead in math support.
A different perspective tells us that we are just two browsers short of having the tide turn overwhelmingly towards native \mathml rendering. I am referring specifically to \chrome and \edge. Having native support would allow us -- the mortal developers interested in providing exciting and powerful math-enabled web applications -- to sleep calmly at night and work proudly at day. And hence my sincere plea to all major browser vendors:
\corepoint{Please, do the math.}
P.S. How is the native MathML solution better?
\begin{itemize}
\item \textbf{Best. Performance. Possible.}
Your browser will be capable to render MathML the moment it loads, just as it can CSS. No extra load times needed.
\item \textbf{The DOM will set you free}
As math-on-the-web developers, we need to select into and manipulate mathematical objects, just as all web developers need to manipulate forms and input fields. I want my cool math interactivity widget to be an easy drop-in for any webpage, just the same way that a jQuery widget is. And we can't have that without equations being a proper participant in the HTML DOM -- CSS would have never taken off if say \verb|| and \verb|| elements only existed for sites that had first loaded a third-party \verb|css.js| library.
\item \textbf{Out-of-the-box Accessibility}
Exposing the MathML source of an equation directly in its web page\footnote{which you can also do today if you manage to carefully jump through the right JavaScript hoops} will be the default state of any HTML5 web page. Math-to-speech and Braille adaptors can then simply use the raw HTML as-is.
\end{itemize}
P.P.S. If you are interested in showing your personal support for adding native MathML, add your vote and voice to the public issues:
\begin{itemize}
\item Edge MathML support: \url{https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508572-mathml}
\item Chrome MathML support: \url{https://code.google.com/p/chromium/issues/detail?id=152430}
\end{itemize}
Personally, I have joined an effort to promote MathML publicly and to remind of its many strong suits and far-reaching benefits to the web develpment ecosystem. You can visit our \href{https://www.mathml-association.org}{MathML Association} website, or follow us on Twitter at \href{https://twitter.com/mathml3}{@mathml3}.