Display characters with accent properly in MathJax

[jsar]

• Software version : Anki 26.09 (and previous)
• OS : Windows 11 (25h2), Intel processor
• Add-ons installed :
  • Anki Spell Checker
  • AnkiWebView Inspector
  • Customize Keyboard Shortcuts
  • Editor Live Preview
  • Symbols as you type

Hi!

First, please excuse me for my bad english.

I’m a daily user of Anki, but I’ve got an annoying issue with mathjax. When I try to input a character with accent (such as é, à, ê, and so on), Mathjax displays the letter in another font, and tinier than the others, leading to an awful result (cf. screenshot below).

I’ve tried many macros, but none of them worked for me. I even tried to change the MathJax font (following advices from messages in many forums and some LLMs). I tried in safe mode, too.

Did someone find a way to solve this ?

Thank you in advance to any one who may be able to give me some ideas.

[Danika_Dakika]

1. It looks like you’ve got examples of 2 different accent methods mixed together in your screenshot. If one is the problem, is there a reason not to just use the other one?

2. Please include your MathJax string as text instead of a screenshot – `in a preformatted-text/code-block` (by putting backticks before/after).

3. MathJax in Anki should work similarly to MathJax anywhere else, so are these characters that you’re able to display correctly elsewhere?

@jsar

I’ve tried many macros, but none of them worked for me.

4. It’s probably most useful if you tell us what you’ve tried, so no one duplicates the same advice.

[jsar]

Hi @Danika_Dakika,

Thanks for your suggestions. I’m a new-coming user, so I’m not used to the way I should write my questions.

1. Sorry, I’ve shown two different methods to input accents : the first one (\text{Prévalence}) is the way I usually do, and the second (Nombre\ de\ cas\ r\acute{e}pertori\acute{e}s\ \grave{a}\ un\ instant\ T) is the main solution I’ve found on internet forums (for example stackexchange). I find the second result ugly, especially with grave accents, and it’s not as simple to type for me as a g.o. \text{} command.
2. Here’s the complete code shown in the screenshot (example) : \text{Prévalence} = \frac{Nombre de\ cas\ r\acute{e}pertori\acute{e}s\ \grave{a}\ un\ instant\ T} {\text{Population générale à cet instant } T}
3. I’m not used to MathJax, except in Anki. I tried many viewers online, and some of them works fine (for example https://saxarona.github.io/mathjax-viewer/) and others don’t (for example https://latexeditor.lagrida.com/) (cf. screenshots).
4. For the macros, I asked Mistral and Gemini AI (free versions), so I can’t exactly find what macros they gave me. But it was mainly about changing the text font. I can ask them again if needed.

Thanks again, and have a nice day,

Jsar

Lagrida

Saxarona

[BenJamesBen]

I don’t think this is an Anki issue. Instead, it seems to be a MathJax issue. As I understand it, MathJax chooses the fonts it uses, specifically changing the font size of accent characters and accents to fit in with the surrounding text.

I tried to experiement MathJax’s minScaleAdjust per this discussion and matchFontHeight variables, but I was having difficulty in Anki when following the Customizing MathJax instructions in the Anki FAQ. Specifically, every time I copied the <script> code block into the HTML editor Anki and tried to save, the text would disappear.

Actually, when I manually try to enter a <script></script> block in the Anki HTML editor, it disappears!

[abdo]

MathJax customization is not supported in the editor (at least without add-ons).

I wonder if MathJax 4 has improvements here. There’s an open issue but not much progress for a year.

@BenJamesBen

Actually, when I manually try to enter a <script></script> block in the Anki HTML editor, it disappears!

Script execution in the editor is not allowed for security reasons.

[BenJamesBen]

Thanks. It looks like that the Anki FAQ needs to be updated to remove the Customizing MathJax section.

I don’t think there is any way to style MathJax output easily. Looking at the DOM, I see that MathJax hardcodes a lot of its styling. For example from the OP’s example equation, this is the DOM for the letters “Prév”. You can see that the font-size is hardcoded to 84% for the “é”:

And, this is the DOM for the “à” in the top numerator:

I suppose you could add CSS styling for various “mjx-*” classes to try to affect how things look. However, I think it would be a lot of tedious micromanaging, possibly requiring changes on a card-by-card basis, just to tweak how the equations look.

[abdo]

@BenJamesBen

It looks like that the Anki FAQ needs to be updated to remove the Customizing MathJax section.

The FAQ only shows customizing the macros though, and that should still be working?

[Danika_Dakika]

@BenJamesBen

It looks like that the Anki FAQ needs to be updated to remove the Customizing MathJax section.

It sounds like you were trying to put those scripts in the note field instead of the card template.

[BenJamesBen]

Thank you, all. I didn’t understand what the instructions in the FAQ were telling me to do.

@jsar , I have a suggested combination of 2 steps which might help to make MathJax appear the way you say you prefer:

1. Put this in your card template, to have MathJax not try to make the font smaller for accented characters:

<script>
MathJax.config.chtml['matchFontHeight'] = false;
if (typeof is_already_run == 'undefined') {
  is_already_run = true
  MathJax.startup.getComponents();
}
</script>

2. Don’t use the \acute{} and \grave{} commands to try to have MathJax construct accented characters. Instead, use the actual accented characters. From my testing, actual accented characters look better than the constructed ones.

Below are some examples from my testing, using this modified example MathJax equation:

<anki-mathjax>\text{Prévalence} = \frac{Nombre\ de\ cas\ r\acute{e}épertori\acute{e}és\ \grave{a}à\ un\ instant\ T} {\text{Population générale à cet instant }\acute{e}é\grave{e}è\grave{a}à\acute {a}á \ T}</anki-mathjax>

(I note that the fonts are smaller when matchFontHeight=false, though I’m not exactly sure why.)