MDN Web Docs
Including stylesheet for MathML fonts at build time instead of inline in the docs source #260
-
|
Currently on MDN Web Docs we have a polyfill that is loaded by Yari if it determines that MathML is not supported in the current browser. Here is the code that does this.
Now, on a number of MathML pages we also have another polyfill embedded via the content itself. This is what an example will look like without the above CSS polyfill and font:
This is the same example with the second polyfill loaded:
The question then is, which of the two polyfills should we be using. Should we swap out the CSS and font face for the one loaded from @fred-wang or, remove the second polyfill and stick with the current polyfill in Yari. To be clear, if we decide to go with Fred's, we will update the component in Yari to use Fred's CSS and font as opposed to adding it in the content. Let me know your thoughts. Thanks. |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 5 replies
-
|
So to be clear, the inline stylesheet I inserted is not strictly speaking a polyfill, but just a stylesheet to load a Web font (Latin Modern Math) for MathML. IIUC, the CSS polyfill is only loaded when MathML is not supported by the browser (and the page contains MathML) per https://github.com/mdn/yari/blob/80a3a9876b41d903d678636d88cb6d84a100c7b2/client/src/document/mathml-polyfill/index.tsx#L26 It is based on a CSS polyfill I wrote for browsers not supporting MathML, but has additional rule to load a Web font (STIX Two Math): https://github.com/mdn/yari/blob/80a3a9876b41d903d678636d88cb6d84a100c7b2/client/src/document/mathml-polyfill/mathml.css#L5 I believe we want to provide a Web font for MathML in any case (either Latin Modern Math or STIX Two Math) as a fallback when the system does not have Web fonts pre-installed. The CSS polyfill on the other hand is only needed for browsers without MathML support and shouldn't be loaded for browsers that do support MathML. So I guess the right thing to do is to have:
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your feedback and suggestions here. This is valuable. |
Beta Was this translation helpful? Give feedback.
-
I renamed the discussion to reflect this, in case anyone is wondering :) |
Beta Was this translation helpful? Give feedback.
-
|
I think this makes sense. Currently, we have places like the following section on ```html hidden
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css"
/>
```
```html
<math display="block">
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mo>+</mo>
<mn>∞</mn>
</mrow>
</munderover>
</math>
```After including the CSS fonts in Yari at build time, this would be simpler to write as: ```html
<math display="block">
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mo>+</mo>
<mn>∞</mn>
</mrow>
</munderover>
</math>
```Note that it might be possible to detect pages that need this asset included via the page tags. |
Beta Was this translation helpful? Give feedback.
-
|
This sounds like a good plan to me:
I'm going to open an issue on yari for it |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
And mdn/yari#7620 |
Beta Was this translation helpful? Give feedback.
-
|
There's been a change that's landed recently for this: mdn/yari#7620 |
Beta Was this translation helpful? Give feedback.
-
|
Analysis for the
It seems none of them needs Latin Modern Math specifically and the page already uses The ones in |
Beta Was this translation helpful? Give feedback.
-
Just replying to myself here: the stylesheet for STIX Two Math is loaded by |
Beta Was this translation helpful? Give feedback.
This sounds like a good plan to me:
I'm going to open an issue on yari for it