MathJax v4 lazy load

[Prof. Caju]

Using MathJax 4 beta 6 for my testing forum (in production I use v2), I have some code that should be run after the math expression is visible in screen. Before using Lazy Load, I was using the following code:

startup: {
pageReady() {
return MathJax.startup.defaultPageReady().then(function () {
// some code
});
}
}

But now, with Lazy Load, this code is obviously not being loaded.

Where could I put this code with Lazy Load?

Kind regards,

[Davide Cervone]

I am not certain that I understand what you are asking for.  In my test file, the "// some code" does run after the initially visible equations have been typeset, but of course the expressions that are not visible aren't typeset yet.  So I'm not sure what you are asking for.  Can you be more specific about what you are asking for?  Are you asking for something that will run when an expression that wasn't initially visible is actually becomes visible?

Davide

[Prof. Caju]

Hello, Davide. Thanks for your answer :)

I want to run again the code when the expressions that are not visible in the first place, become visible.

I need to know the width, height and position of each expression, that's why I need to run the code after each expression becomes visible in the screen with each scroll of the page.

The code needs to be run after the initially visible equations and need to be run again whenever a new math expression becomes visible.

I hope I could clarify the situation :D

Kind regards,

[Davide Cervone]

There are at least two approaches to this.

The first is to use a post-filter on the output Jax to get the bounding box information for the expression.  For example:

MathJax = {

  loader: {load: ['ui/lazy']},

  startup: {

    ready() {

      MathJax.startup.defaultReady();

      const jax = MathJax.startup.document.outputJax;

      jax.postFilters.add(({math, document}) => {

        if (!math.lazyTypeset) {

          console.log(jax.getBBox(math, document));

        }

      });

    }

  }

};

would do that.  The bounding box gives you (among other things), the height, depth, and width of the expression in em units.  Note, however, that the DOM elements have not yet been inserted into the page, so while math.typesetRoot is available, it is not in the page DOM yet.

Alternatively, if you need the math to actually be in the page, you could use a renderAction that occurs after the math has been inserted in the page.  An example is the following (the 225 makes it happen after it is in the page DOM):

MathJax = {

  loader: {load: ['ui/lazy']},

  options: {

    renderActions: {

      newMath: [225, 

        (doc) => {for (const math of doc.math) MathJax.config.handleMath(math)},

        (doc, math) => MathJax.config.handleMath(math)

      ]

    }

  },

  handleMath(math) {

    if (!math.lazyTypeset && !math.outputData.rectReported && !math.isEscaped) {

      math.outputData.rectReported = true;

      console.log(math.typesetRoot.getBoundingClientRect());

    }

  }

};

In this case, you are getting the bounding rectangle from the browser using the DOM (rather than from MathJax using its internal computations).  The math.typesetRoot property points to the DOM element that is now ion the page.

Hope one of these works for you.

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 on the web visit https://groups.google.com/d/msgid/mathjax-users/902b78c2-1d11-4641-b81e-d650e0c5436fn%40googlegroups.com.

[Prof. Caju]

Thank you very much, Davide. The second approach was terrific :)

With the DOM object math.typesetRoot I was able to do all the manipulation I need.

It looks like I will be able to upgrade from v2 to v4 as soon as the new version is released. I am looking forward for this stable release.

Kind regards,