Why display and MathJax equation source do not match? #3209

xrjunque · 2024-03-27T14:24:58Z

As you may see in picture one MathJax presentation and source code are Ok and match. In the second image they do not match.

Attached image "Edge MathJax.png" is displaying Ok: rendering and MathJax equation source match.
I am using the following configuration:

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'> </script>
MathJax.Hub.Config({
    showProcessingMessages: false,
    tex2jax: {
        inlineMath: [
            ['$', '$'],
            ['\\(', '\\)']
        ]
    },
    extensions: ['toMathML.js']
});

In image "WebView2 MathJax.png" a WebView2 control inside a Windows Presentation Foundation (WPF) application, the same MathJax Equation Source does not match the displaying.
I am using the default configuration .

                s = "<html><head>" + vbCrLf
                s += "<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'> </script>" + vbCrLf
                s += "</head><body style='font-family:Verdana,Arial;font-size: 1.1em;height:80%;width:80%;margin-left:10%'>" + vbCrLf
                s += "<div style='height:100%;display:flex;align-items:center;justify-content:center;'><div>" + vbCrLf
                s += s1 + vbCrLf
                s += "</div></div></body></html>"
                WebView.NavigateToString(s)

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Original MathML.txt

dpvc · 2024-03-27T18:02:31Z

It appears that what you are seeing is part of the expression that in the middle, not the left-hand part. Your original MathML includes

      ...
      <mn>144</mn>
      <mi>x</mi>
      <mn>2</mn>
      <mi>y</mi>
      <mn>4</mn>
      <mn>12</mn>
      <mi>x</mi>
      <mi>y</mi>
      <mn>2</mn>
      <mo>&#x22C5;</mo>
      <mo stretchy="false">(</mo>
      <mo>&#x2212;</mo>
      <mn>14</mn>
      <mi>x</mi>
      <mn>2</mn>
      <mi>y</mi>
      <mn>2</mn>
      <mo stretchy="false">)</mo>
      ...

which is what I see of the output that you have in your screen shot. That section of the expression is just about the exact middle of the expression, so I'm wondering if the centering of displayed equations is causing the very long expression to be centered with the left-hand part off to the left, not showing. You might try setting displayAlign to "left" and see if that changes the result. Or check if there is other CSS in your page that is affecting the positioning. In any case, I suspect that the full equation is rendered properly, but just shifted so that you are seeing the middle part of it rather than the left-hand part.

It appears that you are using v2.7.2, which is old even for version 2 (the current version is 3.2.2, with v4 currently in beta release). The current v2 version is 2.7.9, so you should at least update that far if you are not able to go to 3.2.2.

xrjunque · 2024-03-27T18:59:47Z

Maximizing the window the whole expression is seen without changing the code: s = "<html><head>" + vbCrLf s += "<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'> </script>" + vbCrLf s += "</head><body style='font-family:Verdana,Arial;font-size: 1.1em;height:80%;width:80%;margin-left:10%'>" + vbCrLf s += "<div style='height:100%;display:flex;align-items:center;justify-content:center;'><div>" + vbCrLf s += s1 + vbCrLf s += "</div></div></body></html>" With version 3.2.2 neither maximizing nor not maximizing the expression is trimmed.

…

________________________________ De: Davide P. Cervone ***@***.***> Enviat el: dimecres, 27 de març de 2024 19:02 Per a: mathjax/MathJax ***@***.***> A/c: Xavier Ramon Junqué i de Fortuny ***@***.***>; Author ***@***.***> Tema: Re: [mathjax/MathJax] Why display and MathJax equation source do not match? (Issue #3209) It appears that what you are seeing is part of the expression that in the middle, not the left-hand part. Your original MathML includes ... <mn>144</mn> <mi>x</mi> <mn>2</mn> <mi>y</mi> <mn>4</mn> <mn>12</mn> <mi>x</mi> <mi>y</mi> <mn>2</mn> <mo>⋅</mo> <mo stretchy="false">(</mo> <mo>−</mo> <mn>14</mn> <mi>x</mi> <mn>2</mn> <mi>y</mi> <mn>2</mn> <mo stretchy="false">)</mo> ... which is what I see of the output that you have in your screen shot. That section of the expression is just about the exact middle of the expression, so I'm wondering if the centering of displayed equations is causing the very long expression to be centered with the left-hand part off to the left, not showing. You might try setting displayAlign to "left" and see if that changes the result. Or check if there is other CSS in your page that is affecting the positioning. In any case, I suspect that the full equation is rendered properly, but just shifted so that you are seeing the middle part of it rather than the left-hand part. It appears that you are using v2.7.2, which is old even for version 2 (the current version is 3.2.2, with v4 currently in beta release). The current v2 version is 2.7.9, so you should at least update that far if you are not able to go to 3.2.2. — Reply to this email directly, view it on GitHub<#3209 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGPV4VYZRTN7IDUE3G25CJ3Y2MCU3AVCNFSM6AAAAABFK7RL4KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRTGQ2DOMJVGM>. You are receiving this because you authored the thread.

xrjunque · 2024-03-28T16:40:28Z

I have found a solution that centers vertically and horizontally for both versions 2.7.2 and 3.2.2; and not trimming the output. The only difference is version 3.2.2 not popping up, with right mouse click, context menu to show, for example, MathJax Equation Source, A table and a div tags, instead of two div tags, do the centering:

s = "<html><head>" + vbCrLf s += "<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'> </script>" + vbCrLf s += "</head><body style='font-family:Verdana,Arial;height:85%;width:98%;border:0 0 0 0;padding: 0;'>" + vbCrLf s += "<table style='border:0 0 0 0;padding:0;height:90%;width:90%;text-align:center;vertical-align: middle;'>" s += "<tr><td><div style='font-size: 1.3em;'>" + vbCrLf s += s1 + vbCrLf s += "</div></td></tr></table></body></html>" WebView.NavigateToString(s)

dpvc added Cannot Reproduce v2 labels Mar 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Why display and MathJax equation source do not match? #3209

Why display and MathJax equation source do not match? #3209

xrjunque commented Mar 27, 2024 •

edited by dpvc

dpvc commented Mar 27, 2024

xrjunque commented Mar 27, 2024 via email •

edited

xrjunque commented Mar 28, 2024

Why display and MathJax equation source do not match? #3209

Why display and MathJax equation source do not match? #3209

Comments

xrjunque commented Mar 27, 2024 • edited by dpvc

dpvc commented Mar 27, 2024

xrjunque commented Mar 27, 2024 via email • edited

xrjunque commented Mar 28, 2024

xrjunque commented Mar 27, 2024 •

edited by dpvc

xrjunque commented Mar 27, 2024 via email •

edited