You win, Javascript

2025-04-17

I don't dislike Javascript. BUT. It tends to be overused and bloated and antithetical to privacy.

I often find that I need to switch off Javascript in order to get a break from the exuberant madness of the modern Web. Why does everything have to move? Why do you have to shove videos in my face and play them automatically while I'm trying to read?

Anyway, I don't want this article to be a crusade on Javascript. However, I did want my website to be a Javascript-free-zone as much as possible. Unfortunately, I haven't found a simple way to write Math on the Web without using Javascript.

... which... makes no sense to me! The mathematical formulas aren't going to change, are they? They're static! Why do we use Javascript to render them in exactly the same way every time? Why don't we statically generate the HTML once and be done with it? Maybe I'm missing something, but I really feel like, in most cases, you really don't need to be parsing the formulas and generating the HTML dynamically every single time.

Fun fact, though: HTML does in fact support typesetting mathematical expressions, through a standard called MathML, which was later simplified to MathML Core. This article has a good, short-and-sweet introduction to the topic, if you're interested. So I tried to use MathML in some of my articles, like this one. Here's the source for the last formula:

<span class="math-center">
  <math>
    <semantics>
      <mrow>
        <mo>&rArr;</mo>
        <msub>
          <mi>x</mi>
          <mrow>
            <mi>k</mi>
            <mo>+</mo>
            <mn>1</mn>
          </mrow>
        </msub>
        <mo>=</mo>
        <mfrac><mn>1</mn><mi>r</mi></mfrac>
        <mo>(</mo>
        <mrow>
          <mo>(</mo>
          <mi>r</mi>
          <mo>-</mo>
          <mn>1</mn>
          <mo>)</mo>
        </mrow>
        <msub><mi>x</mi><mi>k</mi></msub>
        <mo>+</mo>
        <mfrac>
          <mi>n</mi>
          <msubsup>
            <mi>x</mi>
            <mi>k</mi>
            <mrow>
              <mi>r</mi>
              <mo>-</mo>
              <mn>1</mn>
            </mrow>
          </msubsup>
        </mfrac>
        <mo>)</mo>
      </mrow>
      <annotation>
        <!-- This is an "alternative representation", in case the browser
              cannot render the expression above. It doesn't get parsed -->
        \Rightarrow x_{k+1} = \frac{1}{r}\left((r-1)x_k + \frac{n}{x_k^{r-1}}\right)
      </annotation>
    </semantics>
  </math>
</span>

And here's what it looks like:

x k + 1 = 1r ( ( r - 1 ) xk + n x k r - 1 ) \Rightarrow x_{k+1} = \frac{1}{r}\left((r-1)x_k + \frac{n}{x_k^{r-1}}\right)

Now compare that to the more conventional TeX notation:

$$\Rightarrow x_{k+1} = \frac{1}{r}\left((r-1)x_k + \frac{n}{x_k^{r-1}}\right)$$

And how it's rendered by KaTeX:

$$\Rightarrow x_{k+1} = \frac{1}{r}\left((r-1)x_k + \frac{n}{x_k^{r-1}}\right)$$

Which one looks better, and which one is easier to write out?

Of course, KaTeX is able to statically render mathematical expressions in HTML, but no static site generator uses a Math rendering engine, as far as I know.

So yeah, I had to give up and accept that some pages on my website will use external resources and run Javascript. I'm placing my hope in the second quarter of the 21st century. I'm also willing to contribute to the effort, so please contact me if you're working on this and would like some help