Equation numbering change when fold equations with <details>

[ChasingZenith]

I found that I fold an equation with <details>, the numbering for the equations after the folding content will all shift forward. I don't know whether this is a feature or a bug. In fact, I love the way the site interacts with me.

However \eqref is broken in this case, because it always gives the number as everything is unfolded.

An example

A markdown example

+++
title="Folding make the equation reference change"
date="2021-09-09 21:49"
tags=[]
+++

# Folding make the equation reference change

$$
\exp( \pi i) = -1
\label{classic}
$$


~~~
<details>
<summary>I fold an equation here, if you unfold the content, the numbering of equation change.</summary>
~~~
where $$
i = \sqrt{-1} 
\label{i}
$$
~~~
</details>
~~~

$$
\exp\left(\pi\begin{bmatrix}0 & 1 \\ -1 & 0\end{bmatrix} \right) =  - I, \text{So, this is in fact the 3rd (3)}
\label{matrix_form}
$$

It is interesting to see that 

The number given by `\eqref` does not change, so they don't match if the content is unfolded.

- equation reference for the 1st equation  is: \eqref{classic}
- equation reference for the 2nd equation  is: \eqref{i}
- equation reference for the 3rd equation  is: \eqref{matrix_form}

[tlienart]

Is what you would like to have that when you fold you have

- equation reference for the 1st equation  is: 1
- equation reference for the 2nd equation  is: UNDEFINED
- equation reference for the 3rd equation  is: 2

and when you unfold it's 1-2-3 ?

sorry I don't really understand what you're expecting. What's for sure is that all the references are generated before the document is displayed, not on the fly, so here Franklin generates three references because there are three labels. Maybe you can have some CSS tricks in terms of how the eqnum counter is incremented but I wouldn't know how.

[tlienart]

ah no I imagine you want 1-2-3 and expect the numbers to stay (1)-(2)-(3) but somehow the CSS messes things up and you get (1)-(2) then switch to (1)-(2)-(3)

Yeah you'll have to play with how the eqnum counter is incremented, not sure how to do that, I imagine you can make sure it gets incremented even in this detail environment, will give it a quick shot but not sure

[tlienart]

This works but is probably not very nice, maybe if you just give a special class to details it's fine

details {
  counter-increment: eqnum;
}

details[open] summary {
  counter-increment: eqnum -1;
}

folded

unfolded

Notes

I think that's what you want right?

you could tweak this by having several classes indicating by how much there should be an increment like if in your detail there's 2 equations, there could be a class <details class="add2"> etc.

[ChasingZenith]

The problem is that the reference and the equation mismatch when the content is folded.

I don't have a strong preference for one of them:
A. The numbers on the right of the equation remain unchanged. i.e. Everything to stay 1 - 2 -3.
B. The number on the right of the equation reacts dynamically and \eqref changes accordingly. But the problem arises when one gives a reference to a folded equation that was folded.

I think A is already enough for me, but now I get a dynamic label.

Anyway, thanks for your advice on how to make B work. I think it could be a feature if Franklin.jl can smartly make B work beautifully.

[tlienart]

Ok so just to check:

With the trick I gave above in the CSS, the number corresponds to the references in folded/not folded; the bottom equation will always show as number (3). I assumed this is what you wanted? I.e. all references are correct so what I did is (A) not (B).

In terms of dynamic, I can basically already tell you that it's not going to happen any time soon. Franklin generates fully static content meaning that no matter what you do on the website, everything is already pre-baked; you can get dynamic stuff if you have some clever CSS (as above) or some additional JS but it's not Franklin that will do the dynamic stuff.

PS: it's possible that I misunderstood what you're suggesting, in this case I apologise and please kindly tell me again 😄

[ChasingZenith]

I’m sorry. I was me who misunderstood. I used to think that is the solution for B.

I will try tomorrow since it is 12:00am here

[ChasingZenith]

It does work although with a lot of handmade adjustments.

I search it on Google and Github. And I find that the fundamental problem is that KaTeX does not provide good automatic numbering support, as stated in KaTeX/KaTeX#350.

The automatic equation numbering in Franklin.jl is provided by CSS implementation in franklin.css in the FranklinTemplate. I can't search for a 'clever enough' CSS implementation for automatic numbering on the web. This can be very difficult, I guess, otherwise, there wouldn't be so many issues on that in the KaTeX repository

The good news is that Mathjax provides automatic equation numbering. I will try that later.

[ChasingZenith]

MathJax performed perfectly as I expected.

folded

unfolded

Render

I find that you suggest tex-svg.js, and MathJax gives tex-mml-chtml.js for beginners. And I find that tex-mml-chtml.js gives a better look.

tex-svg

tex-mml-chtml

[tlienart]

Good if MathJax does what you expect! out of curiosity did you try the CSS trick I mentioned earlier with details[open]? because it does exactly what's on your screenshot (and, as I said, if you had more than one equation in the details, you could very easily adjust for that with a few classes).

Anyway there may be other reasons why you're not considering this so maybe I'm missing something. Also if MathJax works well for you, that's great (you might get some other discrepancies but overall it should be fine).

Note that the KaTeX numbering feature is a distraction, the numbering as is done in Franklin is a CSS trick that comes from the KaTeX community, is well known and works very reliably with only one difficulty that I know of which is the positioning of the number when you have multiline equations or overflowing equations.

PS: I don't see the difference between your last two screenshots :)

[ChasingZenith]

Yes, I have tried that and it works. I know it is well known after searching but I think this method needs an extra operation every time I fold an equation. (I answer it here) So I decided to go to the MathJax side. If I have any problem with MathJax, I will try to solve it and give feedback here or in FranklinTemplate.

PS: I don't see the difference between your last two screenshots :)

Oh, that is probably because my screen is a low dpi (dot per inch) one, 27inch but 1080p. The first one is a little bit blur though still very readable. The second one is clear and sharp. They are in fact quite different in visual experience. Perhaps I should also mention I use Arch Linux and KDE desktop environment with AMD GPU.

[tlienart]

thanks for the feedback!