Hiding content until typesetting is complete

In general

From https://groups.google.com/d/msg/mathjax-users/nI1eIEjk-ak/oVyy1nwtboYJ

The issue I face now is that on first load you can actually see it flash the orignal text before the ajax callback executes and MathJax renders the content. Is there a typical approach whereby only the rendered content actually displays? Or is this an expected result of doing this in an ajax call?

It is not unusual for the original text to be visible before MathJax processes it. If MathJax needs to load any components (like its output jax the first time it is used), that is done asynchronously, so the page will be displayed in the meantime until the component is loaded.

You could set the div's visibility:hidden property before loading its contents, and then after it is loaded, typeset the math setting visibility to "" afterward. You would need to use the MathJax.Hub.Queue to synchronize that. E.g.

$("#DivID").css("visibility","hidden");

$("#DivID").load('@Url.Action("ActionResultMethod", "ControllerName",{controller parameters})', function () {
  MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"DivID"],
    function () {
      $("#DivID").css("visibility",""); // may have to be "visible" rather than ""
    }
  );
});

might work. I don't use jQuery myself, so don't know if this is correct or not.

---

for MathML

From https://groups.google.com/d/msg/mathjax-users/pnX0qKlg9fc/KKkBDd05_QkJ

Yes, the browser will try to interpret the MathML when it initially downloads the content, and will display that before MathJax runs. For browsers that understand MathML, it will show the math briefly before MathJax processes it. For those that don't understand MathML, it will display the text content of the various elements, which will produce something like the math, but without the formatting of fractions, roots, etc.

If you want to prevent that, you can use CSS to hide tags:

<style>
  math {display:none}
</style>

However, if someone uses the MathJax contextual menu to switch to NativeMML output, that will also be hidden. To get around that, you can ask MathJax to disable this stylesheet if the NativeMML output jax gets used:

<style id="hide-math">
  math {display:none}
</style>
<script type="text/x-mathjax-config">
  MathJax.Hub.Register.StartupHook("NativeMML Jax Ready",function () {
    document.getElementById("hide-math").disabled = true;
  });
</script>

This must go before the script that loads MathJax.js itself.

Davide

---

More discussion

https://groups.google.com/d/msg/mathjax-users/iuXkLLcNubw/diuxfWh2SUQJ

---

http://www.merlyn.demon.co.uk/p231-jax.htm (8kB) is now almost the final document, EXCEPT that

1. For speed in testing, it contains only one page of the original, with three maths segments $$...$$ (I've not yet really considered using inline MathJax, since inline maths is already there in HTML);

2. There is less HTML in the pre- and post-ambles.

For the convenience of those who want to see only the text, I now run the typesetter only on demand (a button, "Typeset"), calling MathJax.Hub.Typeset().

At first, pressing the button left (as expected) the original dummy non-equations, generated by an internal preprocessor, showing. Inserting MathJax.Hub.Config({preRemoveClass: "EQN"}); did not hide them -- perhaps I have misunderstood or they are not close enough. That does not matter, as I have easily coded

EQNs = document.getElementsByClassName("EQN")
for (J in EQNs) EQNs[J].style.display="none"

to hide them.

Now, after pressing my button, all is fine. But, before pressing it, the ugly TeX shows, and

MathJax.Hub.Config({ tex2jax: {preview: "none"}}); 

did not remove it. Perhaps I need to run some of your processing code onload, to extract the TeX from view??

In my preprocessing, I could I expect wrap each $$...$$ in <span class="HID">...</span>, and if necessary unhide it before calling Typeset(). But it would be better to do it "your" way, which I have not yet found.

---

For the convenience of those who want to see only the text, I now run the typesetter only on demand (a button, "Typeset"), calling MathJax.Hub.Typeset().

At first, pressing the button left (as expected) the original dummy non-equations, generated by an internal preprocessor, showing. Inserting MathJax.Hub.Config({preRemoveClass: "EQN"}); did not hide them -- perhaps I have misunderstood or they are not close enough.

You are right, they are not close enough. There can be nothing between the preview element and the mathematics, and that includes spaces and newlines.

That does not matter, as I have easily coded

EQNs = document.getElementsByClassName("EQN")
for (J in EQNs) EQNs[J].style.display="none"

to hide them.

That is fine.

Now, after pressing my button, all is fine. But, before pressing it, the ugly TeX shows, and

MathJax.Hub.Config({ tex2jax: {preview: "none"}});

did not remove it. Perhaps I need to run some of your processing code onload, to extract the TeX from view??

The TeX is part of the page, and so will be displayed until something is done to change that. Since MathJax is not running until the button is pressed, MathJax won't modify the page until then, so it continues to show until the button is pressed. You are right that you could run the preprocessors to remove the TeX code and prepare it for typesetting; you would no longer see the TeX, but the math would be available for processing if the button is pressed. To do that you would want to set the preview to "none" as you do above, and then use

MathJax.Hub.Queue(["PreProcess",MathJax.Hub]);

to run the preprocessors without typesetting the results.

Alternatively, you could put the TeX code into the internal format initially rather than have it be part of the text of the page. That is, you could use

<script type="math/tex; mode=display"> ... </script>

around the displayed equations. Then the TeX would not show up at all until typeset. See the documentation on Math in the page for details.

In my preprocessing, I could I expect wrap each $$...$$ in <span class="HID">...</span>, and if necessary unhide it before calling Typeset(). But it would be better to do it "your" way, which I have not yet found.

Either of the suggestions above should do it.

Davide