MathJax displays differently in newest version

[AlexApps99]

Screenshots

###### AnkiDroid:  ###### Anki Desktop (2.1.44): 

Reproduction Steps

1. Create a card with LaTeX in this format: \(\ce{Al^3+}\)
2. Compare the difference between the old version of AnkiDroid/Desktop, and current version of AnkiDroid

Expected Result

Same appearance

Actual Result

New version looks all weird and spaced out

[welcome[bot]]

Hello! 👋 Thanks for logging this issue. Please remember we are all volunteers here, so some patience may be required before we can get to the issue. Also remember that the fastest way to get resolution on an issue is to propose a change directly, https://github.com/ankidroid/Anki-Android/wiki/Contributing

[mikehardy]

Hi there! If you have some example card contents that would help. Mathjax is the preferred solution at this point, and we did move from mathjax2 to 3 with the new release, in case that's important

[AlexApps99]

Example card content is the latex formula I included in the issue description, on its own it should reproduce the issue

On Sat, 29 May 2021, 14:41 Mike Hardy, @.***> wrote:

Hi there! If you have some example card contents that would help. Mathjax is the preferred solution at this point, and we did move from mathjax2 to 3 with the new release, in case that's important

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ankidroid/Anki-Android/issues/9002#issuecomment-850755572, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHLM35WHS3LN3QD2WXAPC4DTQBH5FANCNFSM45XU6VFQ .

[david-allison]

I did notice that moving from MathJax 2 to 3 has changed the spacing of some cards (when I was looking into the MathJax 3 slowdown issue), I didn't realise that this didn't match Anki Desktop.

I'm not at all familiar with MathJax, but I'll look into it if nobody else does in a reasonable time period. @AlexApps99 ping me here if nothing moves within 5 days and I'll have a deep dive.

---

Diagnostics

Firstly, could you provide sample images of the same formula from:

• Anki Desktop (latest) - 2.1.44 I believe
• AnkiDroid (latest) - 2.15.2
• AnkiDroid (2.14.6) download: https://github.com/ankidroid/Anki-Android/releases/download/v2.14.6/AnkiDroid-2.14.6.parallel.A.apk

If possible, use a formula where the differences are easily visible

It would also be ideal to obtain card.html for the two AnkiDroid instances, so we can compare. See: https://github.com/ankidroid/Anki-Android/wiki/Development-Guide#html-javascript-inspection

[SpikyClip]

