Slight overlapping when Typeset is called on a display:none div

[aRbEr]

When calling MathJax.Hub.Typeset() on a div where css display is set to "none", the result of the rendering is in some cases overlapping. Please take a look at the this image http://i42.tinypic.com/2605pif.png and notice the "y" before the "to solve the problem".

The "Question:" content had display:block, while the "Step 1" div had it's display set to "none" when Typeset() was called on the whole div surrounding both of them.
The step display state is toggled via a button down on the page.


The text used is the following:
Look at the inverse cosine function at the R.H.S. of the given problem and assuming the terms on L.H.S. as $x$ and $y$, we use $\cos \left( {x + y} \right) = \cos x\cos y - \sin x\sin y $ to solve the problem.

Is there any solution to render this correctly ?!

[Davide P. Cervone]

The problem is that within a container where display is "none", browsers do not compute the widths and heights of elements, and so MathJax can't tell how big the letters really are.  In this case, it uses a div with visibility:hidden that it adds to the beginning of the page in order to typeset the formulas, hoping that the fonts and styles are similar enough that when they are placed into their correct location, they will still work.  This works better in some browsers than other (with Internet Explorer being one that works the worst).

The way to handle this would be to NOT typeset the element with display:none until it is displayed (when the display is toggled via the button farther down the page).

Alternatively, you could call MathJax.Hub.Reprocess() on the div that has been revealed after the display:none has been changed.  This should replace the math with re-processed output, correctly sized for the current location.  This will cause an update of the layout, but it shouldn't be too bad, since the original math should be close to the correct size.

In MathJax version 2.0, you can use MathJax.Hub.Rerender() instead, which will avoid redoing the TeX to MathML conversion and just reproduce the output.  Since v2.0 displays the equations in groups of several at a time (rather than one at a time), the update should occur in a single step, rather than equation-by-equation, for a smoother look.

Note that when I say "use MathJax.Hub.Reprocess()", you need to perform that via MathJax's queuing mechanism, as in

MathJax.Hub.Queue(["Reprocess",MathJax.Hub,revealedDiv]);

See 

http://www.mathjax.org/docs/1.1/typeset.html

for details.

Davide

[aRbEr]

Thank you so much Davide,

Now here is my other question. I don't know if this is very hackish, but is there any problem with doing the following:

1. Page loads with default wrapper/parent container (of both "question" and "step" container) set with "position:relative;"
2. Also initially have the "step" block be with "visibility:hidden; position:absolute;"
3. Have Typeset() do its work
4. When Typeset() is done/complete, change "step" to "display:none;visibility:visible;position:static"

I did try this and it appears to work fine, even in IE.

The mentioning of "position" above has nothing to do with the error, it's just for cosmetic purposes so that I don't get any extra space on the page while Typesetting() ?! What do you think ?

[Davide P. Cervone]

Yes, that looks good.  I'm not sure it is necessary to have the position:relative in (1), but it shouldn't cause any problems (leaving it out should cause the absolute positioned elements in (2) to move to the top, left of the page rather than the immediate container, and that might help the extra space issue as well, since they are as out of the way as they can be.  You might also explcitily put top:0,left:0 in (2), as I think the position doesn't necessarily default to that in all browsers.

Other than that, looks good.

Davide