m.css math

The fastest pos­si­ble math ren­der­ing for the mod­ern web.

With lat­est ad­vance­ments in web tech, the brows­er should no longer strug­gle to ren­der math. Yet it still does. Why jump around sev­er­al times un­til the math set­tles down? Why stut­ter for sec­onds in a heavy JavaScript ren­der­er from a third-par­ty CDN that gets shut down ev­ery once a while? Why sat­u­rate the net­work with ex­tra re­quests for ev­ery small snip­pet? You don’t need any of that.

{\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 brows­er a cou­ple 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 ver­i­fy that there is noth­ing ex­tra be­ing load­ed to make this hap­pen.

Try to re­size the win­dow — ev­ery­thing is pos­si­ble, so why not have a dif­fer­ent lay­out of long equa­tions op­ti­mized for small­er 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, Wikipedia

Ma­tri­ces ren­der pret­ty well al­so:

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­po­si­tion, Wikipedia

Now, some in­line math — note the ver­ti­cal align­ment, con­sis­tent line spac­ing and that noth­ing gets re­lay­out­ed dur­ing page load:

Mul­ti­ply­ing x_n by a lin­ear phase e^{\frac{2\pi i}{N}n m} for some in­te­ger m cor­re­sponds 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­pret­ed mod­u­lo N (i.e., pe­ri­od­i­cal­ly). Sim­i­lar­ly, a cir­cu­lar shift of the in­put x_n cor­re­sponds to mul­ti­ply­ing the out­put X_k by a lin­ear phase. Math­e­mat­i­cal­ly, if \{x_n\} rep­re­sents 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 Fouri­er trans­form § Shift the­o­rem, Wikipedia

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

Ev­ery­thing can be col­ored just by putting CSS class­es 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 Fouri­er trans­form § Pe­ri­od­ic­i­ty, Wikipedia

But it’s al­so pos­si­ble to col­or on­ly parts of the equa­tion — with a col­or that match­es 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­te­gral · BRDF · in­com­ing light · nor­mal at­ten­u­a­tion

Light­ing: The Ren­der­ing Equa­tion, ro­ry­driscoll.com