Page MenuHomePhabricator

Missing table grid borders in Client side MathJax (check polyfills for SVG support)
Closed, ResolvedPublic10 Estimated Story Points

Description

https://www.mediawiki.org/wiki/Extension:Math/Native_MathML/Reported_Cases#New_cases_as_of_Aug_2025

<math>
\begin{array}{|c|c|c|}
\hline 
a_{11} & a_{12} & a_{13} \\ 
a_{21} & a_{22} & a_{23} \\ \hline
a_{31} & a_{32} & a_{33} \\ \hline 
\end{array}
</math>

Screenshot 2026-08-19 at 11.44.36.png (1,344×1,000 px, 135 KB)

As we convert from MathML core to MathJax, we had to use several polyfills for features not supported by MathML core (only in MathML full). Those polyfills have been tested with the MathJax CHTML rendering mode.

Now (after switching from CHTML to SVG rendering), the CSS classes are no longer considered.

Therefore, we should check all polyfills and find alternatives for those.

For example, in T377167, a polyfill is used to generate table grids. It basically uses the border property to make table grids visible. The SVG image still has those properties in the correct position, but they have no effect because the border property is not defined for the SVG element g.
Alternatives are:

  • Use other CSS properties that work on SVG elements
  • Generate different MathML for MathJax, i.e., the old menclosed which is still supported by MathJax (causes cache fragmentation as it requires a new cache for MathJax that is different from native)
  • Add lines to the SVG using SVG elements.
  • use CHTML rendering for tables

Polyfills are the following

  • mwe-math-vec
  • mwe-math-columnalign-[rl]
  • menclose
  • mwe-math-matrix-(right|left|top|bottom)

Related Objects

Event Timeline

https://www.mediawiki.org/wiki/Extension:Math/Native_MathML/Reported_Cases#New_cases_as_of_Aug_2025

<math>
\begin{array}{|c|c|c|}
\hline 
a_{11} & a_{12} & a_{13} \\ 
a_{21} & a_{22} & a_{23} \\ \hline
a_{31} & a_{32} & a_{33} \\ \hline 
\end{array}
</math>

Screenshot 2026-08-19 at 11.44.36.png (1,344×1,000 px, 135 KB)

Krinkle renamed this task from Check polyfills for SVG support to Missing table grid borders in Client side MathJax (check polyfills for SVG support).Wed, Aug 19, 6:46 PM
Krinkle triaged this task as High priority.

It's not entirely clear what a good solution would look like here. The lowest-risk approach is to undo the latest changes and generate a specific non-core MathML for MathJax, which would not render in Chrome. However, I don't like the idea of adding branches to the codebase.

@Physikerwelt If I understand correctly:

In Mathoid, MathJax v2 generates non-core MathML syntax, which it understands and turns into an SVG. This works in all browsers today.

If we would generate the same non-core syntax in MediaWiki MathML, then client-side MathJax v4 would understand it and likewise render fine in all browsers. But, only when MathJax is loaded. For Grade C browsers and/or people selecting the"MathML-only" preference, would see broken tables.

We can see what this would look like by making the hidden MathJax-server MathML visible, and indeed it is broken in Chrome. It's fine in Firefox. Safari isn't great (missing cell borders).

Screenshot 2026-08-20 at 14.11.53.png (1,764×1,629 px, 394 KB)

MediaWiki MathML currently uses the core MathML syntax, and this renders fine in all browsers today because we include helper classes like <mtd class="mwe-math-matrix-top mwe-math-matrix-left which we then target in CSS to add the borders.

How did this CSS help MathJax CHTML mode? Did MathJax copy over our custom classes and it the same CSS worked as-is? Or do we have a second thing specifically for this?

