Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hbghlyj opened this issue Jun 28, 2024 · 3 comments
Open

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

hbghlyj opened this issue Jun 28, 2024 · 3 comments
Labels
Accepted Issue has been reproduced by MathJax team Merged Merged into develop branch Test Needed v4

Comments

@hbghlyj
Copy link

hbghlyj commented Jun 28, 2024 •
edited
Loading

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>

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

  1. See the output: The height of formula in the second table cell is too large
    image

  2. 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/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>

<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/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
    image

Technical details:

  • MathJax Version: 4.0.0-beta.6
  • Client OS: Windows 11
  • Browser: Chrome v126.0.6478.127
@hbghlyj
Copy link
Author

hbghlyj commented Jun 28, 2024 •
edited
Loading

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

@hbghlyj hbghlyj changed the title The height of \stackrel is too large when using startup.js with minimal configuration of MathJax. The height of \stackrel is too large Jun 28, 2024
@hbghlyj hbghlyj changed the title The height of \stackrel is too large The height of \stackrel is too large in SVG output Jun 28, 2024
@dpvc
Copy link
Member

dpvc commented Jun 28, 2024

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 dpvc added Accepted Issue has been reproduced by MathJax team Investigate v4 labels Jun 28, 2024
dpvc added a commit to mathjax/MathJax-src that referenced this issue Jun 28, 2024
@dpvc
Fix bounding box computation for some embellished operators. (mathjax…
a5ddb12 
…/MathJax#3250)
@dpvc dpvc mentioned this issue Jun 28, 2024
Merged
@dpvc
Copy link
Member

dpvc commented Jun 28, 2024

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.

dpvc added a commit to mathjax/MathJax-src that referenced this issue Jul 2, 2024
@dpvc
Merge pull request #1114 from mathjax/issue3250
1c91d08 
Fix bounding box computation for some embellished operators.  (mathjax/MathJax#3250)
@dpvc dpvc added Merged Merged into develop branch and removed Ready for Review labels Jul 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accepted Issue has been reproduced by MathJax team Merged Merged into develop branch Test Needed v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dpvc @hbghlyj