Lazy Typesetting vs. JSXGraph

[Mathebibel]

After activating lazy typesetting (BTW: What a great feature!) all MathJax formulas in my JSXGraph graphics lost their position. Most of the formulas seem to have moved down a little bit. I use LaTeX + CHTML and Firefox on Linux.

[dpvc]

I don't know what mechanism is used to use MathJax in JSXGraph, so I can't really tell for sure, but I suspect that JSXGraph is delayed until MathJax runs and then it lays out the graph using the height/depth/width of the typeset math for positioning. but for lazy typesetting, the initial typeset doesn't fill in the math, so you get a zero-height, zero-depth, zero-width expression, and then that is later replaced by the typeset version when it scrolls into view. JSXGraph will have already placed the math based on the zero sizes and so the newly typeset math is misplaced.

One possible approach would be to give the lazy typesetting an option that allows some math to be typeset initially even before it is in view, so that the graphics would be processed as normal, but the rest of the page is lazy typeset.

[Mathebibel]

I really like your proposed approach.

Let's say I want to process all formulas whose containers have the class render-normal as normal and rest of the page is lazy typeset. How would you do that?

[dpvc]

Here is a configuration that I think will do the job.

MathJax = {
  loader: {load: ['ui/lazy']},
  startup: {
    elements: ['.render-normal'],
    ready() {
      MathJax.startup.defaultReady();
      const doc = MathJax.startup.document;
      doc.options.normalRender = true;
      class myMathItem extends doc.options.MathItem {
        constructor(...args) {
          super(...args);
          if (MathJax.startup.document.options.normalRender) {
            this.lazyCompile = this.lazyTypeset = false;
          }
        }
      }
      doc.options.MathItem = myMathItem;
    },
    pageReady() {
      return MathJax.startup.defaultPageReady().then(() => {
        MathJax.startup.document.options.normalRender = false;
        return MathJax.typesetPromise();
      });
    }
  }
};

This first renders all the render-normal elements (and their contents) without lazy typesetting, then goes back and renders the rest of the page using lazy typesetting. See of that works for you.

[Mathebibel]

You added the tag v2. I think it should be v3.

[dpvc]

Thanks. Fixed it.