MathJax v4: In-line breaking does not work on safari

[guoyutao]

Issue Summary

In line breaking does not work on safari in macOS and iOS.But it work on Chrome in macOS.

Technical details:

• MathJax Version: 4.0.1
• Client OS: (e.g., Mac OS X 14.3.1，iOS 16.5)
• Browser: (e.g., Safari)

I am using the following MathJax configuration:

window.MathJax = {
      tex: {
        inlineMath: [
          ['$', '$'],
          ['\\(', '\\)']
        ],
        displayMath: [
          ['$$', '$$'],
          ['\\[', '\\]']
        ]
      },
      chtml: {
        displayOverflow: 'linebreak'
      },
      linebreaks: {                  // options for when overflow is linebreak
        inline: true,                   // true for browser-based breaking of inline equations
        width: '100%',                  // a fixed size or a percentage of the container width
        lineleading: .2,                // the default lineleading in em units
        LinebreakVisitor: null,         // The LinebreakVisitor to use
      },
      options: {
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code',
          'a', 'br'],
        ignoreHtmlClass: 'tex2jax_ignore',
        processHtmlClass: 'tex2jax_process',
        enableMenu: false,
      },
    }

and loading MathJax via

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-alpha.1/es5/tex-mml-chtml.js"></script>

    <div ref="exampleRef" class="example_class" v-html="tempstr">
    </div>

    const tempstr = ref('$\\sqrt{(10^2+8^2+6^2)}=\\sqrt{(100+64+36)}=\\sqrt{200}=10\\sqrt{2}$');

  .example_class {
    width: 100px;
    background-color: #fff;
  }

Supporting information:

MacOS safari:

MacOS Chrome:

[guoyutao]

and enableMenu: false, does not work. options: { enableMenu: false, },

the context menu will still appear.

[dpvc]

Concerning in-line breaking in Safari: this is a bug with Safari, but I have created a pull request that works around it.

I note that you are using the alpha.1 release. That is pretty old, now, and it had a number of issues with the line breaking. You might consider using the beta.4 or beta.6 release.

In the meantime, you can use this configuration:

MathJax = {
  tex: {inlineMath: [['$', '$']]},
  startup: {
    ready() {
      const {ChtmlMath} = MathJax._.output.chtml.Wrappers.math;
      delete ChtmlMath.styles['mjx-container[jax="CHTML"] mjx-break::after'];
      ChtmlMath.styles['mjx-container[jax="CHTML"] mjx-break'] = {
        'white-space': 'normal',
        'font-family': 'MJX-BRK'
      };
      MathJax.startup.defaultReady();
      const adaptor = MathJax.startup.adaptor;
      MathJax.startup.document.outputJax.postFilters.add(({data}) => {
        for (const brk of adaptor.tags(data, 'mjx-break')) {
          brk.innerHTML = ' ';
        }
      });
    }
  }
};

to fix the situation until the next release.

As for your second problem, please use a separate issue tracker when there is more than one issue. In this case, I think you are misunderstanding what it happening. The image you include doesn't show the MathJax contextual menu, which is what enableMenu controls, but rather shows the assistive expression explorer. That is not affected by enableMenu.

The explorer is enabled by having speech or braille output enabled, which are specified in the options.menuOptions.settings.speech and options.menuOptions.settings.braille configuration options. If you want your site to be accessible to those with assistive needs, like screen readers, you will not disable the menu, as that is where the accessibility features are controlled.

[guoyutao]

Thank you very much, your configuration work.