I wanted to try formatting equations. Inspiration:

- Kalid Azad uses color for equations
^{[1]} - Chris Olah uses tables for equations
^{[2]} - Matt Hall talks about color + formatting of equations
^{[3]} - A formatting example
^{[4]} - Matt Adereth blogged about color and formatting
^{[5]} - Rowan Cockett has amazing equation formatting
^{[6]} - An annotated equation from Andrew Alexander
^{[7]}

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 | is | birth rate | times | rabbits | minus | kill rate | times | rabbits | times | foxes |

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 rate | rabbits | kill rate | rabbits | foxes |

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 rate | rabbits | kill rate | rabbits | foxes |

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 change | rabbits born | rabbits 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^{[8]}’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.