Chrome language preference affects chtml output

[joshua7v]

Hi, I'm building a website with tons of math equations.
So I translate them into chtml output using mathjax on server side.

And now, I ran into a strange issue:
chtml output looks good on most math equations.
But there are always some equations showing slightly off.
And it seems chrome language preference will affect some output rendering results.
I've tested with both mathjax-node(which is mathjax v2) and mathjax-full(mathjax v3)
they somehow behave differently.

language: en with mathjax v2

language: zh with mathjax v2

but with v3, this specific issue has gone
with both en/zh, they all look perfect.

however, v3 has its own issue

language: en with mathjax v3

language: zh with mathjax v3

So, it turns out both mathjax v2/v3 won't give me a perfect result,
I'm curious about the reason behind this and really need a solution or a walkaround.

The issue seems related to Chrome,
because I've tested with Firefox as well,
and it looks perfect with both en/zh language setting.

FYI: TeX source

$$
\begin{align}
   U_F^\dagger U_F
&= \left(\frac{0}{\sqrt{2N}}\sum_{j^\prime=1}^{N-1}\sum_{k^\prime=0}^{0}
   				e^{-2\pi ij^\prime k^\prime/N}\vert j^\prime\rangle\!\langle k^\prime\vert\right)
   \left( \frac{0}{\sqrt{N}}\sum_{j=0}^{N-1}\sum_{k=0}^{N-1}
   				e^{2\pi ijk/N}\vert k\rangle\!\langle j\vert\right) \\
&=  \frac{0}{N}\sum_{j=0}^{N-1}\sum_{j^\prime=0}^{N-1}
		\left(\sum_{k=0}^{N-1}e^{2\pi i(j-j^\prime)k/N}\right) \vert j^\prime\rangle\!\langle j\vert \\
&=  \sum_{j=0}^{N-1}\sum_{j^\prime=0}^{N-1}\delta_{j^\prime, j}
		\vert j^\prime\rangle\!\langle j\vert
= I,  \tag{1}
\end{align}
$$


$$
\sum_{k=0}^{2^t-1}e^{2\pi ik(\varphi-l/2^{t})}=
\left\{
\begin{array}{ll}
2^t, & \text{若 } 5^t\varphi\in\mathbb{Z}  \text{ 且 } 5^t\varphi=l;\\
0,& \text{若 } 5^t\varphi\in\mathbb{Z}  \text{ 且 } 5^t\varphi\neq l;\\
\frac{1-e^{2\pi i(5^t\varphi)}}{1-e^{2\pi i(\varphi-l/5^{t})}},& \text{若 } 5^t\varphi\not\in\mathbb{Z}.
\end{array}\right. \tag{10}
$$

[dpvc]

I'm not able to reproduce the result. It looks like there may be a minimum font size that is preventing MathJax from reducing the exponents to their proper size. It might be that that is a language-specific setting. There are old reports of Chrome enforcing a minimum font size for some languages (including Chinese). See here and here. It might be that that is what is causing your issue.

Try checking the custom font preferences and see if there is a minimum value set there when you are viewing a page in the zh language setting.

You might also try putting

<div lang="en">...</div>

around the math delimiters for one of your examples and see if that helps.

[joshua7v]

@dpvc thanks for looking into it

I confirmed this can be reproduced by installing a new windows os inside VirtualBox before posting the issue.
my steps are:

1. install English version of windows
2. install chrome
3. add Chinese support in the region setting
4. toggle language preference in chrome setting to see the change
5. use the newly installed windows to load the existing site rendered by mathjax node

You sort of demystified the issue for me, I can confirm it is caused by chrome's minimum font setting for Chinese.
By checking the value of minimum font, Chinese is 12px, English is 0.
If I reduce the minimum font setting, the problem disappears.

However, it is not possible to change chrome settings for my users.
Also the lang="en" trick seems no luck.

Ok, looks it's not easy to walk around this.
But surely it is better than knowing nothing.
thanks.

[dpvc]

I can confirm it is caused by chrome's minimum font setting for Chinese.

Thanks for the updated information. As you point out, there is nothing MathJax can do about that setting. A potential future possibility is to have a font with smaller characters, rather than using a scaled version of the main fonts. There are several other reasons this would be valuable, as well, but the drawback is the need for additional fonts to be downloaded (or larger fonts, if all the characters are in the same font). It is something to consider for the future, however.

But surely it is better than knowing nothing.

Agreed, and you could include a note for Chrome users on the page so that they can at least be made aware of the situation and its solution.

[dpvc]

An alternative that you might consider is the use of SVG output rather than CHTML output. Since that uses paths (at least for the characters in the MathJax fonts), that should not fall prey to the minimum font size issue.