Can confirm that this alignment issue is a problem with ankidroid 2.15.6 compared to anki desktop 2.1.22 (yea I know its outdated). In addition, the \color command bleeds through one character to the right (i.e. if you color a word in brackets, the right bracket will also be coloured. This is not an issue on desktop anki 2.1.22 and ankidroid 2.14.6.parallel. Attached are the screenshots, and the card.html files as txt.

ankidroid_2.15.6.txt ankidroid_2.14.6.txt

[ShridharGoel]

The MathJax documentation mentions the change regarding \color. Here is the link: https://docs.mathjax.org/en/latest/input/tex/extensions/color.html

[Arthur-Milchior]

With

\[lift(\color{red}{A} \Rightarrow \color{darkorange}{B}) = \frac{supp(\color{red}{A} \cup \color{darkorange}{B})}{supp(\color{red}{A}) \cdot supp(\color{darkorange}{B})}\]

current anki desktop shows:

I don't even understand what you means about alignment so I don't know whether there is an alignment problem.

It would help a lot if you could make screenshot that are actually identical as far as possible. That is, showing the same content, and with the same size, , because right now, even on your two ankidroid screenshot, I don't know what to compare, what changed because of the screen size and what changed because of the mathjax problem.

However, about coloring, it is now clear that it is not an ankidroid specific issues. I'd like to note that 2.1.22 used MathJax 2. I don't think that comparing to old version of anki is very informative. In this case, this means I don't think we should touch it unless upstream does so (sorry @ShridharGoel as it seems your PR may be rejected). I understand that it's a pain for you, @SpikyClip and I hope that we can find other way to make things work. At least for coloring, we can uses the code provided by @ShridharGoel in #9006 in a card type. It may also be a pain for other users so we should document it.

Also, you can export cards directly from the browser, it may be easier for us to debug if you exported a card and not its code, as there is no straightforward way to reimport the .txt file you sent us into anki

[mikehardy]

not sure if @hgiesel is looking or has time but he was the mathjax master for our move to mathjax3

[david-allison]

I don't think there's a problem in our implementation here. We match Anki Desktop, and MathJax has changed from v2 to v3.

We should have informed users, and given them an upgrade path (as should have Anki), but I don't think this is a "bug/ecosystem compatibility issue".

[mikehardy]

Agreed on all fronts, not great notice so the progress is messy but staying on old mathjax versions is also not an option. So it goes

[SpikyClip]

With

\[lift(\color{red}{A} \Rightarrow \color{darkorange}{B}) = \frac{supp(\color{red}{A} \cup \color{darkorange}{B})}{supp(\color{red}{A}) \cdot supp(\color{darkorange}{B})}\]

current anki desktop shows:

I don't even understand what you means about alignment so I don't know whether there is an alignment problem.

It would help a lot if you could make screenshot that are actually identical as far as possible. That is, showing the same content, and with the same size, , because right now, even on your two ankidroid screenshot, I don't know what to compare, what changed because of the screen size and what changed because of the mathjax problem.

However, about coloring, it is now clear that it is not an ankidroid specific issues. I'd like to note that 2.1.22 used MathJax 2. I don't think that comparing to old version of anki is very informative. In this case, this means I don't think we should touch it unless upstream does so (sorry @ShridharGoel as it seems your PR may be rejected). I understand that it's a pain for you, @SpikyClip and I hope that we can find other way to make things work. At least for coloring, we can uses the code provided by @ShridharGoel in #9006 in a card type. It may also be a pain for other users so we should document it.

Also, you can export cards directly from the browser, it may be easier for us to debug if you exported a card and not its code, as there is no straightforward way to reimport the .txt file you sent us into anki

No problem, after looking at the two images it seems like the alignment is the same, its just a weird optical illusion to me that the coloured brackets appear closer to the words they are next to. As for the mathjax, I'll update the lines to the new mathjax 3 implementation. I don't have much reason to remain on the old anki versions anymore. Thanks for everyone's help!

[AlexApps99]

Why was the issue closed?

[AlexApps99]

I have already provided screenshots and example LaTeX (using default stylesheet and latex setup) It is certainly not what the previous version of AnkiDroid or what Anki Desktop look like

[AlexApps99]

I tried to install AnkiDroid.A from the link you gave me but it crashes every time I open it

[mikehardy]

It was closed because of this assertion:

I don't think there's a problem in our implementation here. We match Anki Desktop, and MathJax has changed from v2 to v3.

That implies there is no action item. I close issues when there is nothing actionable

[AlexApps99]

It doesn't look the same on the latest Anki Desktop though?

Edit: Just checked and I don't have the latest Anki Desktop, so ignore whatever I said about that

[AlexApps99]

Ok, I got the latest version of Anki, and the results still don't match with mobile (This is anki desktop 2.44 or whatever the latest is)

[Arthur-Milchior]

Thank you for letting us know there is a difference between current version of anki desktop and ankidroid. That is indeed something that we can consider. If I understand correctly, the trouble is the differenc between the A and the g, right?

I insist, please, share your cards. Screenshots are nice. The field content is nice. But I REALLY want to have you card to be able to import them and see the difference - if any - myself.

For example, if I don't have your card but only

(\ce{Al^3+})

then I can't see for myself whether it depends on some css you added to your card, that would be activated only on condition of a small screen by example. Worst, it won't even reproduce your screenshot since there is an extra number.

[AlexApps99]

Apologies, here it is: https://filebin.net/w6b3ynktejznkfsg/CHE_Ions-20210530220027.apkg

[david-allison]

EDIT: repro on 3.1.4. Upgrading won't help:

---

What's the process for upgrading to a later version of MathJax?

I've had a look: our font-size (generated by MathJax) is slightly different, but fixing that doesn't fix the issues.

It appears that em causes different relative spacing between the two clients.

We're on 3.1.2 on AnkiDroid/AnkiDesktop. Latest is 3.1.4, with 3.1.3 having 70 bugfixes, one of which may be relevant.

https://github.com/mathjax/MathJax-src/releases/tag/3.1.4

[AlexApps99]

Correct me if I'm wrong, but doesn't Anki use LaTeX, and not MathJax?

By that, I mean it converts to DVI, then to PNG, then displays it as a PNG (rather than displaying it directly as SVG or HTML)

Edit: checked the docs, seems both are used (https://docs.ankiweb.net/math.html)

[david-allison]

\( \) is MathJax syntax.

AnkiDroid doesn't natively support LaTeX compilation, but if images are rendered on Anki Desktop, then they're synced and displayed.

[david-allison]

Narrowed it down to the chtml renderer:

Change:

https://github.com/ankidroid/Anki-Android/blob/8eb2127a6f75fa738a85ccf356f5adae1ad8594f/AnkiDroid/src/main/java/com/ichi2/anki/AbstractFlashcardViewer.java#L2312

to:

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script> - fails

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script> - passes

[hgiesel]

@david-allison-1 However with tex-svg.js we had a whole other slew of issues, which is why it was reverted. Anki Desktop also uses tex-chtml.js.

[david-allison]

@hgiesel

Using <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script> seems to work for the example listed in https://github.com/ankidroid/Anki-Android/issues/7915

I'm not at all familiar with MathJax (although I'm getting better now). Is getting SVG rendering something that you'd have time to look at.

EDIT: had to take a call and missed the comment. What would you propose to continue? Is it likely that we can solve the bugs in the rendering (either the SVG, or the unknown issues in the HTML)

[david-allison]

Likely related: https://github.com/mathjax/MathJax/issues/2583

[SpikyClip]

The MathJax documentation mentions the change regarding \color. Here is the link: https://docs.mathjax.org/en/latest/input/tex/extensions/color.html

Just leaving this here in case others have similar issues. I got around to switching to the latex implementation of \color and realised there in fact is an alignment issue when you use two \color arguments next to each other, causing them to appear close when they should be spaced. The solution is to use \textcolor instead, which uses the \textcolor{color}{text} syntax, which makes it easy to convert using find and replace (same syntax as mathjax 2). This problem is documented here.

[david-allison]

@hgiesel Were there other issues with the SVG MathJax renderer aside from the deprecation of the nonstandard \color macro?

From the linked upstream issue, getting the HTML renderer working perfectly seems unlikely without serious effort on our behalf, and moving to the SVG renderer should fix these issues.

[hgiesel]

IIRC, the issue was not specifically the \color macro, but all MathJax extensions. Trying to use \color showed an error, that implied it couldn't find the extension file.

[github-actions[bot]]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically