Cannot completely refresh a typeset math item

[Filip Rund]

Hello,

I have a math item in a collapsed Bootstrap Collapse. When all math on the page is being typeset, this math item is not visible. I understand that this can lead to issues with spacing, but I need to do it like this because the following script needs to know the final length of the textContent of the page (which is changed when replacing input jax with typeset math).

Because the math item is being typeset while hidden, it has an overlapping issue. I want to solve this by typesetting the math item again once the user opens the Collapse. Sadly, I couldn't figure out how to do that properly.

In this codepen:

https://codepen.io/editor/Filip-Rund/pen/019d6ea8-e63c-7e7d-b58c-916782c7f297

you can see a minimal example of the issue. I've also included functions fix1() and fix2() that demonstrate two fixes that I tried, but they do not completely fix the problem. You can preview these functions in script.js and call them from the console.

I am also aware of these two ways to fix this issue, but I don't want to use them:

• Leaving the Collapse open by default (by adding class `show` to the outer div) results in the math item being typeset correctly. This is why I'm hopeful that there is a way to fix the issue by typesetting the math item again once the user opens the Collapse. But I don't want to open it by default, not even if it closed automatically once the typesetting is completed.
• Setting mtextInheritFont to false in the MathJax configuration results in the math item being typeset correctly even while collapsed. However, I'd like to keep this setting set to true.

Thanks for any advice,

Filip

[Murray]

Hello Filip

Here's one way around your issue.

https://codepen.io/editor/mbourne/pen/019d70b1-97f4-73be-9903-164a2fbb7b8b

It works by placing the solution DIV offscreen, where MathJax will process it, but users can't see it.

Then once the math is typeset, it is moved back into view and appended to the "card" DIV.

You could also go about it another way, by injecting your math dynamically into the "card" DIV on the button click, and then typesetting it. You could always make it invisible until typesetting is finished.

it depends on your setup and how may of these you need to do, and also how complex the math is which will affect how long it takes to typeset. It seems funny to me to typeset it once, then do so again.

Hope it helps

Regards

Murray.

[Davide Cervone]

Murray's solution is one approach that works.  Thanks, Murray, as always!

Your fix1 solution is very close, and is easily corrected.  Rather than calling the item's state() function and attempting to typeset the entire page, you should call the item's rerender() function.  E.g.

item.rerender(Mathjax.startup.document);

That will cause the one item to be re-rendered, with no need to rescan the page.  You can loop through all the items in the container to do the same to each if there are more than one.

It would also have been possible to use

MathJax.startup.document.rerender();

or

MathJax.startup.document.rerenderPromise();

but that would cause ALL the math on the page to be re-rendered, which is not necessary.  Just re-rendering the one item (or all within the container) is sufficient.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/33b02e6b-f1c2-453c-87d7-bd246946c946n%40googlegroups.com.

[Filip Rund]

Hello,

thank you both very much for your help.

While Murray's solution definitely works, Davide's solution is the one I was trying to achieve.

Thanks again!

Filip

Dne čtvrtek 9. dubna 2026 v 13:17:22 UTC+2 uživatel Davide Cervone napsal:

[Murray]

Hi Filip

I wasn't satisfied with my solution because it required you to change your initial HTML, which may not have been possible (or easy).

So this version keeps your HTML and works by setting startup: {typeset:false} so the MathJax loads, but doesn't do anything on page load.

Then when the user opens the answer box, the math is typeset.

In order to avoid a flash of un-typeset math, I made the box contents invisible (using the class "inviz") until typesetting has finished.

https://codepen.io/editor/mbourne/pen/019d711f-174e-772b-86ab-6cdc485edecf

Gives you another option, anyway.

Regards

Murray

[Filip Rund]

Hi Murray,

Thanks again. In the end, I used something similar to your solution: https://codepen.io/editor/Filip-Rund/pen/019d73ec-c4ee-722c-a9b8-9a60e2a470f3

I eventually chose this over the re-rendering approach, because there were still tiny problems after calling the rerender method, like slightly smaller font size, font family not inherited after re-rendering, and page jumping to the top.

Best regards,

Filip

Dne čtvrtek 9. dubna 2026 v 22:07:11 UTC+2 uživatel Murray napsal:

[Davide Cervone]

there were still tiny problems after calling the rerender method, like slightly smaller font size, font family not inherited after re-rendering,

Ah, I didn't think of that.  When the container has display:none, MathJax can't determine the font or the size of the surrounding text.  The rerender() call starts at the rendering step, but the computation of the surround font and metrics are done earlier than that.  You can force that step to be redone using

item.rerender(MathJax.startup.document, MathJax._.core.MathItem.STATE.METRICS);

which will rerender beginning at the step that computes the metrics, which is just before the typesetting.

and page jumping to the top.

That I don't understand.  MathJax doesn't alter the scroll position, so it may be something else that is doing that.  Perhaps you can try inserting a delay before the rerender and see if the scroll-to-top comes first or along with the rerender.

Davide

To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/03034cae-661a-401c-9354-a542e3e4b390n%40googlegroups.com.

[Murray]

Neat solution without creating an extra class! I like it.