[math] [css-fonts] Solution to mixing text and math fonts in a document

[fred-wang]

(Part of #5384 - MathML Core related CSS)

cc @litherum @jfkthame @drott @bkardell

This is an item to discuss for the next CSSWG Math meeting.

Documents containing equations use fonts for the text (e.g. STIX Two Text, Cambria, Latin Modern...) and a companion font for the math (e.g. STIX Two Math, Cambria Math, Latin Modern Math...). Obviously, the former fonts have usual italic/bold variants, glyphs and font features to write "normal" text while the latter has all the specialized features for rendering formulas (math symbols, operator stretching, layout parameters, etc).

In the ideal situation where one has total control on the environment (e.g. TeX systems, Microsoft Word on Windows), it can be ensured that a pair of such fonts is available and used to get beautiful rendering. This is not necessarily the case on the Web : Even if Web fonts can be used, most authors either intentionally want to use non-matching fonts (like their favorite text font + their favorite math font), or even worse don't provide any math font at all.

This has two consequences:

1. If font-family on the <math> tags is not set to one installed on the user's computer/device or provided via a web font, then the mathematical formula will render with a text font, resulting in poor rendering.

2. Even if font-family on the <math> tags is set to an available math font, this one may be different from the inherited font-family of the surrounding text, resulting in inconsistent font-size between text and inline math.

In order to solve 1., Firefox implements a mechanism similar to how it selects fonts for different languages (lang attribute), essentially claiming that <math> tags have an 'x-math' language and picking known math fonts from the user preference. WebKit instead just hardcodes some known math fonts in its MathML UA stylesheet. Chromium does not have any mechanism implemented yet.

Browsers have not implemented anything in order to solve 2, although it seems WebKit & Chromium have a similar adjustment mechanism when moving to a "monospace" family for example. MathJax also has a heuristic to perform adjustments via JavaScript measurements.

The MathML CG would like to find a cross-compatible CSS-based solutions to address these use cases:

For 1. it seems implementing font-family: math in browsers is the way to go, although there is some discussion about limiting generic families (see #4910). This would allow to make the default math font configurable by the users.

For 2. @faceless2 proposed extending font-size-adjust to compare the size against the font inherited from the parent could work?

[faceless2]

For 2, see https://github.com/mathml-refresh/mathml/issues/225

[astearns]

@fred-wang @faceless2 this week’s meeting is at the bad time for Europeans. Shall we plan on taking this up on January 13?

[faceless2]

13th certainly works better for me

[litherum]

Possibly related: #5539

[astearns]

OK, another attempt at getting to this in one of our long-form meetings. @fred-wang could you commit to discussing this on April 6th? @faceless2 @bkardell

[faceless2]

I have a meeting I can't skip at 1600-1700CEST and one I can if necessary at 1800-1900CEST (UTC+2). But I'm only on the periphery of this one, so please don't postpone on my account.

[astearns]

Looking at https://github.com/mathml-refresh/mathml/issues/225 I am not yet seeing consensus.