Equation formatting

 from Red Blob Games
29 Mar 2019

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

  1. Kalid Azad uses color for equations[1]
  2. Chris Olah uses tables for equations[2]
  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]
  8. An annotated equation from Andrew Alexander[9]
  9. Annotated equations in TeX[10]
  10. Andrew Head’s paper[11] on the topic
  11. Keenan Crane’s annotated equation[12] 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.
  12. Scratch A Pixel uses color for equations[13]
  13. Blog post about singular value decomposition[14] uses colors for equations and makes them match the colors in diagrams.

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

\(\frac{dR}{dt}\)=\(\alpha\)\(\cdot\)\(R\)\(-\)\(\beta\)\(\cdot\)\(R\)\(\cdot\)\(F\)
rate of change
of rabbits
isbirth ratetimesrabbitsminuskill ratetimesrabbitstimesfoxes

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

\(\frac{dR}{dt}\)=\(\alpha\)\(\cdot\)\(R\)\(-\)\(\beta\)\(\cdot\)\(R\)\(\cdot\)\(F\)
rate of change
of rabbits
birth raterabbitskill raterabbitsfoxes

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

\(\frac{dR}{dt}\)=\(\alpha\)\(\cdot\)\(R\)\(-\)\(\beta\)\(\cdot\)\(R\)\(\cdot\)\(F\)
rate of change
of rabbits
birth raterabbitskill raterabbitsfoxes

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

\( \frac{dR}{dt}\)\(=\)\( \alpha \cdot R\)\(-\)\( \beta \cdot R \cdot F\)
rate of changerabbits bornrabbits die

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[15]’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[16].

Email me , or tweet @redblobgames, or comment: