Equation is messed up after upgrading to MathJax v3

asarkar commented 2 months ago

Issue Summary

I've been using MathJax v2 with the following configuration:

MathJax.Hub.Config({

  showProcessingMessages: false,
     messageStyle: "none",
     tex2jax: {
       inlineMath: [ ['$','$'], ["\\(","\\)"] ],
       displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
       processEscapes: true
     },
     TeX: {
       MultLineWidth: "100%",
       equationNumbers: { autoNumber: "AMS" }
     },
     "HTML-CSS": { fonts: ["Latin-Modern"] }

});

MathJax.js?config=TeX-AMS-MML_HTMLorMML

Here's an equation and its output.

$$
E[X] = \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij}Pr[\text{i and j have the same birthday}]
$$
$$ Pr[\text{i and j have unique birthdays}] = 365/365 * 364/365 $$ ($$ i $$ may have been born on any of the $$ 365 $$ days, and $$ j $$ on any of the remaining $$ 364 $$ days).
$$
\therefore Pr[\text{i and j have the same birthday}] = 1 - \frac{364}{365} = \frac{1}{365} \\
\begin{equation*}
\begin{aligned}
  E[X] & = \frac{1}{365} * \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij} \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i - 1 + 1) \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i) \\
   & = \frac{1}{365} * (\sum_{i=1}^{k-1} k - \mathop{\sum_{i=1}^{k-1}} i) \\
   & = \frac{1}{365} * (k(k - 1) - (1 + 2 +...+ k - 1)) \\
   & = \frac{1}{365} * (k(k - 1) - \frac{k(k - 1)}{2}) \\
   & = \frac{k(k - 1)}{(365 * 2)}
\end{aligned}
\end{equation*}
$$

I upgraded MaxJax to v3, and obtained the v3 configuration using the conversion tool provided by MathJax.

v3 configuration:

window.MathJax = {
  tex: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true,
    multlineWidth: "100%",
    tags: "ams"
  },
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  }
};

Steps to Reproduce:

Not available.

Any other information you want to share that is relevant to the issue being reported. Especially, why do you consider this to be a bug? What do you expect to happen instead?

As you can see, the equation is moved to the extreme right, and overlaid on top of the text above it.

Technical details:

MathJax Version: 3.2
Client OS: (e.g., Mac OS X 10.8.4): macOS Sonoma
Browser: (e.g., Chrome 29.0.1547.57): Chrome 128.0.6613.138 (Official Build) (arm64)

Supporting information:

Please supply a link to a (live) minimal example page, when possible: Not available.
If your issue is with the display of the mathematics produced by MathJax, include a screen snapshot that illustrates the problem, when possible: Screenshots included.
Check your browser console window for any error messages, and include them here: The below error is due to the failure to embed Disqus commenting form on the page, which could be either because I'm not logged into Disqus, and/or running the site locally in Docker. I'm including it for completeness only.
```
embed.js:49 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at k (embed.js:49:10869)
at Object.l [as isSerif] (embed.js:49:10940)
at i.toJSON (embed.js:49:15627)
at c.loadEmbed [as _loadEmbed] (embed.js:51:12363)
at embed.js:51:16594
```
embed.js link address: https://*.disqus.com/embed.js (site name redacted)
Include the MathJax configuration you are using, and the script tag that loads MathJax itself: Given above.

dpvc commented 2 months ago

The problem is that your LaTeX is not actually valid. The equation* environment is meant to be a top-level environment that can't appear within a larger equation. MathJax should be giving the message "Erroneous nesting of environments" for this, but v3 doesn't always do that as it should (version 4 corrects that).

So you should either do

$$
E[X] = \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij}Pr[\text{i and j have the same birthday}]
$$
$$ Pr[\text{i and j have unique birthdays}] = 365/365 * 364/365 $$ ($$ i $$ may have been born on any of the $$ 365 $$ days, and $$ j $$ on any of the remaining $$ 364 $$ days).
$$
\therefore Pr[\text{i and j have the same birthday}] = 1 - \frac{364}{365} = \frac{1}{365}
$$
\begin{equation*}
\begin{aligned}
  E[X] & = \frac{1}{365} * \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij} \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i - 1 + 1) \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i) \\
   & = \frac{1}{365} * (\sum_{i=1}^{k-1} k - \mathop{\sum_{i=1}^{k-1}} i) \\
   & = \frac{1}{365} * (k(k - 1) - (1 + 2 +...+ k - 1)) \\
   & = \frac{1}{365} * (k(k - 1) - \frac{k(k - 1)}{2}) \\
   & = \frac{k(k - 1)}{(365 * 2)}
