counter-reset on body from KaTeX prevents downstream users from defining their own body counters

[jez]

This post is half question and half "here's something I learned, maybe it'll be useful to someone else."

I recently went through an upgrade from KaTeX v0.11.1 to v0.15.0. This range of revisions included this addition, which first landed in v0.13.0:

+// Automatic equation numbers for some environments.
+// Use parallel counters for HTML and MathML.
+body {
+    counter-reset: katexEqnNo mmlEqnNo;
+}

→ View commit 80b0e3dc2

The page I where use KaTeX defines its own CSS counters in addition to those that KaTeX defines. In old versions of my page, it also defined those counters on the body element.

This caused a problem on my page: since the KaTeX stylesheet was loading after my personal CSS file, KaTeX's counters would overwrite my counter-reset definition on body:

By the time you read this, I'll likely have worked around the problem (by moving my counters to be defined on main instead of body), but if you're curious, you can see an example of the HTML structure my page uses here:

https://jez.io/pandoc-markdown-css-theme/kitchen-sink/#side-notes

The sidenote-counter from the screenshot above powers the sidenote numbers you see in the page, which at the time I'm writing this post looks like this, where all the sidenote numbers read 1:

---

My questions:

• Is there some way when using CSS counters to allow multiple separate libraries to define counters with counter-reset on the same element? I have looked through the counter-reset docs but I don't see anything that looks like

  counter-reset: my-counter $merge-with-counters-from-cascade;

  If something like this feature existed, KaTeX could use this on its body counter-reset, which would then instruct the browser to merge KaTeX's counters with my counters.

• Is there any selector other than body that makes sense for KaTeX to store its counters on? For example, I wonder if KaTeX users should be required to place a class="katex-equation-container" (or some other name) on some element in order to opt into KaTeX's equation numbering.

  This is just an idea—obviously doing something like this now would be a breaking change, and would be additional toil that KaTeX users would have to discover and implement before being able to use numbered equations. I'm not saying it's a perfect solution but merely presenting a possibility.

If you have any other thoughts on this issue I'd be curious to hear them. Again, in my CSS library I've worked around this by simply defining my sidenote-counter variable on the main element, instead of on the body element, which luckily works for me (as there's always a main element already wrapping every sidenote on the page). But I recognize that this solution might not be a possibility for other users of KaTeX, so I figured I would at least start the conversation in case it's useful for others to discover.

Thanks in advance for your response, and thanks for your work on KaTeX, which has been an incredible library to use.

[ronkok]

@jez My take on CSS counters is pretty similar to yours. (1) The good part is that counters enabled us to support automatic equation numbering, which would otherwise have been difficult in dynamically updated pages. (2) The bad part is that they seem pretty inflexible in operation.

Is there some way when using CSS counters to allow multiple separate libraries to define counters with counter-reset on the same element?

Yes, you should be able to set multiple counters on an element with a rule such as:
counter-reset: alphaCounter betaCounter;
My experience is that a rule like that overwrites any previous counter-reset, but I have not done thorough testing on all browsers.

I wonder if KaTeX users should be required to place a class="katex-equation-container" (or some other name) on some element

I'm reluctant to dictate to users how they organize their HTML.

[edemaine]

A few additions:

1. I wonder if you could load KaTeX's CSS before your custom CSS? Alternatively, you could add !important to your counter-reset rule.
2. It's also possible to put the counter-reset rule on :root (the HTML element). I guess this is an easy way for two (but not more) systems to co-exist...
3. For instances where you want to provide your own counter-reset rule, or where you want KaTeX to reset counters in separate <article>s (say, which I do in my system), we could provide a class like "katex-reset-counters" with the same counter-reset, which would be more convenient than manually duplicating the katexEqnNo mmlEqnNo rule. Like @ronko, I'd be reluctant to remove it from the body (or root), though, as otherwise the counters don't increment "out of the box".