\documentclass{article} \usepackage[affil-it]{authblk} \usepackage{graphicx} \usepackage[space]{grffile} \usepackage{latexsym} \usepackage{textcomp} \usepackage{longtable} \usepackage{tabulary} \usepackage{booktabs,array,multirow} \usepackage{amsfonts,amsmath,amssymb} \providecommand\citet{\cite} \providecommand\citep{\cite} \providecommand\citealt{\cite} \usepackage{url} \usepackage{hyperref} \hypersetup{colorlinks=false,pdfborder={0 0 0}} \usepackage{etoolbox} \makeatletter \patchcmd\@combinedblfloats{\box\@outputbox}{\unvbox\@outputbox}{}{% \errmessage{\noexpand\@combinedblfloats could not be patched}% }% \makeatother % You can conditionalize code for latexml or normal latex using this. \newif\iflatexml\latexmlfalse \AtBeginDocument{\DeclareGraphicsExtensions{.pdf,.PDF,.eps,.EPS,.png,.PNG,.tif,.TIF,.jpg,.JPG,.jpeg,.JPEG}} \usepackage[english]{babel} \usepackage{framed} \usepackage{latexsym} \usepackage[utf8]{inputenc} \usepackage{textcomp} \usepackage{multirow} \usepackage{multicol} \usepackage{longtable} \usepackage{booktabs} \usepackage{fullpage} \usepackage{xspace} \usepackage{listings} \usepackage{pifont} \lxRDFaPrefix{dc}{http://purl.org/dc/elements/1.1} \def\subject#1{\lxRDF[#1]{property=dc:subject}} \def\summary#1{\lxRDF[#1]{property=dc:description}} \def\published#1{\lxRDF[#1]{property=dc:created}} \def\rights#1{\lxRDF[#1]{property=dc:rights}} \def\mirror#1{\lxRDF[#1]{property=dc:isVersionOf}} \def\ccby{http://creativecommons.org/licenses/by/4.0/} % \def\corepoint#1{\begin{center}\bf\colorbox{yellow}{#1% % }\end{center}} \def\corepoint#1{\begin{center}\begin{framed}\begin{quote}{#1% }\end{quote}\end{framed}\end{center}} \def\yes{$\checkmark$} \def\no{$\times$} \def\latexml{\href{http://dlmf.nist.gov/LaTeXML}{LaTeXML}\xspace} \def\pandoc{\href{http://johnmacfarlane.net/pandoc/}{Pandoc}\xspace} \def\authorea{\href{https://www.authorea.com}{Authorea}\xspace} \def\planetmath{\href{http://planetmath.org}{PlanetMath}\xspace} \def\xelatex{\href{https://en.wikipedia.org/wiki/XeTeX}{XeLaTeX}\xspace} \def\latex{\href{https://en.wikipedia.org/wiki/LaTeX}{\LaTeX}\xspace} \def\mathjax{\href{http://mathjax.org/}{MathJax}\xspace} \def\katex{\href{https://khan.github.io/KaTeX/}{KaTeX}\xspace} \def\chrome{\href{http://www.google.com/chrome/}{Chrome}\xspace} \def\edge{\href{http://www.microsoft.com/en-us/windows/microsoft-edge}{Edge}\xspace} \def\mathquill{\href{http://mathquill.com/}{MathQuill}\xspace} \def\mathml{\href{http://www.w3.org/Math/}{MathML}\xspace} \lstset{ % backgroundcolor=\color{white}, % choose the background color basicstyle=\footnotesize, % size of fonts used for the code breaklines=true, % automatic line breaking only at whitespace captionpos=b, % sets the caption-position to bottom commentstyle=\color{OliveGreen}, % comment style keywordstyle=\color{BlueViolet}, % keyword style stringstyle=\color{black}, % string literal style language=[AlLaTeX]TeX, % Set your language (you can change the language for each code-block optionally) frame=lrtb, % xleftmargin=\fboxsep, % xrightmargin=-\fboxsep, % moretexcs={lstset,color,colorlet, cellcolor, newcolumntype, columncolor, rowcolor, multirow, xspace, LaTeX, TeX}, } \def\onlyHTML#1{\iflatexml #1\fi} \def\onlyPDF#1{\iflatexml\else #1\fi} \begin{document} \title{MathML on the Web -- Please!} \author{Deyan Ginev} \affil{Affiliation not available} \date{\today} \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: \hrule \begin{center} \textbf{\Large Please, do the math.} \end{center} \hrule %\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|