Issues observed while migrating from MathJax 3.1.2 to 4.1.1

34 views
Skip to first unread message

akhil joshi

unread,
Mar 12, 2026, 7:28:31 AM (4 days ago) Mar 12
to mathja...@googlegroups.com
Hi MathJax Team,
We encountered the following issue while migrating from MathJax 3.1.2 to version 4.1.1.
Issue 1 — <mi>cos</mi> treated as a multi-character identifier
In MathJax 4, multi-letter sequences inside <mi> are treated as identifiers. The TeX input jax places multi-letter sequences into a single <mi> element within macros such as \mathrm\mathbf, and related commands. This behavior is configurable, but by default it applies to letter sequences.
Because of this change, using <mi>cos</mi> renders the text in italics as a variable name rather than as a function operator.
Workaround implemented
To correct the rendering, we replaced <mi>cos</mi> with <mo>cos</mo> throughout the XML.
Summary of observations
  1. In the older version (3.1.2), the structure was as follows, and the rendering in proof was correct.

image.png

image.png


  2) When the same structure is used in version 4.1.1, it does not render correctly and produces the issue described above.


image.png



3) After updating the code to replace <mi>cos</mi> with <mo>cos</mo>, the rendering in version 4.1.1 appears correct 


image.png


image.png

Issue 2 —  Missing <mo> function-apply separator (invisible character)

In the existing code, <mo>cos</mo> is immediately followed by <mrow> without the invisible function-application operator &#x2061;. MathJax 4 appears to be stricter regarding this spacing.

 

To address this, we added <mo>&#x2061;</mo> (invisible function apply) after each cos.

image011.png


Issue 3 — Underscore symbol alignment
In MathJax 3.1.2, the underscore/underline renders correctly and is properly aligned under the character.
image.png

image.png

However, in MathJax 4.1.1, the underscore appears slightly left-aligned compared to the base character.
Observation
  • The same MathML structure that rendered correctly in version 3 now appears misaligned in version 4.1.1.
  • The underline glyph appears slightly shifted to the left in the rendered output.

    image.png

Could you please confirm:
  • Whether these changes are expected behavior in MathJax 4.1.1.
  • If there is a recommended configuration or styling approach to maintain the rendering behavior from MathJax 3.x.
Could you please confirm whether this is the recommended approach when migrating MathML content to MathJax 4, or if there is a preferred configuration change that would preserve the previous behavior?
Thank you for your guidance.

Thanks & Regards,
Akhil Joshi 

Davide Cervone

unread,
Mar 12, 2026, 11:32:18 AM (4 days ago) Mar 12
to mathja...@googlegroups.com
Issue 1 — <mi>cos</mi> treated as a multi-character identifier
In MathJax 4, multi-letter sequences inside <mi> are treated as identifiers. The TeX input jax places multi-letter sequences into a single <mi> element within macros such as \mathrm\mathbf, and related commands. This behavior is configurable, but by default it applies to letter sequences.
Because of this change, using <mi>cos</mi> renders the text in italics as a variable name rather than as a function operator.
Your observation is incorrect.  In MathML, multi-letter identifiers are rendered in the upright font, not italics.  E.g.

  <mi>cos</mi>
  <mi>x</mi>
</math>

renders as

PastedGraphic-1.png

in v4.1.1.  This has not changed in v4.  Even your 4.1.1 rendering shows the cosine in an upright font:

PastedGraphic-2.png
I'm wondering if the CSS on your page may be interfering with MathJax's output.  You don't give the MathJax configuration you are using or the MathJax component you are loading (e.g., mml-chtml.js), so it is hard to test without making assumptions.

The issue you don't discuss is the red "mfrac", which indicates a problem with that fraction's MathML structure.  Often that means the number of children is incorrect.  Using the MathJax contextual menu to Show Math As  the MathML Code should an attribute on on <merror> element for the mfrac that shows the actual error message.  It would help to see what that is.

The equation you provided in the first image in your summary section renders properly for me in v4.1.1:

mjx-4.1.1.png

so I'm wondering if the MathML is actually the same as the MathML in your v4.1.1 test.  (Perhaps it was actually the result of your trying to replace the cosines with <mo> elements, but something has gone wrong?)  Can you provide a link to a page that actually exhibits the problem?

To correct the rendering, we replaced <mi>cos</mi> with <mo>cos</mo> throughout the XML.

That should not be necessary, as shown in my image above.  If this is making a difference for you, then again I wonder about CSS that might be affecting the result.

Issue 2 —  Missing <mo> function-apply separator (invisible character)
In the existing code, <mo>cos</mo> is immediately followed by <mrow> without the invisible function-application operator &#x2061;. MathJax 4 appears to be stricter regarding this spacing.

