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.

LaTeX Math L_o(p,\omega_o) = \int\limits_{\Omega} f_r(p,\omega_i,\omega_o) L_i(p,\omega_i) n \cdot \omega_i 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.

LaTeX Math \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

Gen­er­al­ized con­tin­ued frac­tion, Wikipedia

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

LaTeX Math 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

And ev­ery­thing can be col­ored just by putting CSS class­es around:

LaTeX Math 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.

Dis­crete Fouri­er trans­form § Pe­ri­od­ic­i­ty, Wikipedia

And now, fi­nal­ly, 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 LaTeX Math x_n by a lin­ear phase LaTeX Math e^{\frac{2\pi i}{N}n m} for some in­te­ger LaTeX Math m cor­re­sponds to a cir­cu­lar shift of the out­put LaTeX Math X_k : LaTeX Math X_k is re­placed by LaTeX Math X_{k-m} , where the sub­script is in­ter­pret­ed mod­u­lo LaTeX Math N (i.e., pe­ri­od­i­cal­ly). Sim­i­lar­ly, a cir­cu­lar shift of the in­put LaTeX Math x_n cor­re­sponds to mul­ti­ply­ing the out­put LaTeX Math X_k by a lin­ear phase. Math­e­mat­i­cal­ly, if LaTeX Math \{x_n\} rep­re­sents the vec­tor LaTeX Math \boldsymbol{x} then

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

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

and LaTeX Math \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