MathJax The height of `\stackrel` is too large in SVG output

Issue Summary

The height of \stackrel is too large when using startup.js with minimal configuration of MathJax.

Steps to Reproduce:

Open the following HTML file on Google Chrome:

<!DOCTYPE html>
<html>

<head>
  <style>
    td {
      border: solid thin gray;
      padding: 10px
    }

    table {
      border-collapse: collapse
    }
  </style>
  <script>
    MathJax = {
      output: {
        font: 'mathjax-modern'
      },
      loader: {
        load: ['input/tex-base', 'output/svg']
      },
      tex: {
        packages: ['base']
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/startup.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>
        \(\boxed{1 \stackrel {α }{⟵ } 2}\)<br>next line</td>
      <td>
        \(1 \stackrel {α }{⟵ } 2\)<br>next line
      </td>
    </tr>
  </table>
</body>

</html>

See the output: The height of formula in the second table cell is too large
Change MathJax configuration to

<!DOCTYPE html>
<html>

<head>
  <style>
    td {
      border: solid thin gray;
      padding: 10px
    }

    table {
      border-collapse: collapse
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/tex-svg.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>
        \(\boxed{1 \stackrel {α }{⟵ } 2}\)<br>next line</td>
      <td>
        \(1 \stackrel {α }{⟵ } 2\)<br>next line
      </td>
    </tr>
  </table>
</body>

</html>

See the same issue
Change output font to STIX2

<!DOCTYPE html>
<html>

<head>
  <style>
    td {
      border: solid thin gray;
      padding: 10px
    }

    table {
      border-collapse: collapse
    }
  </style>
  <script>
    MathJax = {
      output: {
        font: 'mathjax-stix2'
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/tex-svg.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>
        \(\boxed{1 \stackrel {α }{⟵ } 2}\)<br>next line</td>
      <td>
        \(1 \stackrel {α }{⟵ } 2\)<br>next line
      </td>
    </tr>
  </table>
</body>

</html>

See the same issue

Technical details:

MathJax Version: 4.0.0-beta.6
Client OS: Windows 11
Browser: Chrome v126.0.6478.127

Jun 28 '24 00:06 hbghlyj

Also we can compare \stackrel with \xleftarrow from ams extension:

<!DOCTYPE html>
<html>

<head>
  <style>
    td {
      border: solid thin gray;
      padding: 10px
    }

    table {
      border-collapse: collapse
    }
  </style>
  <script>
    MathJax = {
      output: {
        font: 'mathjax-modern'
      },
      loader: {
        load: ['input/tex-base', 'output/svg', '[tex]/ams']
      },
      tex: {
        packages: ['base','ams']
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/startup.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>
        \(1 \xleftarrow {α} 2\)<br>next line</td>
      <td>
        \(1 \stackrel {α }{⟵ } 2\)<br>next line
      </td>
    </tr>
  </table>
</body>

</html>

Jun 28 '24 00:06 hbghlyj

This seems to be a bug in the handling of line breaking for inline expressions. I'll have to look into it further, but you can prevent the linebreaks by enclosing the whole expression in braces. E.g., use \({1 \stackrel {α }{⟵ } 2}\). Or you can turn off inline breaking the contextual menu, or configure your page to not allow inline breaks.

Jun 28 '24 14:06 dpvc

OK, I've tracked it down and made a PR to fix it. In the meantime, you can add

      startup: {
        ready() {
          const {SvgWrappers} = MathJax._.output.svg.Wrappers_ts;
          SvgWrappers.inferredMrow = class mySvgMrow extends SvgWrappers.inferredMrow {
            computeLinebreakBBox(bbox) {
              if (!this.coreMO().node.isEmbellished) {
                super.computeLinebreakBBox(bbox);
              }
            }
          };
          MathJax.startup.defaultReady();
        }
      }

to your MathJax configuration as a workaround.

Jun 28 '24 20:06 dpvc