This is not true.  For example,

  <mo>cos</mo>
  <mrow>
    <mi>&#x3C9;</mi>
    <mi>t</mi>
  </mrow>
</math>

produces

PastedGraphic-3.png

which has the proper spacing after the "cos".  Here is your equation with the <mo>cos</mi> replaced by <mo>cos</mo> without additional invisible function-apply:

PastedGraphic-4.png

The spacing of the cosines is correct without the U+2061 characters.

Issue 3 — Underscore symbol alignment
In MathJax 3.1.2, the underscore/underline renders correctly and is properly aligned under the character. ...  However, in MathJax 4.1.1, the underscore appears slightly left-aligned compared to the base character.

I am not able to reproduce the issue you are seeing.  Here is the expression rendered in v4.1.1 for me:

PastedGraphic-5.png

Again, without more information about your setup,. it is hard to diagnose the problem.  What OS and browser (and versions) are you using?  If you remove (or disable) the CSS from your page, does that make a difference?

Could you please confirm:
  • Whether these changes are expected behavior in MathJax 4.1.1.

No they are not, and I am not able to produce any of the issues you are seeing.

If you can provide a test page that illustrates the problems, I can investigate further.

Davide

akhil joshi

unread,
Mar 13, 2026, 3:23:38 AM (3 days ago) Mar 13
to MathJax Users

Hi Davide,

Thanks for your feedback.

Please check the attached implementation screenshot for MathJax 4.x.
Also, we are not injecting any CSS from MathJax in our implementation.
We are comparing the results using the https://www.mathjax.org/#demo link. We copied the original MathML code from the equation rendered in OnProof and pasted the same code into the MathJax demo site.The same issue/error appears there as well.

Test link: Please check below. (Only the equations for which issues were reported via email are included in the link below.)
https://qaops2editor.pubmate.co.in/#/?templateID=5fd5e790c0274a93b6b9cd413887e64e071609633

Environment details:

  • OS: Windows 11

  • Browser used for rendering: Google Chrome Version 145.0.7632.160 (Official Build) (64-bit)

Please let us know if you need any additional information.

Best regards,
Akhil Joshi 

sc2.png
sc3.png
sc4.png
sc1.png

Davide Cervone

unread,
Mar 14, 2026, 8:01:57 AM (2 days ago) Mar 14
to mathja...@googlegroups.com
Thanks for the additional information.  That was helpful.

The issue with the mfrac turns out to be due to the semantic enrichment that is part of the speech generation process.  It is adding an extra node to the mfrac that is causing it to have the wrong number of children, and that is producing the red error node.  The extra node is an invisible multiplication that should added before the mfrac, but is being added inside it instead.  One solution would be to add <mo>&#x2062;</mo> before the mfrac yourself, as that would prevent the semantic-enrichment from needing to add one.  Alternatively, since you are already turning of speech and Braille generation, you could disable the semantic enrichment entirely (though a use could still turn it on, which will cause the error again).

The issue with the underlines turns out to be an interaction between the CSS for the two different sizes of the underline character being used.  Combining characters like U+0332 are always hard for mathJax to work with, because they operate differently in different browser, and ins some fonts they are implemented by zero-width characters that overlap to the left.  MathJax uses extra CSS to manage the zero-width characters so that all browsers will handle them the same.  In the mathjax-newcm font, one size is zero-width and the other is not, but the CSS for the zero-width version was being inherited by the larger size, causing the improper placement.  This was sensitive to the order in which things occurred, which is why I didn't see it in my output initially.

A work-around would be to include

mjx-c.mjx-c332.NCM-SO {
  margin-left: 0;
}

in your page's CSS.

I'm not sure what issue the third equation in your test page is intended to show.  It seems to work as expected for me.

we are not injecting any CSS from MathJax in our implementation.

When I mentioned CSS, it was not about the MathJax CSS, but about the other CSS in the page.  (MathJax inserts its own, so you would not be doing that yourself.)  It turns out that was not the issue after all, so I was wrong in my suspicions there.

We copied the original MathML code from the equation rendered in OnProof and pasted the same code into the MathJax demo site

From the screen shot, it appears that you pasted in the enriched MathML (it includes the data-semenatic attributes), not the original MathML.  The former will have been modified to remove the invalid mfrac elements and insert the merror elements in its place, so pasting that into the MathJa demo would certainly have produce the output with the red mfrac nodes in it.  But you are right that had you put in the original, it would still have done the same, since the semantic-enrichment is being done on the MathJax site as well.  I'm only mentioning this because pasting in the final MathML would not be a valid test, as it already contains the red mfrac nodes.

Davide

