m.css math

The fast­est pos­sible math ren­der­ing for the mod­ern web.

With latest ad­vance­ments in web tech, the browser should no longer struggle to render math. Yet it still does. Why jump around sev­er­al times un­til the math settles down? Why stut­ter for seconds in a heavy JavaS­cript ren­der­er from a third-party CDN that gets shut down every once a while? Why sat­ur­ate the net­work with ex­tra re­quests for every small snip­pet? You don’t need any of that.

See the demo
don’t worry,
it’s already loaded
{\color{m-primary} L_o (\boldsymbol{x}, \omega_o)} = {\color{m-danger}\int\limits_{\Omega}} {\color{m-warning} f_r(\boldsymbol{x},\omega_i,\omega_o)} {\color{m-success} L_i(\boldsymbol{x},\omega_i)} {\color{m-info} ( \omega_i \cdot \boldsymbol{n})} {\color{m-danger} \operatorname d \omega_i}

Demo time!

Be sure to re­fresh your browser a couple of times to see how the ren­der­ing per­forms and that there is no blank space or jump­ing un­til the math ap­pears. View the page source to veri­fy that there is noth­ing ex­tra be­ing loaded to make this hap­pen.

Try to res­ize the win­dow — everything is pos­sible, so why not have a dif­fer­ent lay­out of long equa­tions op­tim­ized for smal­ler screens?

\pi = \cfrac{4} {1+\cfrac{1^2} {2+\cfrac{3^2} {2+\cfrac{5^2} {2+\ddots}}}} = \sum_{n=0}^\infty \frac{4(-1)^n}{2n+1} = \frac{4}{1} - \frac{4}{3} + \frac{4}{5} - \frac{4}{7} +- \cdots
\begin{array}{rcl} \pi &=& \cfrac{4} {1+\cfrac{1^2} {2+\cfrac{3^2} {2+\cfrac{5^2} {2+\ddots}}}} = \sum_{n=0}^\infty \frac{4(-1)^n}{2n+1} \\ &=& \frac{4}{1} - \frac{4}{3} + \frac{4}{5} - \frac{4}{7} +- \cdots \end{array}

—Gen­er­al­ized con­tin­ued frac­tion, Wiki­pe­dia

Matrices render pretty well also:

R = \begin{pmatrix} \langle\mathbf{e}_1,\mathbf{a}_1\rangle & \langle\mathbf{e}_1,\mathbf{a}_2\rangle & \langle\mathbf{e}_1,\mathbf{a}_3\rangle & \ldots \\ 0 & \langle\mathbf{e}_2,\mathbf{a}_2\rangle & \langle\mathbf{e}_2,\mathbf{a}_3\rangle & \ldots \\ 0 & 0 & \langle\mathbf{e}_3,\mathbf{a}_3\rangle & \ldots \\ \vdots & \vdots & \vdots & \ddots \end{pmatrix}.

—QR de­com­pos­i­tion, Wiki­pe­dia

Now, some in­line math — note the ver­tic­al align­ment, con­sist­ent line spa­cing and that noth­ing gets re­lay­outed dur­ing page load:

Mul­tiply­ing x_n by a lin­ear phase e^{\frac{2\pi i}{N}n m} for some in­teger m cor­res­ponds to a cir­cu­lar shift of the out­put X_k : X_k is re­placed by X_{k-m} , where the sub­script is in­ter­preted mod­ulo N (i.e., peri­od­ic­ally). Sim­il­arly, a cir­cu­lar shift of the in­put x_n cor­res­ponds to mul­tiply­ing the out­put X_k by a lin­ear phase. Math­em­at­ic­ally, if \{x_n\} rep­res­ents the vec­tor \boldsymbol{x} then

if \mathcal{F}(\{x_n\})_k=X_k

then \mathcal{F}(\{ x_n\cdot e^{\frac{2\pi i}{N}n m} \})_k=X_{k-m}

and \mathcal{F}(\{x_{n-m}\})_k=X_k\cdot e^{-\frac{2\pi i}{N}k m}

—Dis­crete Four­i­er trans­form § Shift the­or­em, Wiki­pe­dia

The in­line SVG fol­lows sur­round­ing text size, so you can use it eas­ily in more places than just the main copy:

The \tau mani­festo
they say \pi is wrong

Everything can be colored just by put­ting CSS classes around:

X_{k+N} \ \stackrel{\mathrm{def}}{=} \ \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} (k+N) n} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} \underbrace{e^{-2 \pi i n}}_{1} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} = X_k.
\begin{array}{rcl} X_{k+N} & \ \stackrel{\mathrm{def}}{=} \ & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} (k+N) n} \\ & = & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} \underbrace{e^{-2 \pi i n}}_{1} \\ & = & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} = X_k. \end{array}

—Dis­crete Four­i­er trans­form § Peri­od­icity, Wiki­pe­dia

But it’s also pos­sible to col­or only parts of the equa­tion — with a col­or that matches page theme.

{\color{m-primary} L_o (\boldsymbol{x}, \omega_o)} = {\color{m-danger}\int\limits_{\Omega}} {\color{m-warning} f_r(\boldsymbol{x},\omega_i,\omega_o)} {\color{m-success} L_i(\boldsymbol{x},\omega_i)} {\color{m-info} ( \omega_i \cdot \boldsymbol{n})} {\color{m-danger} \operatorname d \omega_i}
{\color{m-primary} L_o (\boldsymbol{x}, \omega_o)} = {\color{m-danger}\int\limits_{\Omega}} {\color{m-warning} f_r(\boldsymbol{x},\omega_i,\omega_o)} {\color{m-success} L_i(\boldsymbol{x},\omega_i)} {\color{m-info} ( \omega_i \cdot \boldsymbol{n})} {\color{m-danger} \operatorname d \omega_i}

out­go­ing light · in­teg­ral · BRDF · in­com­ing light · nor­mal at­ten­u­ation

—Light­ing: The Ren­der­ing Equa­tion, rory­driscoll.com