Fragments in MathJax

[mungerd]

I wanted to be able to use fragments (with specific indices) inside MathJax contents.
I added the following lines to plugin/math/math.js:

        MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
            var TEX = MathJax.InputJax.TeX;
            TEX.Definitions.Add({macros: {'fragment': 'FRAGMENT_INDEX_attribute'}});
            TEX.Parse.Augment({
             FRAGMENT_INDEX_attribute: function (name) {
                 var index = this.GetArgument(name);
                 var arg   = this.ParseArg(name);
                 this.Push(arg.With({
                    'class': 'fragment',
                    attrNames: ['data-fragment-index'],
                    attr: {'data-fragment-index':index}
                 }));
             }
            });
        });

So now I can type in equations like \[ x \fragment{2}{+ y} \fragment{1}{= z} \], where "x" appears first, followed by "x = z" and then "x + y = z".
Would it make sense to include something like this in math.js?

[bnjmnt4n]

@hakimel opinions? This seems fine to me.

[hakimel]

Looks like a useful addition. Happy to add this but we'll need to mention it in the readme too.

[bchretien]

Note: with this solution, the fragment indices are relative to the slide's current fragment index. This can be tested with this:

<section>
  <ul>
    <li>Dummy text</li>
    <li class="fragment" data-fragment-index="1">Some math:
      $$
      \begin{align*}
        \fragment{1}{x_1} \\
        \fragment{3}{x_3} \\
        \fragment{4}{x_4} \\
      \end{align*}
      $$
    </li>
    <li class="fragment" data-fragment-index="2">x_1</li>
    <li class="fragment" data-fragment-index="3">nop</li>
    <li class="fragment" data-fragment-index="4">x_3</li>
    <li class="fragment" data-fragment-index="5">x_4</li>
  </ul>
</section>

[gcalmettes]

useful addition, thanks @mungerd!

[djsutherland]

It's not only that the indices are relative like @bchretien said: I think the fragment-parsing code renumbers the fragment indices before the math is parsed. So this doesn't work as expected:

<section>
  <ul>
    <li>Dummy text</li>
    <li class="fragment" data-fragment-index="1">Some math:
      $$
      \begin{align*}
        \fragment{1}{x_1} \\
        \fragment{3}{x_3} \\
        \fragment{4}{x_4} \\
      \end{align*}
      $$
    </li>
    <li class="fragment" data-fragment-index="5">wanted x_4, actually x_1</li>
  </ul>
</section>

I worked around it by adding some empty spans with matching fragment indices, but it'd be nice to fix that for real somehow.

[djsutherland]

I've recently started pre-rendering my mathjax into SVG with mathjax-node. This avoids occasional layout problems with Reveal, reduces the client-side load of rendering, and as a happy side effect fixes the issue with fragment indices I mentioned above (since the data-fragment-index attributes are already present the first time Reveal looks at them).

If others are curious how to set this up, here is my current base code for a talk, using grunt. (I might switch to webpack or something in the future.)

[G1305]

how to fix responsive dimensions for mobile devices?

[dakling]

what is the current state of this - is it currently possible to fragment equations?

[cxkoda]

what is the current state of this - is it currently possible to fragment equations?

I am interested as well

[gcalmettes]

@dakling @cxkoda you can add fragments to LaTeX equations by tweaking the math.js plugin.
See this version and demo

[cxkoda]

@gcalmettes thank you very much for sharing. I checked it out some hours ago and it looks quite nice. however, from time to time the equations are not rendered correctly and i have to manually refresh the page to trigger the process again. are you experiencing this too? should we move this discussion over to your repo?

[gcalmettes]

@cxkoda I never had a problem with this. Note however that I usually use reveal.js and this modified math.js version in a framework compiled using webpack (see this repo), so that could explain why I never had a problem. I only made the standalone example to show you, so I can certainly check if that make the behavior unstable.

[manuelbb-upb]

I took the old code from @gcalmettes (for Mathjax V2, as I need automatic linebreaks) and modified plugin.js to use the new Plug-In API of Reveal 4+

The file and the compiled math.js, math.esm.js are attached.
Place them into the plugin/math folder and the commands provided by @gcalmettes should work:

\texclass{class_name}{element}
\fragment{index}{element}
\fragapply{any_class optional_index}{element}

[manuelbb-upb]

The issue might resolve itself soon.
With MathJax3, there already is the "html" extension, allowing to decorate LaTeX expressions with HTML classes, e.g., to create fragments with a^2 + \class{fragment}{b^2} = \class{fragment}{c^2}.
MathJax4 will have an additional \data command, that can additionally be used to set a "data-fragment-index" attribute: \class{fragment}{\data{fragment-index=1}{a}}.

This can be tested now already:

Reveal.initialize({
 hash: true,
 plugins: [ ..., RevealMath.MathJax3 ],
 mathjax3: {
  mathjax: "https://cdn.jsdelivr.net/npm/mathjax@4.0.0-alpha.1/es5/tex-mml-chtml.js",
  loader: {load: ['[tex]/html']},
  tex: {packages: {'[+]': ['html']},
 }
});
...

I also recommend setting sortFragmentsOnSync: false. It appears that else fragment indices get mixed up when changing slides. @hakimel probably can give hints to sort this issue out. My guess: MathJax.typeset() gets called on every slide change, triggering a sync (?). (Is retriggering typesetting still necessary with MathJax3+?) With sortFragmentsOnSync: false the data-fragment-indices also are normalized and sorted when slide is called, but this appears to happen after MathJax has completed initial typesetting.