Inappropriate MathJax rendering in AnkiMobile

[Vincente]

As the image shown above, the math formatting in AnkiMobile is slightly ugly, how do I fix this?

[dae]

Unfortunately I don’t think MathJax currently supports this.

https://docs.mathjax.org/en/latest/output/linebreaks.html

[Vincente]

Oh I am thought the line break works, but the problem is the wrapping. I want to avoid to scroll left and right to view the card. Is there anyway to make the expression width fit to the screen or the page? Also, the font of MathJax on iOS is different from my MacBook, can I also make it in a way that has more accurate formatting? Thank you for your help! I am new to Anki

[Vincente]

I found that the ugly formatting is caused by the lockdown mode by Apple. I simply exclude Anki from lockdown mode, it is fixed! However, the wrapping is still not fixed, I have to scroll to left or right to view the full math equation.

1. How to set the math equation to fit to the screen, so that to avoid scroll left or right?

[dae]

I’m afraid I don’t think MathJax has a feature to scale to fit the window either. If rotating your device is not an option, you could adjust your card template to make the equations smaller, but this would affect all of them.

<font size="1">
{{Back}}
</font>

[Vincente]

After searching the solution and did many times of trial-and-error, finally I found the solution to fix this! Simply adding the following code into the styling section, then you can scroll the mathjax equation instead of scrolling the whole screen

mjx-container {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}