Search code examples
htmlcssmathjax

MathJax 2.7.7 not centering formula properly on web page when there are line breaks

I have something like this on a web page:

enter image description here

The "Theorem" and the block part from "Step 1" to "Step 2" are which MathJax is rendering. I was using version 2.3, but to avoid the vertical line that appears on the right I upgraded it to 2.7.7. But now the formulas are not centered when they include line breaks; they are aligned to the left:

enter image description here

In the HTML code I have this configuration:

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                extensions: ["tex2jax.js","[Contrib]/forminput/forminput.js"],
                jax: ["input/TeX","output/HTML-CSS"],
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                    processEscapes: true,
                    processEnvironments: true,
                },
                TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]},
                displayAlign: 'center',

                "HTML-CSS": {
                    styles: {'.MathJax_Display': {"margin": 0}},
                    linebreaks: { automatic: true }
                }
            });
        </script>
        <script 
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML"
        />

And the part shown on the images is:

<body>
    ...
    <div class="col-lg-7" style="padding-right: 0px;">
        <article class="proof">
            <h5 id="formula" style="width:100%; height: 100%">
                <center>$Theorem$</center>Proof:<br>
                <center>$~~~~~~Step 1\\=~~~~~~\langle \text{explanation}\rangle\\~~~~~~Step 2$</center>
            </h5>
        </article>

Note that I am using single $ as delimiters. If I put them double ($$ ... $$) then each individual line is centered on its own as shown below, which is not the desired result. The part from "Step 1" to "Step 2" should act as a single block, in which the steps are always aligned to the left of the "explanation" part.

enter image description here

The current code is shared in codesandbox: https://codesandbox.io/s/sweet-gates-80vx8?file=/index.html

Solution

  • Background

    • Mathjax enables use of Latex, AsciiMath and MathML in HTML and browser.
    • Mathjax does not support everything that is possible in a pure Latex or Tex environment, but rather the math subset with the addition of some additional features.
    • Latex (in your case) is added to the DOM and then MathJax processes this in a way which ends up in a complicated hierarchy of elements.

    Your use case

    Since Mathjax needs to cooperate with the existing DOM, using line breaks in Latex is a typical scenario where things might go wrong. Line breaks are not primarily a math feature and I remember that using regular Latex line breaks in math mode in a pure Latex environment could be quite a hassle too. Since you can do the layout in HTML, it might be better to just let Mathjax render math and then do the actual layout of the different Mathjax parts in HTML instead. In your case, this implies excluding line breaks from your Latex and instead divide it into separate elements that are laid out using HTML.

    Replace the content between your h1 tags with this:

    <div
    style="
        display: flex;
        flex-direction: column;
        align-items: center;
      "
>
    <span>$Theorem$</span>
    <p style="width: 100%;">Proof:</p>
    <span>$Step1$</span>
    <span>$~~~~~~~~~~~~=~~~~~~~~~~~~\langle\text{explanation}\rangle$</span>
    <span>$Step2$</span>
</div>

    Now, we're using HTML to layout the separate parts of the math and only leave the rendering of math to Mathjax. You can try it and also add additional styling and formatting if desired. Add more tildes to the left or right of the equal sign to push that row farther to the right.

    When Mathjax encounters a block of Latex, it translates it to one block of HTML. My belief is that when you add a newline in the code, it makes Mathjax set the width of the block to 100%, and when you center something that is 100% wide, nothing happens. INSIDE this block, there is no alignment at all so the rows end up left-aligned (default). This means that even if Mathjax didn't set the width to 100%, you wouldn't be able to center INSIDE the resulting block by wrapping it in <center> tags because the content INSIDE it would still be left-aligned. At best, you would arrive at a centered block with left-aligned rows. All in all, your attempt does not work because you're centering with HTML but because you use newlines (as a means to layout) in the Latex code, Mathjax believes the block should be 100% wide and so the outer centering does not work as expected.

    The solution is to either use HTML all the way for layout (like my suggestion) or do the opposite (do all the layout in Latex) by trying to use some Latex mechanism to enable centering (maybe center or centering) or use some math environment such as align or gather to accomplish what you want.