Bounding box on \frac{} is too small

christianp commented 13 years ago

In this example: http://somethingorotherwhatever.com/numbas/mathjax-bounding-box.html

Source:

<html>
    <head>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
            });
        </script>
        <SCRIPT SRC="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></SCRIPT>
    </head>
    <body >
        <p>some <span id="preview">$\frac{ 1 }{ \left ( 2 x + 3 \right )^{ 4 } } + \frac{1}{xyxyxyxyaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxyxyxy}$</span> maths</p>
    </body>
</html>

The bottom edge of the bounding box around the span containing the maths is not low enough. The reported height of the element is slightly less than the actual value. The top edge of the bounding box is exactly aligned with the top of the digit 1, but the bottom edge is a few pixels above the bottom of the characters in the denominator. The only time I've seen this happen is with a \frac{} environment. I'm using Chrome 11 and Firefox 4.0.1.

If this is just how things are meant to be, is there a way to get the "real" height of the expression anyway? I want to position an HTML element directly below the maths.

dpvc commented 13 years ago

Although it is not completely clear from your description, your wording suggests that you are trying to obtain the size of the mathematics by using the offsetWidth and offsetHeight of the preview span. That is not going to work. Inline spans have the height and depth of the standard line regardless of their content. This may seem counter-intuitive, but I think it is so that you can do relative positioning of elements within the line without having to worry about the height of the line change due, for example, to the presence of an image that is larger than the usual line height, especially when such elements bug be wrapped to the NEXT line, so you could not be sure of the line height actually in effect.

In any case, the fact that the span's bounding box is not that of the math is not an error. That is the expected behavior. For instance, view

<html>
<head>
<title>Test Span Height</title>
</head>
<body>
<br>
<span style="background-color:red;">
this is a test span
<img height="50" width="10" style="vertical-align:-20px; background- color:blue;" />
with an image that is larger than the line height
</span>
</body>
</html>

(available at http://www.math.union.edu/locate/Cervone/transfer/examples/span-test1.html) to see that the size of the span (shown in red) is not affected by the presence of the tall and deep image (blue).

In order to have the container show the actual size of the contents, it has to be a block-level element. If you set the span's style to include display:inline-block, then the red background will include the height and depth of the blue image. (See http://www.math.union.edu/locate/Cervone/transfer/examples/span-test2.html)

Similarly, if you made your preview span an inline-block span, then you should be able to get the true height.

Davide

christianp commented 13 years ago

Aha, that's exactly what I wanted! Thanks very much.

mathjax / MathJax

Bounding box on \frac{} is too small #129