MathJax V2 vs V3 rendering

[SakshamGambhir]

Hi,

We have identified a difference in the output of the MathML tags with v2 and v3 for the same equation.

With v2:

With v3:

Issue: There is a space after i(superscript), G(subscript), and C(subscript) in v2, whereas in v3 the space has been removed.

MathML Equation:

<mml:math display="block"><mml:msub><mml:mrow><mml:mo movablelimits="false">Hom</mml:mo></mml:mrow><mml:mrow><mml:mi mathvariant="italic">G</mml:mi></mml:mrow></mml:msub><mml:mo mathvariant="normal" fence="true" stretchy="false">(</mml:mo><mml:mi mathvariant="italic">V</mml:mi><mml:mo mathvariant="normal">,</mml:mo><mml:mi mathvariant="italic">W</mml:mi><mml:mo mathvariant="normal" fence="true" stretchy="false">)</mml:mo><mml:msup><mml:mrow><mml:mo stretchy="false">↪</mml:mo></mml:mrow><mml:mrow><mml:mi mathvariant="italic">i</mml:mi></mml:mrow></mml:msup><mml:msub><mml:mrow><mml:mo movablelimits="false">Hom</mml:mo></mml:mrow><mml:mrow><mml:mi mathvariant="double-struck">C</mml:mi></mml:mrow></mml:msub><mml:mo mathvariant="normal" fence="true" stretchy="false">(</mml:mo><mml:mi mathvariant="italic">V</mml:mi><mml:mo mathvariant="normal">,</mml:mo><mml:mi mathvariant="italic">W</mml:mi><mml:mo mathvariant="normal" fence="true" stretchy="false">)</mml:mo><mml:mover><mml:mrow><mml:mo movablelimits="false">⟶</mml:mo></mml:mrow><mml:mrow><mml:mi mathvariant="normal">Φ</mml:mi></mml:mrow></mml:mover><mml:msub><mml:mrow><mml:mo movablelimits="false">Hom</mml:mo></mml:mrow><mml:mrow><mml:mi mathvariant="italic">G</mml:mi></mml:mrow></mml:msub><mml:mo mathvariant="normal" fence="true" stretchy="false">(</mml:mo><mml:mi mathvariant="italic">V</mml:mi><mml:mo mathvariant="normal">,</mml:mo><mml:mi mathvariant="italic">W</mml:mi><mml:mo mathvariant="normal" fence="true" stretchy="false">)</mml:mo><mml:msup><mml:mrow><mml:mo stretchy="false">↪</mml:mo></mml:mrow><mml:mrow><mml:mi mathvariant="italic">i</mml:mi></mml:mrow></mml:msup><mml:msub><mml:mrow><mml:mo movablelimits="false">Hom</mml:mo></mml:mrow><mml:mrow><mml:mi mathvariant="double-struck">C</mml:mi></mml:mrow></mml:msub><mml:mo mathvariant="normal" fence="true" stretchy="false">(</mml:mo><mml:mi mathvariant="italic">V</mml:mi><mml:mo mathvariant="normal">,</mml:mo><mml:mi mathvariant="italic">W</mml:mi><mml:mo mathvariant="normal" fence="true" stretchy="false">)</mml:mo><mml:mo mathvariant="normal">,</mml:mo></mml:math>

Is there any reason for the difference that has been observed?

Thanks,
Saksham Gambhir

[dpvc]

Here's what's happening. By default, MathJax uses TeX spacing rules rather than MathML spacing rules, and TeX determines spacing by applying one of eight TeX classes to every item in the expression, and uses the pair of classes to determine the spacing between adjacent items. When MathJax processes an <mo> node, it looks up the operator in the MathML operator dictionary to find the TeX class to assign it, but if it doesn't appear in the dictionary, it gets TeX class REL (for relation). Because Hom is not in the dictionary, it gets TeX class REL via this rule. Note that the arrows in your expression also are TeX class REL. TeX sets the spacing between two relations to zero (so that something like <= will have to space between the two characters), which is why you are getting no space there.

