MathJax v4 Line Breaking

101 views
Skip to first unread message

Amine Marref

unread,
Apr 25, 2023, 2:47:19 AM4/25/23
to MathJax Users
Hello,

I switched from MathJax v3 to Mathjax v4 to take advantage of line breaking that I need now in my app.

The following is my MathJax setup:
<script>
    MathJax = {
        loader: { load: ['input/ascimath'] },
        chtml: { displayAlign: 'left' },
        tex: {
            inlineMath: [['$', '$'], ["\\(", "\\)"]],
            processEscapes: true,
        },
        displayOverflow: 'linebreak',
        linebreaks: {
            inline: true,
            width: '100%',
            lineleading: .2,
            LinebreakVisitor: null,
        }
    };
</script>  
<script id="MathJax-script" async src="/apps/maths/js/ext/mathjax-v4/es5/tex-chtml.js"></script>

The attached screenshot shows what I get which is basically no line breaks. The white region is the viewport.

What am I doing wrong?

Thanks.

mathjax-v4-linebreaks.png

Davide Cervone

unread,
Apr 25, 2023, 7:15:54 AM4/25/23
to mathja...@googlegroups.com
You have the displayOverflow and linebreaks configuration in the wrong place.  They should be in the chtml (or better yet, the new output) block your configuration.  I.e.,

<script>
    MathJax = {
        loader: { load: ['input/ascimath'] },
        output: {
    displayAlign: 'left'
            displayOverflow: 'linebreak',
            linebreaks: {
                inline: true,
                width: '100%',
                lineleading: .2,
                LinebreakVisitor: null,
            }
},
        tex: {
            inlineMath: [['$', '$'], ["\\(", "\\)"]],
            processEscapes: true,
        },
    };
</script>

But since the contents of the linebreaks block are all the defaults, you don't need to include that, just the `displayOverflow` option.

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 on the web visit https://groups.google.com/d/msgid/mathjax-users/c6098712-9619-4455-a91c-2a6790b48f6fn%40googlegroups.com.
<mathjax-v4-linebreaks.png>

Amine Marref

unread,
Apr 25, 2023, 11:13:20 AM4/25/23
to mathja...@googlegroups.com
Thank you very much. That worked like a charm.

By the way, is there a way that makes MathJax redo its line breaking to take into account screen-orientation changes? For example, my app uses Bootstrap for responsiveness; and the users might run the app on a smartphone/tablet and potentially change the orientation between portrait and landscape. Using my browser's developer tools, I noticed that when my page renders the equations in e.g. landscape mode, then when I switch to portrait mode, the equations overflow. Is there an implicit background way that handles this transparently? I am also happy with providing a button to the user to re-render the equations when the screen's orientation changes.

Cheers.

You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/KpbvwPe8TTU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/C37C2925-4E5B-41F6-9CC7-7E496356D679%40gmail.com.


--
Amine Marref, M.Eng., Ph.D.

Davide Cervone

unread,
Apr 27, 2023, 7:03:02 AM4/27/23
to mathja...@googlegroups.com

> Thank you very much. That worked like a charm.

Glad to hear it.

> By the way, is there a way that makes MathJax redo its line breaking to take into account screen-orientation changes? For example, my app uses Bootstrap for responsiveness; and the users might run the app on a smartphone/tablet and potentially change the orientation between portrait and landscape. Using my browser's developer tools, I noticed that when my page renders the equations in e.g. landscape mode, then when I switch to portrait mode, the equations overflow. Is there an implicit background way that handles this transparently? I am also happy with providing a button to the user to re-render the equations when the screen's orientation changes.

The line breaking is an expensive process, and it is only done once. There is no monitoring of the width of the containers (or orientation in your case) to redo the line breaking. But if you monitor for that yourself, you can call

MathJax.startup.document.rerender();

to have all the math re-rendered, and that will re-linebreak long expressions. It looks like the Screen.orientation object can be used to get orientation change events. See

https://stackoverflow.com/questions/67961837/deprecated-window-orientationchange-event/67961838#67961838

Alternatively, you could use a ResizeObserver to get changes in the size of the window (or of the parents of the display math containers) and rerender when the seize changes. See

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Your idea of a button tied to MathJax.startup.document.rerender() also would work.

Davide






Amine Marref

unread,
Apr 28, 2023, 7:10:14 AM4/28/23
to mathja...@googlegroups.com
Hi Davide,

The MathJax.startup.document.rerender(); does not work for me. I thought I should use the easiest approach first which is adding a button that the user clicks to call MathJax.startup.document.rerender(); after the viewport changes.
The following is what I am doing.
1. In a browser, I load the page that contains the maths equations. Mathjax renders these fine with line breaking (see 1.png).
2. Using developer's tools, I change the dimensions of the viewport which causes the line-broken equations in the page to overflow (see 2.png).
3. I then click the button that calls MathJax.startup.document.rerender(); and nothing happens.

Perhaps it is worth mentioning that the equations in the page are not available statically at the beginning, they are rather added dynamically. I mean that the web page right before step 1 above contains dynamically-added equations. I do not know if this is relevant but I thought I should mention it in case MathJax.startup.document.rerender(); is sensitive to that.

The following is my MathJax setup.
<script>
    MathJax = {
        loader: { load: ['input/ascimath'] },
        output: {
            displayAlign: 'left',

            displayOverflow: 'linebreak',
            linebreaks: {
                inline: true,
                width: '100%',
                lineleading: .2,
                LinebreakVisitor: null,
            }
        },
        tex: {
            inlineMath: [['$', '$'], ["\\(", "\\)"]],
            processEscapes: true,
        },
    };
</script>
<script id="MathJax-script" async src="/apps/maths/js/ext/mathjax-v4/es5/tex-chtml.js"></script>

