Rendering problem with MathJax tables in cards

Hi everyone,
since I started using Anki, I’ve encountered some rendering problems, specifically when creating tables with MathJax in my flashcards.
There’s a weird behavior when editing them and I can’t figure out why it happens.
I have the same problem both on my PC and my laptop (W11, same Anki latest version).

The best way to explain this bug is with an example table like this one:

\begin{array}{|ccc|c|}
\hline
A & B & C & Z \\
\hline
0 & 0 & 0 & 0 \\
0 & 0 & 1 & 1 \\
0 & 1 & 0 & 0 \\
0 & 1 & 1 & 1 \\
1 & 0 & 0 & 0 \\
1 & 0 & 1 & 0 \\
1 & 1 & 0 & 1 \\
1 & 1 & 1 & 0 \\
\hline
\end{array}

Now, if I view this card in the Anki editor, it shows just a big rectangle (filled in white/black depending on the theme), but when I preview or revise the flashcard, the table renders correctly.
The only way I found to visualize the content of the MathJax table (in the editor) is to remove at least one of the external borders, so either “|” in the array or “\hline” in the table content.
So for example, this would render in the editor correctly (but without external borders):

\begin{array}{ccc|c}

A & B & C & Z \\
\hline
0 & 0 & 0 & 0 \\
0 & 0 & 1 & 1 \\
0 & 1 & 0 & 0 \\
0 & 1 & 1 & 1 \\
1 & 0 & 0 & 0 \\
1 & 0 & 1 & 0 \\
1 & 1 & 0 & 1 \\
1 & 1 & 1 & 0 \\

\end{array}

This behavior occurs on any MathJax table with an external border.

I’m using this Anki setup:

  • Version: 24.11 (d678e393)
  • Python: 3.9.18
  • Qt: 6.6.2
  • PyQt: 6.6.1
  • OS: Windows 11 Pro
1 Like

Same happens with the official 25.02 release and with the latest build of main.

The add cards dialog displays an svg+xml image, whereas the study screen doesn’t (it shows a <mjx-table> instead).

2 Likes