I generally expect MathJax to support more than the browser does. It seems in this case that is true in a way (it supports non-core syntax that the browsers don't), but it seems it is also true that there is a preferred MathML core syntax version of this that Firefox supports but MathJax doesn't yet. Is that true? If so, is there a reason MathJax doesn't support this yet?

@Krinkle, if you look in the DOM, you'll see that the current SVG image (generated from native MathML) also has the class="mwe-math-matrix-top mwe-math-matrix-left" set on the corresponding part of the SVG element. While I did not verify today, I remember that our custom CSS also affected the MathJax CHTML output. I played around with my browser and temporarily changed the CSS definition. By doing so, I was able to get something like a line next to individual elements, but it didn't look like a grid.
Note that FF and MathJax can render almost the same set of MathML 4.
Last year, when I was looking into filling the gaps between MathML4 and MathML4 I used the ideas from the Math working group's polyfills. However, with the advancement of LLM, the code size grew significantly https://github.com/w3c/mathml-polyfills/graphs/code-frequency. Currently, it is a bit hard to grasp the essence of what has been updated since I last visited. Do you know if we now have separate caches for native and MathJax rendering?

After looking into this in more detail, I think we can avoid generating separate server-side MathML or introducing a second cache for MathJax.

The current server output can remain MathML Core-compatible and use CSS classes for native rendering. Before MathJax processes this MathML, an mmlFilter can translate the helper classes back into the corresponding full MathML features.

For the table borders discussed here, the filter would translate mwe-math-matrix-(right|left|top|bottom) into rowlines, columnlines, and frame. MathJax supports these attributes and generates actual SVG lines for them. This should solve the problem that our current border CSS is copied to SVG <g> elements, where it has no effect.

The data flow would be approximately:

TeX -> cached MathML Core with helper classes -> mmlFilter -> full MathML -> MathJax SVG

This is also related to the remaining menclose validation error in T398653. MMLmenclose was deprecated in T389712 because it is not part of MathML Core, but it is still used for \cancel and \cancelto. We can remove <menclose> from the native output and use a Core-compatible CSS polyfill instead. The same mmlFilter can then reconstruct <menclose notation="..."> for MathJax.

I think we should develop both transformations together because they use the same mechanism. Before changing the generated output, I would first make the mmlFilter testable. It is currently an anonymous function inside ext.math.mathjax.js.

My proposed sequence is:

  • Extract the DOM transformations into a separate module and add Node tests for the mmlFilter.
  • Reuse the existing PHP reference cases. output would contain the native MathML Core representation, while an optional mathjax-output would contain the expected MathML after the filter.
  • Remove the deprecated MMLmenclose output as part of T398653 and reconstruct it for MathJax.
  • Translate the table border classes from this task into the full MathML table attributes supported by MathJax.

The PHP tests would continue to check TeX to native MathML, while the Node tests would read the same cases and check native MathML to MathJax MathML. Both test suites run in CI.

The current overview of MathML features requiring polyfills is https://github.com/w3c/mathml/issues/534. The discussion about adding menclose to MathML Core is https://github.com/w3c/mathml-core/issues/245.

Change #1329543 had a related patch set uploaded (by Physikerwelt; author: Physikerwelt):

[mediawiki/extensions/Math@master] Extract MathJax DOM filter into separate module

https://gerrit.wikimedia.org/r/1329543

Physikerwelt set the point value for this task to 10.Wed, Aug 26, 6:12 PM

Change #1329724 had a related patch set uploaded (by Physikerwelt; author: Physikerwelt):

[mediawiki/extensions/Math@master] Restore table borders for client-side MathJax

https://gerrit.wikimedia.org/r/1329724

Screenshot 2026-08-27 at 06.24.55.png (6,968×2,092 px, 1 MB)

Chrome, FF, Safari (somehow Safari renders the wide example too wide for the boundaries it computes)

Change #1329543 merged by jenkins-bot:

[mediawiki/extensions/Math@master] Extract MathJax DOM filter into a separate file

https://gerrit.wikimedia.org/r/1329543

Change #1334068 had a related patch set uploaded (by Krinkle; author: Physikerwelt):

[mediawiki/extensions/Math@wmf/1.47.0-wmf.17] Extract MathJax DOM filter into a separate file

https://gerrit.wikimedia.org/r/1334068

Change #1334068 merged by jenkins-bot:

[mediawiki/extensions/Math@wmf/1.47.0-wmf.17] Extract MathJax DOM filter into a separate file

https://gerrit.wikimedia.org/r/1334068

Mentioned in SAL (#wikimedia-operations) [2026-09-02T21:50:39Z] <krinkle@deploy1003> Started scap sync-world: Backport for [[gerrit:1334068|Extract MathJax DOM filter into a separate file (T435274)]], [[gerrit:1334070|Respect contextual binomial sizing (T434477 T418144 T401718)]], [[gerrit:1334032|Remove the last vestiges of $wgVirtualRestConfig (T436054)]]

Mentioned in SAL (#wikimedia-operations) [2026-09-02T21:54:57Z] <krinkle@deploy1003> krinkle: Backport for [[gerrit:1334068|Extract MathJax DOM filter into a separate file (T435274)]], [[gerrit:1334070|Respect contextual binomial sizing (T434477 T418144 T401718)]], [[gerrit:1334032|Remove the last vestiges of $wgVirtualRestConfig (T436054)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2026-09-02T22:04:53Z] <krinkle@deploy1003> Finished scap sync-world: Backport for [[gerrit:1334068|Extract MathJax DOM filter into a separate file (T435274)]], [[gerrit:1334070|Respect contextual binomial sizing (T434477 T418144 T401718)]], [[gerrit:1334032|Remove the last vestiges of $wgVirtualRestConfig (T436054)]] (duration: 14m 14s)

Change #1341890 had a related patch set uploaded (by Krinkle; author: Physikerwelt):

[mediawiki/extensions/Math@wmf/1.47.0-wmf.20] Restore table borders for client-side MathJax

https://gerrit.wikimedia.org/r/1341890

Before:

<math>
\begin{array}{|c|c|c|}
\hline 
a_{11} & a_{12} & a_{13} \\ 
a_{21} & a_{22} & a_{23} \\ \hline
a_{31} & a_{32} & a_{33} \\ \hline 
\end{array}
</math>

Screenshot 2026-08-19 at 11.44.36.png (1,344×1,000 px, 135 KB)

After:

Screenshot 2026-09-15 at 14.50.03.png (1,712×796 px, 215 KB)

Change #1329724 merged by jenkins-bot:

[mediawiki/extensions/Math@master] Restore table borders for client-side MathJax

https://gerrit.wikimedia.org/r/1329724

Change #1341890 merged by jenkins-bot:

[mediawiki/extensions/Math@wmf/1.47.0-wmf.20] Restore table borders for client-side MathJax

https://gerrit.wikimedia.org/r/1341890

Mentioned in SAL (#wikimedia-operations) [2026-09-15T15:44:43Z] <krinkle@deploy1003> anzx, krinkle: Backport for [[gerrit:1341890|Restore table borders for client-side MathJax (T435274)]], [[gerrit:1340558|lift IP cap for edit-a-thon /workshop (T437609 T437594 T437470)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2026-09-15T16:04:27Z] <krinkle@deploy1003> Finished scap sync-world: Backport for [[gerrit:1341890|Restore table borders for client-side MathJax (T435274)]], [[gerrit:1340558|lift IP cap for edit-a-thon /workshop (T437609 T437594 T437470)]] (duration: 24m 19s)