Equation formatting

from Red Blob Games
29 Mar 2019
  1. Kalid Azad uses color for equations[1]
  2. Chris Olah uses tables for equations[2]

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

Email me, or tweet @redblobgames, or comment: