MathML interactive examples? #320
Replies: 8 comments 6 replies
-
|
@MrBrain295, I believe if it is feasible, we should. I am not sure what the polyfil situation is inside the |
Beta Was this translation helpful? Give feedback.
-
|
I made a PR #1063 adding MathML support |
Beta Was this translation helpful? Give feedback.
-
|
I'm cc/ing @fred-wang for his opinion. My first glance: I think this could be a good addition to MDN. |
Beta Was this translation helpful? Give feedback.
-
|
Can someone explain to me what the "interactive examples" are? Some example in MDN? |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Yes, they allow readers to interactively test an example inside the page itself. |
Beta Was this translation helpful? Give feedback.
-
|
@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? |
Beta Was this translation helpful? Give feedback.
-
|
Pretty much, but it's best to wait until the new version of BOB is actually deployed. |
Beta Was this translation helpful? Give feedback.
-
|
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 Currently, this is done for live sample here: 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... |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
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... |
Beta Was this translation helpful? Give feedback.
-
|
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:
math {
font-family: STIX Two Math;
}and when the example uses
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? |
Beta Was this translation helpful? Give feedback.
-
|
Adding to all examples sounds good to me. And I'm pretty sure the other selectors are not important for MDN (sometimes 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... |
Beta Was this translation helpful? Give feedback.
-
|
There's been some enhancements on the interactive example infra recently which should enable adding these more easily directly in mdn/content pages like: {{InteractiveExample("MathML Demo: <msup>")}}
```html interactive-example
<math display="block">
<msup>
<mi>X</mi>
<mn>2</mn>
</msup>
</math>
```Preview using This seems to work as-is, but it would be great to check / coordinate with engineering on adding them. There's some more context in https://github.com/orgs/mdn/discussions/782 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Chrome now has MathML support should there be interactive examples for it?
Beta Was this translation helpful? Give feedback.
All reactions