Mathematics without LaTeX

2019-11-19 — Invalid Date

Wherein Various Tools for Rendering Mathematical Notation in HTML Are Surveyed, With Client-Side JavaScript Libraries Such as MathJax and KaTeX Distinguished From Server-Side Pre-Rendering Approaches

compsci
computers are awful
faster pussycat
LaTeX
typography
UI
Figure 1

If I just want equations, I don’t need TeX-the-software, just TeX-the-mathematical-markup. Lots of things can render TeX math. Which tools work depends on what kind of document I’m working with. In HTML documents, there are libraries such as MathJax and KaTeX that will hunt down math and render it.

For other markup formats, it can be complicated. There are many preferred syntax choices for markdown. In fact, too many, all with incompatible syntax, natch. The de facto standard IMO is whatever pandoc supports. pandoc is what I usually use for turning my markdown+math into various documents (including, for example, parts of this blog).

🚧TODO🚧 clarify: I should probably say what I mean by rendering and inlining, because it is, as with many things relating to the internet infrastructure, not quite obvious.

1 MathJax

MathJax allows us to put LaTeX equations online easily without bothering with the rest of the LaTeX infrastructure.

tl;dr

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>
</head>
<body>
<p>
  When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>

MathJax v2 is slow and heavy but powerful. The complete rewrite for the version 3 series looks more nimble but is currently missing stuff I use on this blog, specifically, Automatic Line Breaking, which will not arrive soon. Also, because the recommended invocation has changed it isn’t necessarily seamless to upgrade between versions, and many platforms don’t in practice support v3 yet.

🤓pro tip: If I install the libjs-mathjax package under Ubuntu, I have all the (hefty) MathJax libraries available in /usr/share/javascript/mathjax/ for offline use.

🤓pro tip: There are browser extensions to automatically inject LaTeX math rendering into websites, e.g. TeX All the Things (source).

🤓pro tip: Double-struck/blackboard numerals require a hack in mathjax 2 at the moment, so that $\unicode{x1D7D8}\unicode{x1D7D9}$ gives us \(\unicode{x1D7D8}\unicode{x1D7D9}\).

2 KaTeX

KaTeX is a faster competitor to MathJax, but is not yet as widely supported. KaTeX even eliminated another pain point, having supported macros since 0.10.rc1. We couldn’t define macros inline before, which was tedious because macros are ubiquitous in real mathematics work. Now we can either inject them via config, or use the esoteric low-level \gdef to get LaTeX-like behaviour, since \renewcommand exists but doesn’t persist between equations, which makes it pointless for anything except prototyping individual macro definitions. KaTeX support of maths markup is not as complete as MathJax. In particular

  • I miss the split environment.
  • You can’t put math markup inside \text{}

3 Inlined/server side HTML mathematics

Both MathJax and KaTeX are eventually slow if I have enough equations in a document — MathJax gets slow sooner than KaTeX, but neither scales to the documents I write as a mathematician. The Javascript magic takes longer and longer to hunt down all the LaTeX in the page and massage it into something that looks like mathematics. Ideally I want something that outputs the target HTML (say) document with all the mathematics already rendered into the appropriate symbols, rather than needing to mess around with a complicated post hoc multi-phase javascript-based rendering procedure. A few tools attempt to do this.

plasTeX, above, is one, and seems vibrant (?).

bookish is a project by parser nerd Terrence Parr which, like my latex_fragment, translates TeX markup to SVG, but in addition works out how to align the SVG with text correctly via herculean effort.

This approach is shared with Daan Leijen’s Madoko (introductory paper), which does math rendering in PDF or HTML as embedded SVG.

Both these last 2 projects took the unusual step of not using the de facto standard for markdown/academia, pandoc, in favour of implementing their own new engines, which makes them suspiciously niche.

Amazingly, despite pandoc already employing a somewhat obscure academic functional language (Haskell), Madoko chose an even more obscure academic functional language, koka. At least this one compiles to javascript, so I guess it’s not totally alien territory. Anyway, it also includes some nifty publish-to-the-web features, and citation support, so maybe we don’t care about this obscurity.

There is another school of methods for rendering mathematics in HTML — one that notes we can take a javascript mathematics engine and do all the complicated transformations and calculations that it would normally do on the server without a browser.

Which tools can do this magic? Which of those can integrate with my workflow? Unclear. But here are some examples spotted in the wild:

  • Tex math rendering in R via katex (may soon be in blogdown)

    Converts tex-style math expressions to html and mathml for use in manual pages or markdown documents. The conversion is done in R using V8 (“server-side”), hence the resulting fragment can be inserted into an HTML document without the need for a JavaScript library like MathJax. Only the katex.css style file is required in the final html document.

  • pelican-latex-prerender.

  • MathJax-node-page which comes with a CLI mjpage which will pre-render HTML for you — it even claims to render math as SVG too, through forbidden magic into which it is best not to enquire too closely.

  • MathMD “is a simple npm package with a CLI that compiles a file written in Markdown with LaTeX expression into a single HTML file.”

  • Wikipedia aims to leverage this approach via their mathoid project, but I haven’t seen that widely deployed yet (?)