On Mar 13, 2026, at 3:23 AM, akhil joshi <akkijo...@gmail.com> wrote:

Hi Davide,

Thanks for your feedback.

Please check the attached implementation screenshot for MathJax 4.x.
Also, we are not injecting any CSS from MathJax in our implementation.
We are comparing the results using the https://www.mathjax.org/#demo link. We copied the original MathML code from the equation rendered in OnProof and pasted the same code into the MathJax demo site.The same issue/error appears there as well.

Test link: Please check below. (Only the equations for which issues were reported via email are included in the link below.)
https://qaops2editor.pubmate.co.in/#/?templateID=5fd5e790c0274a93b6b9cd413887e64e071609633

Environment details:

  • OS: Windows 11

  • Browser used for rendering: Google Chrome Version 145.0.7632.160 (Official Build) (64-bit)

Please let us know if you need any additional information.

Best regards,
Akhil Joshi 



On Thursday, March 12, 2026 at 9:02:18 PM UTC+5:30 Davide Cervone wrote:
Issue 1 — <mi>cos</mi> treated as a multi-character identifier
In MathJax 4, multi-letter sequences inside <mi> are treated as identifiers. The TeX input jax places multi-letter sequences into a single <mi> element within macros such as \mathrm\mathbf, and related commands. This behavior is configurable, but by default it applies to letter sequences.
Because of this change, using <mi>cos</mi> renders the text in italics as a variable name rather than as a function operator.
Your observation is incorrect.  In MathML, multi-letter identifiers are rendered in the upright font, not italics.  E.g.

  <mi>cos</mi>
  <mi>x</mi>
</math>

renders as

<PastedGraphic-1.png>

in v4.1.1.  This has not changed in v4.  Even your 4.1.1 rendering shows the cosine in an upright font:

<PastedGraphic-2.png>
I'm wondering if the CSS on your page may be interfering with MathJax's output.  You don't give the MathJax configuration you are using or the MathJax component you are loading (e.g., mml-chtml.js), so it is hard to test without making assumptions.

The issue you don't discuss is the red "mfrac", which indicates a problem with that fraction's MathML structure.  Often that means the number of children is incorrect.  Using the MathJax contextual menu to Show Math As  the MathML Code should an attribute on on <merror> element for the mfrac that shows the actual error message.  It would help to see what that is.

The equation you provided in the first image in your summary section renders properly for me in v4.1.1:

<mjx-4.1.1.png>

so I'm wondering if the MathML is actually the same as the MathML in your v4.1.1 test.  (Perhaps it was actually the result of your trying to replace the cosines with <mo> elements, but something has gone wrong?)  Can you provide a link to a page that actually exhibits the problem?

To correct the rendering, we replaced <mi>cos</mi> with <mo>cos</mo> throughout the XML.

That should not be necessary, as shown in my image above.  If this is making a difference for you, then again I wonder about CSS that might be affecting the result.

Issue 2 —  Missing <mo> function-apply separator (invisible character)
In the existing code, <mo>cos</mo> is immediately followed by <mrow> without the invisible function-application operator &#x2061;. MathJax 4 appears to be stricter regarding this spacing.

This is not true.  For example,

  <mo>cos</mo>
  <mrow>
    <mi>&#x3C9;</mi>
    <mi>t</mi>
  </mrow>
</math>

produces

<PastedGraphic-3.png>

which has the proper spacing after the "cos".  Here is your equation with the <mo>cos</mi> replaced by <mo>cos</mo> without additional invisible function-apply:

<PastedGraphic-4.png>

The spacing of the cosines is correct without the U+2061 characters.

Issue 3 — Underscore symbol alignment
In MathJax 3.1.2, the underscore/underline renders correctly and is properly aligned under the character. ...  However, in MathJax 4.1.1, the underscore appears slightly left-aligned compared to the base character.

I am not able to reproduce the issue you are seeing.  Here is the expression rendered in v4.1.1 for me:

<PastedGraphic-5.png>

Again, without more information about your setup,. it is hard to diagnose the problem.  What OS and browser (and versions) are you using?  If you remove (or disable) the CSS from your page, does that make a difference?

Could you please confirm:
  • Whether these changes are expected behavior in MathJax 4.1.1.

No they are not, and I am not able to produce any of the issues you are seeing.

If you can provide a test page that illustrates the problems, I can investigate further.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/f8d306ad-26fa-4a26-baff-95ff86c0ecc2n%40googlegroups.com.
<sc2.png><sc3.png><sc4.png><sc1.png><PastedGraphic-1.png><PastedGraphic-2.png><mjx-4.1.1.png><PastedGraphic-3.png><PastedGraphic-4.png><PastedGraphic-5.png>

Reply all
Reply to author
Forward
0 new messages