\end{aligned}
\end{equation*}

(ending the initial $$ before the \begin{equation*}), or

$$
E[X] = \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij}Pr[\text{i and j have the same birthday}]
$$
$$ Pr[\text{i and j have unique birthdays}] = 365/365 * 364/365 $$ ($$ i $$ may have been born on any of the $$ 365 $$ days, and $$ j $$ on any of the remaining $$ 364 $$ days).
$$
\therefore Pr[\text{i and j have the same birthday}] = 1 - \frac{364}{365} = \frac{1}{365} \\
\begin{aligned}
  E[X] & = \frac{1}{365} * \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij} \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i - 1 + 1) \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i) \\
   & = \frac{1}{365} * (\sum_{i=1}^{k-1} k - \mathop{\sum_{i=1}^{k-1}} i) \\
   & = \frac{1}{365} * (k(k - 1) - (1 + 2 +...+ k - 1)) \\
   & = \frac{1}{365} * (k(k - 1) - \frac{k(k - 1)}{2}) \\
   & = \frac{k(k - 1)}{(365 * 2)}
\end{aligned}
$$

removing the equation* environment entirely, as it is not needed here.

You also seem to have CSS in your page that affects MathJax's output, as the displayed equations are being displayed as in-line equations. That is, your output should be

for the top view lines of your example code. The $$...$$ should produce centered displayed equations. I suspect that you mean to use single dollar signs for those:

$$
E[X] = \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij}Pr[\text{$ i $ and $ j $ have the same birthday}]
$$
$ Pr[\text{$ i $ and $ j $ have unique birthdays}] = 365/365 * 364/365 $ ($ i $ may have been born on any of the $ 365 $ days, and $ j $ on any of the remaining $ 364 $ days).

(I've also added $...$ inside your \text{} macro to get properly typeset i and j.)

asarkar commented 2 months ago

@dpvc Thanks for your help. I actually upgraded to v4.0.0-beta.7 in order to get better validation, and for the newline support. I hope that's ok. If you've major concerns about using a Beta version, please let me know.

As for the problem above, I retained the equation environment simply to minimize the changes, and ended up with the following.

$$
\\ X = \begin{cases}
  1 & \text{if the pair has the same birthday} \\
  0 & \text{otherwise}
\end{cases} \\
\begin{aligned}
E[X] = \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij}Pr[\text{i and j have the same birthday}]
\end{aligned} \\
Pr[\text{i and j have unique birthdays}] = 365/365 * 364/365 $$ ($$ i $$ may have been born on any of the $$ 365 $$ days, and $$ j $$ on any of the remaining $$ 364 $$ days).
$$\\
\therefore Pr[\text{i and j have the same birthday}] = 1 - \frac{364}{365} = \frac{1}{365}
$$
$$
\begin{equation*}
\begin{aligned}
  E[X] & = \frac{1}{365} * \sum_{i=1}^{k-1}\sum_{j=i+1}^{k} X_{ij} \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i - 1 + 1) \\
   & = \frac{1}{365} * \sum_{i=1}^{k-1} (k - i) \\
   & = \frac{1}{365} * (\sum_{i=1}^{k-1} k - \mathop{\sum_{i=1}^{k-1}} i) \\
   & = \frac{1}{365} * (k(k - 1) - (1 + 2 +...+ k - 1)) \\
   & = \frac{1}{365} * (k(k - 1) - \frac{k(k - 1)}{2}) \\
   & = \frac{k(k - 1)}{(365 * 2)}
\end{aligned}
\end{equation*}
$$

The live rendering can be seen on this page from my blog.

dpvc commented 2 months ago

Just FYI: I see that you have gone to using in-line mode for all your math on the blog page ($...$ instead of $$...$$), which is fine, except that you should not put \begin{equation*}...\end{equation*} inside math delimiters, as the \begin and \end are themselves the delimiters. Technically, MathJax should not allow the equation environment within in-line math.

mathjax / MathJax