search

mathjax / MathJax

Beautiful and accessible math in all browsers
http://www.mathjax.org/
Apache License 2.0
10.02k stars 1.16k forks source link

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

Open hbghlyj opened 1 week ago

hbghlyj commented 1 week ago

Issue Summary

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

Steps to Reproduce:

  1. Open the following HTML file on Google Chrome: 
    
<!DOCTYPE html>
<html>
\(\boxed{1 \stackrel {α }{⟵ } 2}\)
next line		 \(1 \stackrel {α }{⟵ } 2\)
next line 

2. See the output: The height of formula in the second table cell is too large
![image](https://github.com/mathjax/MathJax/assets/53823634/68d63fb0-93e9-4825-8881-54019eb1ef87)

3. Change MathJax configuration to
```html
<!DOCTYPE html>
<html>

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

    table {
      border-collapse: collapse
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.6/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>
  1. See the same issue
  2. Change output font to STIX2 
    
<!DOCTYPE html>
<html>
\(\boxed{1 \stackrel {α }{⟵ } 2}\)
next line		 \(1 \stackrel {α }{⟵ } 2\)
next line 


6. See the same issue
![image](https://github.com/mathjax/MathJax/assets/53823634/d24f54d7-4dfe-4fe8-a513-e5cb55e327e5)

### Technical details:

* MathJax Version: 4.0.0-beta.6
* Client OS: Windows 11
* Browser: Chrome v126.0.6478.127
hbghlyj commented 1 week ago

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/mathjax@4.0.0-beta.6/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>

image

dpvc commented 1 week ago

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.

dpvc commented 1 week ago

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.