This document proposes two new CSS properties math-style
and
math-script-level
controlling how the font-size
evolves inside
mathematical constructions. More generally math-style
may be used to indicate
to implementations of math layout whether
logical height should
be minimized. For further discussions
on this proposal see
math-script-level and math-style comments.
-
<div class="my-underover"><div>Base</div><div>Overscript</div><div>Underscript</div></div>
and.my-underover > :not(:first-child) { math-script-level: add(1); }
would scale down the font size in under and over scripts. -
In the previous example, one could do
<div style="math-script-level: 0;">Overscript</div>
to reset the font-size in the overscript back to the initial base size. -
<div class="my-fraction"><div>Numerator</div><div>Denominator</div></div>
and.my-fraction > * { math-script-level: auto; }
would scale down the font size in the numerator or denominator, depending on the actualmath-style
on the the fraction. -
The LaTeX formula
$$A^{A^A} + \sqrt[A]{A} + \frac{A+\frac{A}{A}}{A}$$
uses text of different sizes. One could style equivalent HTML nodes with thefont-size
property but it could be more convenient to set themath-script-level
(base, scripts, numerator/denominator) andmath-style
values (initially 'display' mode but 'inline' mode in inner constructions). -
Polyfills and native implementations can emulate MathML behavior such as
<mstyle displaystyle="true">...</mstyle>
,<mstyle scriptlevel="2">...</mstyle>
or<mstyle scriptlevel="+3">...</mstyle>
by mapping tomath-style: display
,math-script-level: 2;
andmath-script-level: add(3);
respectively.
-
Mathematical formulas are made of several nested constructions. Readers expect that each time you go deeper in the expressions (e.g. enter a superscript) text will be automatically scaled down. This is can be achieved by adding relative or absolute
font-size
rules on each relevant node, but that's a bit tedious and error-prone. -
The actual rules for the text size change are a bit complex, and involve concepts similar to
math-script-level
(how deep we are in the expression) andmath-style
(whether we try to minimize logical height). In the TeX example$$A^{A^A} + \sqrt[A]{A} + \frac{A+\frac{A}{A}}{A}$$
, theA
letter is scaled down when entering the superscripts but even faster when entering a root's prescript. Also it is scaled down when entering the inner fraction but not when entering the outer one. These cases on a basic example suggest that a standardized approach would be important to ensure interoperability. -
More generally, mathematical typesetting follows rules to decide whether math layout should try and minimize the logical height and this decision can change when going deeper in the expressions or by user request. In the previous example this affects whether we increase the
math-script-level
when entering fractions but there are more of them such as changing the layout of under/over scripts, reducing spacing or fraction's line thickness, etc Again, it's handy to use CSS for the inheritance and overriding of thismath-style
value even if most of its effect happens in the layout and painting phase. -
math-script-level
andmath-style
are purely stylistic features so it makes sense to have them integrated in the style system. -
These properties intend to implement the following MathML attributes:
display
,displaystyle
andscriptlevel
attributes. Again, there are complex interactions between these attributes, MathML elements andfont-size
. Hence relying on native CSS properties seems the proper way to implement it. -
These properties can be used to emulate TeX's
\displaystyle
,\textstyle
,\scriptstyle
, and\scriptscriptstyle
modes, they correspond tomath-style
andmath-script-level
as "display" and 0, "inline" and 0, "inline" and 1, and inline and 2, respectively. These are important use cases requested by math people. -
OpenType math fonts have values about how the script should scale down when going from script level 0 to script level 1 (
scriptPercentScaleDown
) or 2 (scriptScriptPercentScaleDown
).
- The
displaystyle
andscriptlevel
attributes are implemented in Gecko and Stylo via an internal CSS property. Actually, more features are implemented and maybe this is an opportunity to simplify things. - The
displaystyle
attribute is implemented in WebKit using some custom CSS-like inheritance. It could be rewritten to rely onmath-style
instead. The defaultscriptlevel
behavior is implemented but does take into account user-specified attribute and does not interact withdisplaystyle
. Relying onmath-script-level
would allow a cleaner and more complete implementation. displaystyle
andscriptlevel
attributes are tested in MathML WPT, Gecko and WebKit tests. Having these separate properties could allow to do pure CSS tests related to the interaction withfont-size
.
See https://mathml-refresh.github.io/mathml-core/#the-math-style-property
See https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property
See https://mathml-refresh.github.io/mathml-core/#attribute-display, https://mathml-refresh.github.io/mathml-core/#attribute-displaystyle and https://mathml-refresh.github.io/mathml-core/#attribute-scriptlevel