# m.css math

*The* **fastest possible** *math rendering for the modern web.*

With latest advancements in web tech, the browser should no longer
*struggle* to render math. Yet it still does. Why *jump around*
several times until the math settles down? Why *stutter* for
*seconds* in a heavy JavaScript renderer from a third-party CDN
that gets shut down every once a while? Why *saturate* the network
with extra requests for every small snippet? You don’t need
*any of that*.

## Demo time!

Be sure to refresh your browser a couple of times to see how the rendering performs and that there is no blank space or jumping until the math appears. View the page source to verify that there is nothing extra being loaded to make this happen.

Try to resize the window — everything is possible, so why not have a different layout of long equations optimized for smaller screens?

—Generalized continued fraction, Wikipedia

Matrices render pretty well also:

—QR decomposition, Wikipedia

Now, some inline math — note the vertical alignment, consistent line spacing and that nothing gets relayouted during page load:

Multiplying by a

linear phasefor some integer corresponds to acircular shiftof the output : is replaced by , where the subscript is interpreted modulo (i.e., periodically). Similarly, a circular shift of the input corresponds to multiplying the output by a linear phase. Mathematically, if represents the vector thenif

then

and

—Discrete Fourier transform § Shift theorem, Wikipedia

The inline SVG follows surrounding text size, so you can use it easily in more places than just the main copy:

Everything can be colored just by putting CSS classes around:

—Discrete Fourier transform § Periodicity, Wikipedia

But it’s also possible to color only parts of the equation — with a color that matches page theme.

outgoing light · integral · BRDF · incoming light · normal attenuation

—Lighting: The Rendering Equation, rorydriscoll.com