Math formulas in HTML

This article explain some of the difficulties to render formulas using solely HTML and css. We impose a condition that the HTML and css should be used in a natural. In particular, this means avoiding absolute positioning of elements and a deep control of the metrics of the fonts. We also avoid any usage of JavaScript.

The main objective of this document is to end up with a list of HTML/css improvement recomendations.

This is working progress

Baseline alignment

Formula must be properly aligned by the base line.

The sum of x and y. The formula E=mc2.

Status. Formulas that are represented as simple text are aligned automatically.

Proportional spacing

Sepecify spacing relative to the size of the font.

The formula x+y.

Status. The ex, em lengths solve the problem.

Vertical layout

Vertical layout is needed for fractions and summations.

The formula x=−x2 .
The formula ∞∑n=12n.

Status. The usage of Flexbox solves partially the problems.

Missing feature. The vertical-align style does not works as needed because numerical lengths have to be specified.

Center alignment

Fractions, the minus sign and equal should be aligned.

The formula x=−x2 .

Status. The usage of Flexbox solves partially the problems for fractions. Using well designed fonts for math, sum signs are well aligned with minus signs and equal signs.

Missing feature. The vertical-align style does not works as needed because numerical lengths have to be specified.

Vertical fit

Some decorators and accents like arrows, lines and roots requires that some vertical spacing are set to minimum

Missing feature. A way to do fitting should exist to independently set uppper and lower fitting.

Horizontal and vertical lines

Missing feature. This could be a particular case of stretchies.

Stretchy

Some symbols should be stretchable using css. The size will the same of the containing box.

The formula is x= ( −x2 )

The formula is 2+ 3·4 1st

Status. The stetchy feature is completely missing in css-HTML. In the above example, the light gray box is the parent container of the stetchy parenthesis. The stretchy css-attribute (unexistend in the current spec) will make the symbols (dark gray) expand to the size of the parent, light gray.

Missing feature. The stretchy attribute itself that stretches some symbols to the size of the containing box size.

<subsup> element

Multiscripts

Roots and square roots

Matrices

The formula is x= (
10
01
)

The formula is x= (
x=−x25 0
02n
)