Any idea what I am doing wrong here?

Cheers.


--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/KpbvwPe8TTU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/4439CA4F-824F-43C7-AF05-D00E5AFE7C2B%40gmail.com.
2.png
1.png

Davide Cervone

unread,
May 8, 2023, 12:19:33 PM5/8/23
to mathja...@googlegroups.com
Sorry for the delay in getting back to you.  See if

MathJax.startup.document.state(100); MathJax.startup.document.render();

works for you instead.

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 on the web visit https://groups.google.com/d/msgid/mathjax-users/CA%2Bz3tkb-Sdc%2BwW63L_zjSpitRo5_Gf7sm4meor1eXc6oidwwcw%40mail.gmail.com.
<2.png><1.png>

Amine Marref

unread,
May 14, 2023, 4:57:01 PM5/14/23
to mathja...@googlegroups.com
That actually worked like some fairytale magic! Wow! Cheers!

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/F3FAC789-D557-412C-B35E-BF0899F966D4%40GMAIL.COM.

Davide Cervone

unread,
May 14, 2023, 8:05:16 PM5/14/23
to mathja...@googlegroups.com
Lat it did the trick.  Thanks for letting us know.

Davide


Malte Wellnitz

unread,
Mar 27, 2024, 5:48:52 AMMar 27
to MathJax Users
Hello,

I am still struggling with line breaking in Math Jax v4. This is an almost minimal example to illustrate my problems: 

<!DOCTYPE html>
<head>
  <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mat...@4.0.0-alpha.1/es5/tex-mml-chtml.js"></script>
  <script>
       MathJax = {
        loader: { load: ['input/ascimath'] },
        output: {
      displayAlign: 'left',
            displayOverflow: 'linebreak',
            linebreaks: {
                inline: true,
                width: '100%',
                lineleading: .2,
                LinebreakVisitor: null,
            }
  },
        tex: {
            inlineMath: [['$', '$'], ["\\(", "\\)"]],
            processEscapes: true,
        },
    };
  </script>

</head>

<body>
 
  <div style="background-color: salmon; width:40%">
      A long line $\{\frac{3}{4}, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z \}$ which stretches and stretches.

      And now display math:
      $$\{\frac{3}{4}, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z, x, y, z, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z \}$$.
  </div>    
</body>
</html>

However, the rendered page shows that inline math is not rendered as math at all, and the display math does render as math but overflows the container -- no line-breaking. I am attaching a screenshot.

Obviously I am doing a lot of things wrong. Could you help me?

Thanks a lot.

Malte
Screenshot MathJax.png

Davide Cervone

unread,
Mar 27, 2024, 7:51:45 AMMar 27
to mathja...@googlegroups.com
Malte:

There are several things wrong with your sample file.  

First, the script tag that sets the MathJax configuration must come BEFORE the script tag that loads tex-mml-chtml.js.  Since that script doesn't have the defer or async attributes, the browser will load that file before processing the rest of the page, and so MathJax will already have set everything up and queued its initial typeset before your configuration is even processed (at which point you wipe out the MathJax variable that was loaded from tex-mml-chtml.js).

Second, you have misspelled "asciimath" in your configuration, so you are getting a load error about that.

Third, you are using v4.0.0-alpha.1, which had several issues with in-line line breaking.  You should update to v4.0.0-beta.4 as in


Finally, make sure your MathJax menu settings aren't overriding the page settings by either reseting them (via the "Math Settings" menu's "Reset to defaults" item), or checking that the line-break options are set to the ones you want (via the "Math Settings" menu's "Wide expressions" submenu).

With the changes suggested above, your page now renders as


for me.

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.
Message has been deleted
Message has been deleted

Davide Cervone

unread,
Mar 27, 2024, 3:44:04 PMMar 27
to mathja...@googlegroups.com
Malte:

The problem is that your mailer seems to have "helpfully" shortened the URL for MathJax that I included in my message.  It inserted "..." in place of part of the name.  Where you currently have "mat...@4.0.0-beta.4" you should have "mat...@4.0.0-beta.4".  So currently, MathJax isn't even loading.

If I make that change in your file, it works for me.

Davide



On Mar 27, 2024, at 2:14 PM, Malte Wellnitz <maltewe...@gmail.com> wrote:

Hello Davide,

thank you for helping me. I am really grateful for that because I really need to get this MathJax thing done soon.

I applied your changes, but I am still running into difficulties. What could be the cause now? I am attaching a new screenshot, and also my new sample file below.

Admittedly, I did not quite understand what you said about resetting the page settings. Can you give me specific code for one of the two alternatives you mentioned (resetting the settings or checking that the line-break options are set to the ones I want) ?

Thank you very much for your time and effort.

Malte

<!DOCTYPE html>
<head>
 
  <script>
       MathJax = {
        loader: { load: ['input/asciimath'] },
        output: {
      displayAlign: 'left',
            displayOverflow: 'linebreak',
            linebreaks: {
                inline: true,
                width: '100%',
                lineleading: .2,
                LinebreakVisitor: null,
            }
  },
        tex: {
            inlineMath: [['$', '$'], ["\\(", "\\)"]],
            processEscapes: true,
        },
    };
  </script>
  <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mat...@4.0.0-beta.4/tex-mml-chtml.js"></script>
</head>

<body>
 
  <div style="background-color: salmon; width:40%">
      A long line $\{\frac{3}{4}, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z \}$ which stretches and stretches.

      And now display math:
      $$\{\frac{3}{4}, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z, x, y, z, x, y, z, 3, 10, x+3, 10-x, 13-y-z, 13-z, y+z \}$$.
  </div>    
</body>
</html>

Reply all
Reply to author
Forward
Message has been deleted
0 new messages