math-script-level
and math-style
explainerThis 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
actual math-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 the
font-size
property but it could be more convenient to set the
math-script-level
(base, scripts, numerator/denominator) and
math-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 to math-style: display
, math-script-level: 2;
and
math-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)
and math-style
(whether we try to minimize
logical height).
In the TeX example
$$A^{A^A} + \sqrt[A]{A} + \frac{A+\frac{A}{A}}{A}$$
,
the A
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 this math-style
value even if most of its effect happens
in the layout and painting phase.
math-script-level
and math-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
and scriptlevel
attributes. Again, there are
complex interactions between these attributes, MathML elements and font-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 to
math-style
and math-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
).
displaystyle
and scriptlevel
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.displaystyle
attribute is implemented in WebKit using some custom
CSS-like inheritance. It could be rewritten to rely on math-style
instead.
The default scriptlevel
behavior is implemented but does take into account
user-specified attribute and does not interact with displaystyle
.
Relying on math-script-level
would allow a cleaner and more complete
implementation.displaystyle
and scriptlevel
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 with font-size
.math-style
propertySee https://mathml-refresh.github.io/mathml-core/#the-math-style-property
math-script-level
propertySee https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property
display
, displaystyle
and scriptlevel
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