In version 2 of MathJax, there was an exception made to the rule for mo nodes that aren't in the dictionary: if it is a multi-letter name (like Hom), then it would get TeX class OP (for operator) rather than REL. That rule was not included in v3 (an oversight). I have made a pull request to add that in.

In the meantime, there are several possible approaches you could take. First, you could configure MathJax's output to use MathML spacing rather than TeX spacing, which would include space around any operator that is not in the dictionary.

Another possibility would be to change <mo movablelimits="false">Hom</mo> to <mi>Hom</mi>, which is probably a better encoding anyway. It would be possible to add a MathML filter to the MathML input jax during MathJax's setup that would looks through the expression for such <mo> nodes and convert them to <mi>.

Another possibility would be to add Hom to the dictionary with TeX class OP so that MathJax could find it and apply the needed TeX class automatically, though if you use other operators, they would each have to be added to the dictionary separately.

Finally, you could use the following configuration to patch to add the special rule for multi-letter operators.

MathJax = {
  startup: {
    ready() {
      const {mo} = MathJax._.core.MmlTree.MML.MML;
      const {getRange} = MathJax._.core.MmlTree.OperatorDictionary;
      const {TEXCLASS} = MathJax._.core.MmlTree.MmlNode;
      mo.prototype.checkOperatorTable = function (mo) {
        let [form1, form2, form3] = this.handleExplicitForm(this.getForms());
        this.attributes.setInherited('form', form1);
        let OPTABLE = this.constructor.OPTABLE;
        let def = OPTABLE[form1][mo] || OPTABLE[form2][mo] || OPTABLE[form3][mo];
        let noTexClass = this.getProperty('texClass') === undefined;
        if (def) {
          if (noTexClass) {
            this.texClass = def[2];
          }
          for (const name of Object.keys(def[3] || {})) {
            this.attributes.setInherited(name, def[3][name]);
          }
          this.lspace = (def[0] + 1) / 18;
          this.rspace = (def[1] + 1) / 18;
        } else {
          let limits = this.attributes.get('movablelimits');
          let isOP =  !!mo.match(/^[a-zA-Z]{2,}$/);
          let range = getRange(mo);
          if (range) {
            if (noTexClass) {
              this.texClass = (isOP && range[2] === TEXCLASS.REL) || limits ? TEXCLASS.OP : range[2];
            }
            const spacing = this.constructor.MMLSPACING[range[2]];
            this.lspace = (spacing[0] + 1) / 18;
            this.rspace = (spacing[1] + 1) / 18;
          } else if (noTexClass) {
            this.texClass = isOP || limits ? TEXCLASS.OP : TEXCLASS.REL;
          }
        }
      };
      MathJax.startup.defaultReady();
    }
  }
};

I think that will improve the situation for you.

You might also want to add stretchy="false" to the long right arrow, as right now it is shrinking to a smaller size that is sufficient to cover the capital phi above it.

[SakshamGambhir]

Hi

Thank You for providing the in-depth details.

I have a couple of points to ask for the above solutions provided.

1. How do we configure MathJax's output to use MathML? is there any specific property we need to add to the mathjax-config.js?
2. How/Where do we add words to the dictionary with TeX class OP?
3. We tried to add the patch code in the mathjax.config.js as below, but this didn't help as we observed no change even after adding the code.

Best,
Saksham Gambhir

[SakshamGambhir]

Hi Team,

Could you please update us on the queries posted above?

Best,
Saksham Gambhir

[dpvc]

We respond to questions when we are able to, and that sometimes takes time. Your message is still in my queue, and I haven't forgotten about you, but have not had time to respond. Poking me about it doesn't speed things up. In fact, it often makes it take longer, as I have to deal with extra messages and respond to them, like now. You say that there was no effect, but did you clear the browser cache before trying? It may be that you have the original mathjax.config.js file in cache and aren't getting the new one. Try adding a console.log() message in the checkOperatorTable() function and make sure that it is actually being called. If not, add one in the top of the ready() function and make sure THAT is being called. If not, you may need to provide more than just a snippet of the configuration.