MathML interactive examples?

[MrBrain295]

Chrome now has MathML support should there be interactive examples for it?

[schalkneethling]

@MrBrain295, I believe if it is feasible, we should. I am not sure what the polyfil situation is inside the iframe, but I would say we use feature detection and not render the example if MathML is not natively supported. We should show a message that it is not supported in the browser, but I would not polyfil it. @NiedziolkaMichal thoughts?

[NiedziolkaMichal]

I made a PR #1063 adding MathML support

[teoli2003]

I'm cc/ing @fred-wang for his opinion. My first glance: I think this could be a good addition to MDN.

[fred-wang]

Can someone explain to me what the "interactive examples" are? Some example in MDN?

[NiedziolkaMichal]

You can find them in plenty of JS/CSS/HTML pages

[teoli2003]

Yes, they allow readers to interactively test an example inside the page itself.

[fred-wang]

@NiedziolkaMichal So after mdn/bob#1063 I understand we need to do the same for all examples and then modify mdn/content to use the interative examples?

[NiedziolkaMichal]

Pretty much, but it's best to wait until the new version of BOB is actually deployed.

[fred-wang]

There are some discussions about the load of a CSS polyfill (for browsers without MathML support) as well as a stylesheet to use STIX Two Math for MathML content (some content will render incorrectly otherwise):

mdn/yari#7607
https://github.com/orgs/mdn/discussions/260

Currently, this is done for live sample here:
https://github.com/mdn/yari/blob/34c3a6fc8fc65b473b41b1901cc5d7e449dfd2c1/kumascript/src/live-sample.ts#L51

If we move to MathML interactive examples, then we should also consider keeping these two features. With the proposed change, I understand that the live preview is no longer working for browsers without MathML support (which I guess is fine). But more importantly, I'm not sure whether STIX Two Math is still loaded...

[NiedziolkaMichal]

@fred-wang This CSS could be added to interactive-example repository directly, together with individual examples. I think it's best to include it only when it's needed, so readers will know that usage of specialized font is not mandatory.

[fred-wang]

I believe this goes the other direction to what was decided in the discussions I mentioned, where people suggested to remove explicit inline insertion of the CSS. Also I would say that for MathML, the usage of specialized font is generally necessary if one wants decent rendering ; and it is often mandatory to make the examples correct. So if it's not added automatically, we'll probably have to include it explicitly almost everywhere...

[NiedziolkaMichal]

I see, thank you for your expertise. I still think it would be good to make users aware, that specialized font is being used. I propose the following solution:

• All MathML examples would have the CSS tab, with the following rule:

math {
    font-family: STIX Two Math;
}

and when the example uses mtext, .htmlmathparagraph .oldstylenumbers or *.calligraphic, additional rules would be added to CSS

• I think it would be best to leave @namespace out of the CSS since there won't be any collisions anyway, while it brings another feature that a user would need to understand.
• All @font-face would be always included in the background, so a user is unaware of how STIX Two fonts are loaded

When a user visits the example on a browser that doesn't support MathML, information about it is shown. In such a case, mspace.js would be unnecessary, right?

@fred-wang What do you think?

[fred-wang]

Adding

math {
  font-family: STIX Two Math;
}

to all examples sounds good to me. And I'm pretty sure the other selectors are not important for MDN (sometimes mtext, but that shouldn't make a big difference).

About how to handle browser without MathML support (polyfill or error message), I don't have strong opinion. I guess since interactive examples are supposed to show the rendering in the browser, using a polyfill is not that important (as opposed to when it's used in articles like https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix). But I'll let others decide...