mathjax / MathJax

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

padding excess in bussproofs #3251

Open Jean-Luc-Picard-2021 opened 3 weeks ago

Jean-Luc-Picard-2021 commented 3 weeks ago

Issue Summary

I am using Math Jax 3 with bussproofs. The problem is observable for example in the Chrome browser.

Positioning of the SVG box follows an algorithm, which makes it hard to see a full proof:

Steps to Reproduce:

  1. Use Math Jax 3 with bussproofs:

beginning of the HTML document:

<script>
    window.MathJax = {
        loader: {load: ['[tex]/bussproofs']},
        tex: {packages: {'[+]': ['bussproofs']}}
    };
</script>

end of the HTML document:

<script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

JavaScript call when the plain content has been rendered:

   MathJax.typeset();
  1. This is the second step

Create an example with a lot of branching:

\begin{prooftree}
\AxiomC{a => f, (a => b) => a |- a => f}
\AxiomC{a => f, (a => b) => a |- (a => b) => a}
\AxiomC{a, a => f, (a => b) => a |- a => f}
\AxiomC{a, a => f, (a => b) => a |- a}
\BinaryInfC{a, a => f, (a => b) => a |- f}
\UnaryInfC{a, a => f, (a => b) => a |- b}
\UnaryInfC{a => f, (a => b) => a |- a => b}
\BinaryInfC{a => f, (a => b) => a |- a}
\BinaryInfC{a => f, (a => b) => a |- f}
\UnaryInfC{(a => b) => a |- (a => f) => f}
\UnaryInfC{(a => b) => a |- a}
\UnaryInfC{ |- ((a => b) => a) => a}
\UnaryInfC{ |- ((a => b) => a) => a}
\end{prooftree}
  1. Further steps, etc.

When the window is normal size, the proof gets cropped:

crop

Enlarging the window adds some padding:

344378833-26f188ec-0e6b-49a7-a259-cccab72c2340

Technical details:

See intro and steps.

Supporting information:

The issue was also observed here: https://github.com/mathjax/MathJax/issues/3240

But in the above issue some Unicode problems were discovered. But the example here is completely free of Unicode. Also the example here doesn't use any Labels, only the Centering commands of bussproofs.

Jean-Luc-Picard-2021 commented 3 weeks ago

The problem is less aggravated for CHTML, since CHTML shows the scrollbar. The horizontal scrollbar is missing when I use SVG, thats why I resize the window, and this is also seen in the

above screenshots. In the below screenshot it is seen that unlike SVG output, the CHTML gives me a horizontal scrollbar:

344380605-95bdcb54-c47f-417e-b60e-a1ee2f05abfc

dpvc commented 3 weeks ago

As with your examples in #3240, the bounding box for the proof table is not being computed properly. The right-hand edge is not far enough right, so that is why the table extends past the right of the page, and the left-hand edge is too far left. It took me a while to figure out what was going on, but I have created a PR that should resolve the problem in the next release.

Unfortunately, the function that needs adjustment calls on other functions that are not exported from the BussproofsUtil.ts file, and so I can't create a patch for you without essentially duplicating the entire util file. It would be possible for you to clone the MathJax-src repository, checkout the issue3251 branch, install the dependencies, then run pnpm -s build to build MathJax yourself. Then you could take the bundle/input/tex/extensions/bussproofs.js file and call on that instead of the standard one. You could do this by using the URL to your bussproofs.js file in the loader's load array instead of [tex]/bussproofs. Note that you can still use the CDN version of MathJax, and only need the one bussproofs.js file from the copy of MathJax that you have built.

Sorry I can't give you an easier patch.