Using Typst to render equations on this blog

MathJax

MathJax advertises itself as a "JavaScript display engine for mathematics that works in all browsers", and would be the obvious solution. However, I do not want to use JavaScript unless absolutely necessary, so I decided not to use it.

What also put me off was the suggestion to pull the code from a CDN, and the fact that if I wanted to host it myself I would have to deal with the web development stack and I would rather not touch that even with a 10-foot pole.

I get nightmares by even thinking about it. It's terrible stuff.

LaTeX

The other obvious solution would be to use LaTeX, the tried and tested system for typesetting equations. It comes with its own problems, though. I can't really include a PDF in a post, and the same goes for PostScript, DVI, DjVu, or whatever else the LaTeX toolchain is capable of producing.

But what if I converted that PDF I got from LaTeX to SVG? That should work, because a web browser is perfectly capable of rendering SVG.

Yeah, right.

First I would have to write LaTeX and run pdflatex on it, but to start writing a LaTeX document you need to specify a \documentclass. What is the document class for "I just want to render an equation"? You could use the "minimal" class, I guess.

\documentclass{minimal}

Why guess? Because I checked how many packages I would need to install and wrangle to get it to work, and I decided to see what Typst would offer.

Typst

Here is what you need to get Typst to just render an equation by itself, on a minimal canvas:

#set text(white, 18pt)

#set page(

  width: auto,

  height: auto,

  fill: none,

  margin: 9pt,

)

$a^2 + b^2 = c^2$

That's it, nothing more is necessary.

First, you #set text() to choose text colour and size. I chose something matching the colour scheme of my blog, for obvious reasons.

Second, you #set page() to adjust a couple defaults, but it is all straightforward:

• set width and height to auto and Typst will size the page to fit the rendered text
• set fill to none and the page will be rendered with transparent background
• set margin to half the text size to have some space for superscripts

typst compile --format=svg foo.typst

Rendering your equations to an SVG file is similarly easy. You only need the Typst command, and nothing else. How great is this?!

Usability-wise, Typst wipes the floor with both LaTeX and MathJax so hard it is not even funny. I understand that LaTeX is decades old at this point, and can have its quirks and eccentricities, but it also means it had decades to arrive at a streamlined, no-bullshit pipeline. And yet, it has not arrived at it.

It is amazing how quickly Typst beat LaTeX at its own game, at least for all use-cases relevant to me. It was released in March 2023, so roughly three and a half years ago, and in that time managed to, for all practical purposes, reduce LaTeX from the ruling champion to a historical curiosity.

If that does not warrant respect, I don't know what does.

This blog

I have a custom static site generator hacked-up with GNU M4 and a couple shell scripts.

src/post/foo.html

src/post/foo.d/bar.typst

src/post/foo.d/cover.png

src/post/foo.d/style.css

When the blog gets rendered, the generator scans the directory with the posts and renders each file matching the post/*.html pattern. If there exists a .d directory, the drop-in files present there are also taken into account: a cover page, an optional post-specific stylesheet, and any extra media... like Typst sources or SVG images.

Right now, I render the equation files written in Typst manually instead of having the site generator do it automatically. I did not think automating it was worth the effort just for one post, given how easy it is to just create an ad-hoc entr-based watcher:

ls -1 *.typst | entr -c typst compile --format=svg /_

It is almost too easy with Typst.

Honorary mention: MathML

I considered using MathML since it is a browser built-in and would require absolutely no extra steps, but the syntax is atrocious (as is anything XML-based, to be honest). I only used it for the simplest cases, where it did not make sense to create a separate file for the equation, but I still wanted to get the "mathy" look.