Typeset MathJax before element attaching to DOM

Question

Due to the fact I use the BackboneJs framework to render html views. The html elements containing the MathML codes somehow need to be used by MathJax to typeset in order to get the HTML-CSS code before attaching to the DOM.

I have tried to do the typesets before the elements attching to the DOM, but it didn't work quite well. Even the MathJax was processing the unattached html elements, the mathml inside the elements couldn't be rendered after appeared in the DOM.

Do I have to do the Typeset for the MathML after the target elements were attached to the DOM? Or there are workarounds to do the typesets before attaching to the DOM?

Answer 1

The elements must be attached to the DOM. MathJax needs to be able to measure the various subexpressions (so it can lay out things like fractions, etc.) and in order to do that, the container element for the mathematics must be in an active DOM. (Elements that aren't attached to the DOM don't have things like offsetWidth calculated, so MathJax can't tell how big they are.)

If you want to have the mathematics typeset in an element before it is displayed, you can attach it to the DOM and set visibility:none and position:absolute, then call MathJax to typeset the element, and then remove the visibility and position settings. Don't use display:none, as that also prevents MathJax from measuring elements.

See the examples from a talk I gave about this at the Joint Math Meetings in January 2013.