Swap out MathML stylesheet

[Rumyra]

Summary

Quite a bit of work happened recently on the MathML docs (thank you @fred-wang ), however the current MathML stylesheet used with the polyfill isn't as good as the one included with the examples.

We shouldn't really be including stylesheets with examples. A discussion was opened here https://github.com/orgs/mdn/discussions/260 to better understand how we can approach this.

The conclusion was:

So I guess the right thing to do is to have:

1. Load a stylesheet with STIX Two Math as a Web fonts (probably WOFF2 instead of OTF) for pages containing any tag.
2. Keep the existing MathML polyfill for browsers without MathML support (but remove the @font-face for STIX Two Math since that would be done in 1)
3. Remove any inline to https://fred-wang.github.io/MathFonts/

Content can cover 3. but it'd be great for 1. & 2. to be addressed

URL

https://github.com/mdn/content/blob/main/files/en-us/web/mathml/element/munderover/index.md?plain=1#L29-L34

Reproduction steps

n/a

Expected behavior

Better styling and ability to remove loaded stylesheets from content

Actual behavior

Included stylesheet

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Mac OS

Screenshot

See screenshots in discussion https://github.com/orgs/mdn/discussions/260

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[caugner]

Load a stylesheet with STIX Two Math as a Web fonts (probably WOFF2 instead of OTF) for pages containing any tag.

I have implemented this in #7620, but I don't see any change in Chrome/Firefox/Safari (on Mac OS). Is this font really necessary?

PS: However, I noticed that the Polyfill is not loaded in live samples, so I fixed that in #7621 by directly loading the polyfill from @fred-wang's GitHub page. It's not ideal and won't load the font, but at least the MathML live samples will work now.

[fred-wang]

@caugner mac OS ventura has STIX Two Math pre-installed, so you won't see any difference (nit: it might be good to add src: local(...) to avoid loading the woff2 fonts when already available on the system). For other systems, without proper math font some MathML formulas may render poorly.

[fred-wang]

Incidentally, my original comment was in https://github.com/orgs/mdn/discussions/260#discussioncomment-3866252 ; the word <math> was lost in copy & paste.

[caugner]

@fred-wang Thank you, i have now added the local src in #7620.

Currently, we only load the regular STIX Two Math font, but your mathfonts.css polyfill also load STIX Two Text in four variants (Regular/Bold/Italic/BoldItalic). Would you say we also need to load these on MDN?

PS: I have to admit, I'm not familiar with the | in the polyfill:

.htmlmathparagraph, m|mtext {
    font-family: STIX Two Text;
}
m|math {
    font-family: STIX Two Math;
}

[fred-wang]

@caugner Thanks.

STIX Two Math is important because it provides a way to draw stretchy fences, big integral, special metrics for math layout, etc However, not using STIX Two Text for mtext should be fine ( I believe it has the same look & feel as STIX Two Math anyway) so I don't think it's needed.

m|math and m|text selectors are for math and mtext in the MathML namespace, see the line @namespace m url('http://www.w3.org/1998/Math/MathML'); at the top of the file (MDN doc: https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace). I guess we can drop the m| prefix if you wish, it's very unlikely that an MDN page contains these elements in a non-MathML namespace.