Equation formatting

I wanted to try formatting, annotating, and colorizing equations. Inspiration:

1. Kalid Azad uses color for equations^[1]
2. Chris Olah uses layout for equations^[2] instead of color
3. Fred Hohman’s awesome list^[3] of examples and articles
4. Matt Hall talks about color + formatting of equations^[4], and followup post^[5]
5. A example of annotation^[6]
6. Matt Adereth blogged about color and formatting^[7]
7. Rowan Cockett has amazing equation formatting^[8] - mostly layout, a little bit of color
8. An annotated equation from Andrew Alexander^[9]
9. Annotated equations in TeX^[10]
10. Stuart Riffle’s discrete fft equation, which has been cited on some of these other pages, is no longer up but can be found on the wayback machine^[11]
11. Math Augmentation: How Authors Enhance the Readability of Formulas using Novel Visual Design Practices^[12] is a paper about this topic; see Figure 4 for a summary of the different types of annotations.
12. Keenan Crane’s annotated equation^[13] uses background colors for equations and foreground colors for annotations. I like this a lot, and the next time I want to annotate equations I want to try this. I think using background for the equation helps with the contrast, and also gives visual markers of which elements go together. I’d probably try less saturated colors for the backgrounds.
13. Scratch A Pixel uses color for equations^[14]
14. Blog post about singular value decomposition^[15] uses colors for equations and makes them match the colors in diagrams.
15. FFL^[16] is a CSS-like language for annotating equations with colors.
16. This diagram^[17] not only uses color for the expressions but also in the diagram
17. TikZ+Beamer supports arrows from annotations to parts of an equation^[18]
18. Piotr Migdał’s interactive equation coloring tool^[19] uses Markdown + LaTeX

 1  Using HTML tables#

Here I’m using both color and tables (using the table tag instead of css grid), with labels for the symbols:

This is highly distracting. Describing the basic symbols is overkill for an audience that’s reading about differential equations! Let’s drop those:

There are still too many colors. Let’s use color only for rabbits:

An alternative to describing the symbols is to describe the expressions. Chris Olah recommends left alignment and extra whitespace.

I haven’t quite figured out the TeX to make explanations appear underneath the parts of the formula. These don’t line up:

\[ \underbrace{\frac{dR}{dt}}_\text{rate of change} = \underbrace{\alpha \cdot R}_\text{rabbits born} - \underbrace{\beta \cdot R \cdot F}_\text{rabbits die} \]

Also see Shan Carter^[20]’s beautiful version, which has both labels for variables and labels for expressions, and also uses color! I haven’t tried to reproduce this yet. I think it uses CSS grid with borders on an empty cell to create the bracket.

[2021] Two years later, I spent some time looking at lotka-volterra^[21].

[2025] Here’s an example I made with Piotr’s tool:

 2  Using Emacs org-mode#

I have my Emacs org-mode configured to use KaTeX instead of MathJAX. My configuration is a bit difficult to detangle but you might be able to do this [untested]:

(setopt org-html-mathjax-template "
  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css\" integrity=\"sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X\" crossorigin=\"anonymous\" />
  <script defer=\"defer\" src=\"https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js\" integrity=\"sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4\" crossorigin=\"anonymous\"></script>
  <script defer=\"defer\" src=\"https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js\" integrity=\"sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa\" crossorigin=\"anonymous\"
          onload=\"renderMathInElement(document.body, {trust: true});\"></script>
")

I then added a custom link type [tested]:

;; [[class:foo][text]] will turn into <span class="foo">text</span>
;; and <class:foo text> will also turn into <span class="foo">text</span>
(org-link-set-parameters
 "class"
 :display 'full
 :face '(:foreground "purple")
 :export (lambda (path desc format)
           (unless desc
             (let ((split (s-split-up-to " " path 1 t)))
               (setq path (car split))
               (setq desc (cadr split))))
           (cl-case format
             (html (format "<span class=\"%s\">%s</span>" path desc))
             (latex (format "\\htmlClass{%s}{%s}" path desc))
             (otherwise path)))
 )

I can now write in org-mode:

$$
\htmlClass{energy}{E} = \htmlClass{mass}{m}\htmlClass{light}{c^2}
$$

<class:energy Energy> equals <class:mass mass>
times the <class:light speed of light> squared.

and apply styling for those html classes:

<style>
    .energy { color: oklch(50% 0.5 300); }
    .mass { color: oklch(50% 0.5 150); }
    .light { color: oklch(50% 0.5 345); }
</style>

and get this result:

\[ \htmlClass{energy}{E} = \htmlClass{mass}{m}\htmlClass{light}{c^2} \]

Energy equals mass times the speed of light squared.