There are some full-pipeline tools which use JavaScript math rendering. The one that looks shiniest is ReLaXed, which also makes the case for their take on this approach targeting PDFs

Many of us prefer markup languages (Markdown, LaTeX, etc.) to GUI document-editors like MS Office or Google Docs. This is because markup languages make it easier to quickly write documents in a consistent style.

However, Markdown is limited to the title/sections/paragraphs structure, and LaTeX has obscure syntax and errors that also make it difficult to stray from the beaten track.

On the other hand, web technologies have never looked so good.

  • Beautiful CSS frameworks make sure your documents look clean and modern.
  • There are JavaScript libraries for pretty much anything: plotting, highlight code, rendering equations…
  • Millions of people (and growing) know how to use these.
  • Shorthand languages like Pug and SCSS are finally making it fun to write HTML and CSS.
  • (Headless) web browsers can easily turn web documents into PDF, on any platform.

ReLaXed is an attempt at finding the most comfortable way to leverage this for desktop PDF creation.

However, I need citations in my workflow, and it’s not immediately clear how I would inject those into such an end-to-end solution, at least not without writing yet another plugin — however, possibly Zotero could help with its HTML citation reports or maybe one of the word processor plugins supports HTML documents? It merits investigation. Not by me.

4 LaTeX.js

This is a LaTeX-to-HTML5 translator written in pure JavaScript using something called PEG.js. It aims to be a LaTeX-compatible rendering layer that parses LaTeX and generates DOM/HTML directly, with CSS to mimic LaTeX layout. It doesn’t cover absolutely everything in the TeX ecosystem, but looks kinda alluring.

5 TexLive.js

One level weirder again, a relatively complete port of the whole TeXLive stack. It is so complete that I fear it no longer counts as “LaTeX-free” mathematics, but it is so impressive that I can’t not mention it. AFAICT it runs in the browser, but then outputs PDF?

6 Mathcha

Mathcha - Online Math Editor is a mathematics-augmented virtual whiteboard that imports/exports LaTeX.

7 plasTeX

plasTeX / source

is a LaTeX document processing framework written entirely in Python. It currently comes bundled with an XHTML renderer (including multiple themes), as well as a way to simply dump the document to a generic form of XML. Other renderers can be added as well and are planned for future releases…

plasTeX differs from other tools like LaTeX2HTML, TeX4ht, TtH, etc in that the parsing and rendering of the document are completely separated. This separation makes it possible to render the document in multiple output formats.

It is somewhat active, and has real users, such as the collaborative textbooks stacks and kerodon.

7.1 Gerby

Gerby, a plasTeX fork, looks to be somewhere between a new markup language and an HTML presentation tool; it generates a large indexed website from a LaTeX document.

If you have a LaTeX document which

  • is large (probably several hundreds of pages at least)
  • is regularly updated
  • needs to be externally referenced often

you will run into the problem that

  • large PDFs are not easily navigable
  • PDFs of any size are not very searchable
  • the internal numbering changes often, making external references outdated

Gerby addresses these problems by providing an online tag-based view, instead of just having a big PDF. Gerby is tailored towards making large online textbooks and reference works more accessible.

8 Mathquill

mathquill is a real-time equation editor using LaTeX syntax plus the mouse to give a Mathematica/MS Word-like input experience.

MathQuill is an open source formula editor for the Web…

MathQuill was born of a need to communicate math. The creators,… used LaTeX for projects together, but struggled to collaborate online once they were apart. They wanted a tool to both write and read math without resorting to ugly flat text or more cumbersome conventions.

… Today, MathQuill is used in educational software, math visualizations, collaborative editors, and more.

Source here indicates that it is intermittently active.

9 Other online editors

Various.

10 MathML

Native web rendering of mathematics is provided by MathML, but it is supported, more or less, only in Firefox and Safari, and it’s also an ugly syntax to write by hand. It’s more of a lingua franca for translating mathematical markup between equation editors and browsers, which might be displayed by complicated browser-specific logic that I do not wish to know about. Unless this is more widely adopted I won’t be investigating it for my own use, and even less so direct use.

There are utils to convert LaTeX math to MathML, e.g. Texzilla, or LaTeXML, which I have not tried.

The latter seems to be what drives the following magic:

Take any arxiv url, e.g. https://arxiv.org/pdf/2112.13029.pdf and replace x with 5

https://ar5iv.org/pdf/2112.13029.pdf This forwards you to an HTML5 page that does the right thing https://ar5iv.labs.arxiv.org/html/2112.13029

11 But why can’t the whole internet be LaTeX?

Why not indeed. Just for my curiosity, could you tell me: are you a tenured academic?

We can make an HTML document look like a LaTeX document at least using LaTeX.css.

This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document. Write semantic HTML, add <link rel="stylesheet" href="https://latex.now.sh/style.css"> to the <head> of your project and you are good to go. The source code can be found on GitHub at https://github.com/vincentdoerig/latex-css.

This will probably improve your chance of getting hired at a sufficiently reactionary maths department.