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

Formula must be properly aligned by the base line.

The sum of *x* and *y*. The formula *E***=***mc*^{2}.

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

Sepecify spacing relative to the size of the font.

The formula *x***+***y*.

Status. The `ex`

, `em`

lengths solve the problem.

Vertical layout is needed for fractions and summations.

The formula
*x***=****−***x*2
.

The formula ∞∑*n***=**12^{n}.

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.

Fractions, the minus sign and equal should be aligned.

The formula
*x***=****−***x*2
.

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.

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.

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

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

The formula is
*x***=**
(
**−***x*2
)

The formula is 2**+**
3**·**4
1st

The formula is 2

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.

The formula is
*x***=**
(

)

The formula is*x***=**
(

)

1 | 0 |

0 | 1 |

The formula is

x=−x25
| 0 |

0 | 2^{n} |