Unexpected empty space in array cell

[zurawsm3]

Unexpected empty space in array cell in tex-html tag above paragraph

Chrome Version 117.0.5938.132 (Official Build) (64-bit)

Steps to Reproduce:

Repo: source code

main code:

\begin{array}{|c|c|} <tex-html> <p style="text-align:justify; background-color: red; white-space: pre-line; max-width: 15em;">Rzucamy złotówką, dwuzłotówką i pięciozłotówką. Jakie jest prawdopodobieństwo tego, że na wszystkich trzech monetach wypadnie reszka? </p> </tex-html> & <tex-html> <img src="test3.jpg" width="100" height="140"> </tex-html> \end{array}

Why I see white space above paragraph element?

Technical details:

• Mathjax 4.0.0-beta.4
• Client OS: (Linux Mint)
• Browser: (Chrome Version 117.0.5938.132 (Official Build) (64-bit))

I am using the following MathJax configuration:

  MathJax = {
      loader: {
          load: ['[tex]/textmacros', '[tex]/texhtml'],
      },
      tex: {
          allowTexHTML: true,
          packages: {'[+]': ['texhtml']}
      }
  };

and loading MathJax via source code included in repo

[dpvc]

There are several factors that are in play, here.

First, a paragraph <p> has top and bottom margin by default, so there will be some space above the red background because of that.

Second, the cells of a table are aligned on their baselines, and since the baseline of an image is the bottom of the image, the baseline is pushed down by the tall image in the second column. That means the first column will be aligned so that its baseline is at the bottom of the image. The baseline of your paragraph is at the baseline of its bottom line, so the bottom of line of the red paragraph should be at the bottom of the image. There is a problem with determining the size of the red paragraph, however (discussed below), which is causing that alignment to fail. What should be happening is the following:

Note that the baseline of the bottom line of the paragraph is aligned with the bottom of the image. Because the image is taller than the paragraph, there will be space above the paragraph. Note that there is also extra space at the bottom of the table. This is due to the margin at the top and bottom of the paragraph, as illustrated in this screen shot:

Note that there is 19.2px of margin above and below the paragraph (that is the paragraph's 1em margin). You can remove that by adding margin: 0; to the style attribute for the paragraph, to get

The third factor is that your paragraph width is given in units of em. Because you are using tex2svgPromise(), when the math is being typeset, MathJax doesn't know where the math will appear in your document, and so when it needs to measure the HTML to find out how big it is, it inserts it into the document in the document body to do the measuring. In your case, the font-size used in the body is different from that in the output area, and so the size of the em in the HTML when it is in the body is different from that when it is in the output area, and MathJax will get the wrong measurement for how wide the paragraph is supposed to be. So when it is eventually displayed, the width is smaller than 15em, and the paragraph ends up taller than it should be. That is why it extends below the table in your screen shot.

I have been working on potential fixes for this that will work in both SVG and CHTML output, and that take proper account of the MathJax scaling factor for the output jax, as well as the font size within the mathematics, and that handle both relative units like em and fixed units like px. It is complicated, but I should be able to get it all to work, and will make a pull request to fix it in the next v4 release.

In the meantime, one solution would be to include an explicit font-size: 19.2px in the style attribute for the red paragraph. That will allow MathJax to measure it correctly.