Support for fragments or equivalents with latex equations in revealjs presentations

[rundel]

Currently there does not seem to be any way to introduce progressive elements / lines of a latex equation block. This is quite an important feature for teaching that is available via \pause and related tools in beamer.

It is possible in a hacky way to avoid this by splitting things into multiple latex equations but this then precludes the use of aligned equations which is a significant cost to pay.

This may be a fundamental limitation imposed by mathjax / katex but seems worth at least looking into.

[jlgraves-ubc]

Does /toggle work for what you want?

https://mathjax.github.io/MathJax-demos-web/toggle-steps.html.html

https://www.math.union.edu/~dpvc/talks/2013-01-11.jmm/tex-toggle.html

I don't think Quarto's MathJax currently supports this, but it might be an easy way to integrate this.

[rundel]

I was not familiar with these options and hadn't come across them in my googling - the reveal steps variant seems closest to the desired behavior but the implementation looks a bit clunky and javascript based, but possibly automateable.

The toggle option seems to involve having a ton of repeated latex code which seems less than ideal for most use cases (but is more flexible).

[thht]

After lots of fiddling and great help from @mcanouil, I found a very easy solution: Just add the fragment css class to part of the equation like this:

$$
\begin{align}
  (x+1)^2
    &= \class{fragment}{(x+1)(x+1)}            \\[3px]
    &\class{fragment}{{} = x(x+1) + 1(x+1)}    \\[3px]
    &\class{fragment}{{} = (x^2+x) + (x+1)}    \\[3px]
    &\class{fragment}{{} = x^2 + (x + x) + 1}  \\[3px]
    &\class{fragment}{{} = x^2 + 2x + 1}
\end{align}
$$

And you need to put this in _quarto.yml to disable the assistive mode because otherwise the fragment classes get duplicated:

format:
  revealjs:
    include-before: [ '<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {enableAssistiveMml: false}});</script>']

[RoyiAvital]

This is great!

2 questions:

1. Why there is a need for {} before = in &\class{fragment}{{} = (x^2+x) + (x+1)} \\[3px]?
2. Why is the & outside the class?

I am asking as I usually use something like:

\begin{align}
  (x+1)^2
  &= \class{fragment}{(x+1)(x+1) && \text{some explanations}}            \\[3px]
  &\class{fragment}{{} = x(x+1) + 1(x+1) && \text{more explanations} }    \\[3px]
  &\class{fragment}{{} = (x^2+x) + (x+1)}    \\[3px]
  &\class{fragment}{{} = x^2 + (x + x) + 1}  \\[3px]
  &\class{fragment}{{} = x^2 + 2x + 1}
\end{align}

Yet it fails for me.

[ninaRjoyce]

The solution below works, but it seems to interfere some underlying process (I am new to Quarto and reveal.js, so please forgive the technical term) because, once all of the fragments are displayed, in order to advance to the next slide I have to click as many times as there are class{fragment} statements. For instance, in the example below I would click five times to move through the fragments and then I would have to click five more times to advance to the next slide.

The other issue is that if I have any :::{fragment} divisions on my slide, these get rendered first, then the ones using \class{fragment}, and I can't control this with fragment-index.

After lots of fiddling and great help from @mcanouil, I found a very easy solution: Just add the fragment css class to part of the equation like this:

$$
\begin{align}
  (x+1)^2
    &= \class{fragment}{(x+1)(x+1)}            \\[3px]
    &\class{fragment}{{} = x(x+1) + 1(x+1)}    \\[3px]
    &\class{fragment}{{} = (x^2+x) + (x+1)}    \\[3px]
    &\class{fragment}{{} = x^2 + (x + x) + 1}  \\[3px]
    &\class{fragment}{{} = x^2 + 2x + 1}
\end{align}
$$

And you need to put this in _quarto.yml to disable the assistive mode because otherwise the fragment classes get duplicated:

format:
  revealjs:
    include-before: [ '<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {enableAssistiveMml: false}});</script>']

[rben01]

In my case I had to right click the rendered LaTeX to bring up the MathJax window, then disable “include hidden MathML”. For some reason I could not get this to work automatically, even with the updated MathJax 3 syntax,

<script>
	window.MathJax = {
		options: {
			enableAssistiveMml: false,
		},
	};
</script>

[rben01]

This is great!

2 questions:

1. Why there is a need for {} before = in &\class{fragment}{{} = (x^2+x) + (x+1)} \\[3px]?
2. Why is the & outside the class?

I am asking as I usually use something like:

\begin{align}
  (x+1)^2
  &= \class{fragment}{(x+1)(x+1) && \text{some explanations}}            \\[3px]
  &\class{fragment}{{} = x(x+1) + 1(x+1) && \text{more explanations} }    \\[3px]
  &\class{fragment}{{} = (x^2+x) + (x+1)}    \\[3px]
  &\class{fragment}{{} = x^2 + (x + x) + 1}  \\[3px]
  &\class{fragment}{{} = x^2 + 2x + 1}
\end{align}

Yet it fails for me.

{} is needed before the = so that latex treats = as a binary operator. Without {}, you won't get proper spacing around the =.

& goes outside the fragment because it's not displayed per se, but is merely controlling latex alignment. There is nothing to “uncover” with &.

[mcanouil]

@rben01 would you mind showing a full but small reproducible document? This would help future readers.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

[willov]

Running on Zen browser, I couldn't get the include-before to disable the extra clicks needed. By default, the math renderer was set to SVG, and switch to be MathML made it work.

Alternatively, keeping with SVG and manually turning off Assistive MathML from the menu also worked, as mentioned by @rben01.