math.css - HTML layout engine

An HTML layout engine for mathematics, using only a single CSS file.

If you want to see how it works, try editing the HTML source below.

You can use Unicode characters to write symbols in a UTF-8 encoded page, or HTML entities in any case.

OK, let's get started. Usual HTML tags should still work (except nested "p", weirdly), but there are new ones to define parts of your formula.

<description> Quadratic formula: </description> 
	x = <fraction>
			−b ± <root>b2 − 4ac</root>
			<over> 2a </over>
			</fraction>

Quite often you'll find there are multiple (and often shorter) ways of saying the same thing in math.css, so go ahead and choose the syntax and spacing that works for you:

<desc> Fundamental theorem of calculus: </desc> 
	f ′(x) = <space><lim>h→0</lim></space>
	<frac> f (x + h) − f (x) <over> h </over></frac>

All right, something a bit trickier: note that Chrome doesn't render the hat correctly! Those "from" and "to" tags can sit anywhere inside the integral; math.css will figure it out.

<text> Fourier transform: </text> 
	<hat>f</hat> (ξ) =
	<int> <from>-∞</from> <to>∞</to>
		f (x) e−2πixξ dx
	</int>

Nesting elements is as easy as X, M, L...

<desc> Standard deviation: </desc> 
	σ = <root>
		<frac>1<over>N</frac>
		<sum><from>i=1</from><to>N</to>
			(xi − μ)2
		</sum>
	</root>

And if you want to be really terse, you can do this. Now don't tell me you miss the LaTeX font..?

<txt> Schrödinger equation: </txt> 
	i ℏ <f><d/><o><d/>t</o></f> |<fn>Ψ</fn>(t)⟩
	= <hat>H</hat> |<fn>Ψ</fn>(t)⟩

And lastly, my personal favourite: Shannon's equation for information entropy. Perhaps this is the right time to mention that if you don't want to waste bandwidth on server fonts, you can use a locally-installed math font instead; but again, Chrome objects to the italics for some reason!

<desc> Information entropy: </desc> 
	<fn>H</fn>(X) =
	−<sum> <from>i=1</from> <to>n</to>
		<fn>P</fn>(xi)
		<log>2</log><fn>P</fn>(xi)
	</sum>

That's all, folks. Better documentation is on the to-do list. :)