Annotated Formulas
Mathematical formulas often describe complex circumstances succinctly and precisely. Unfortunately, the symbols used to describe objects in them need to be learned in order to read them fluidly.
A technique we have employed in past Distill posts is to spatially arrange formulas so we can explain terms in them inline. Unlike a paragraph containing explanations for each symbol, this keeps the expression and its explanation spatially close, hopefully making it easier to understand for readers new to the notation. Even for well-known notation this can help interpret terms in a new light.
Here's a typical snippet from a paper:
While this is not bad at all, observe how distributed explanations and symbols actually are:
We work around this by laying out the formula with more space, allowing for inline explanations of individual terms:
Compare how much closer explanations now are to the symbols they explain:
A simple option may be to simply lay out the formulas in a graphical SVG editor. We had good experiences with Adobe Illustrator and Bohemian Coding's Sketch. Both offer free trials.
A pure web-technologies solution is to use CSS absolute positioning for laying out the formula. We have an example of this technique here.
CSS Grid is a new but already quite mature layout mode that allows a more traditional print-based grid model for CSS layout. We don't yet have a lot of experience using it for annotating formulas, but you can take a look at some early attempts here to decide if these work better for you.
The LaTeX package mathtools provides the \overbrace and \underbrace macros. See an example here, and find the official documentation in this PDF file. Our LaTeX renderer, Katex, supports these without specifying additional imports.
