weird top alignment only in the TOC of Bookdown's gitbook output

[thosgood]

Before reporting a bug

• Check common issues.
• Check the bug is reproducible in the demo. If not, check KaTeX is up-to-date and installed correctly.
• Search for existing issues.

Describe the bug:
I am using Bookdown's gitbook output to generate html pages. Normally, these use MathJax to render maths, but I've switched over to KaTeX, and everything works beautifully within the pages themselves, but there is something odd about any KaTeX rendering in the table of contents, namely certain elements (such as \widehat{\otimes}, or even just \mathrm{C}_0(M)) are invisible. Digging around in the browser inspector, I can get them to reappear if I disable the top CSS attribute (e.g. top: -2.55em for the 0 in \mathrm{C}_0(M)). I cannot, however, find a way to fix all the missing elements in one go, and I'm not sure if there is some clever CSS I can use, or if I need to render things differently (my render JS can be found below). Any help is much appreciated!

Screenshots:
You can view the live version of the screenshot below at https://labs.thosgood.com/translations/AIF-4-1952-73.html.

(La)TeX code:
The code of (La)TeX you tried to render:

E\widehat{\otimes} F

Rendering code:

var $document = $(document);
$document.ready(function() {
  $('eq').map(function() {
    var display = (this.getAttribute('env') == "displaymath");
    katex.render(this.textContent, this, {displayMode: display, fleqn: true, throwOnError: false});
  });
});

Environment (please complete the following information):

• KaTeX Version: 0.13.11
• Device: Desktop
• OS: OS X
• Browser: Firefox
• Version: 89.0.2

[edemaine]

Thanks for including a public version of the website! It has a lot of CSS rules of the form .book ... span which are impacting all KaTeX elements. This won't work, as KaTeX uses CSS a lot to fix layout. Is it possible to remove those rules, or make them more specific (e.g. adding > before span so that it's just direct children)?

[thosgood]

hm, I'm not sure how exactly I would go about doing this...
(as a temporary "fix", I've simply opted for showing the katex-mathml part instead of the katex-html; there are still some rendering problems, but much less severe)

[edemaine]

MathML doesn't work on Chrome yet, so beware that the math won't render there.

Something you could try is adding !important to all the KaTeX CSS rules. That should be enough to override some of bookdown/gitbook's rules (I recall display rules in particular, which this would help fix). Then for properties set by bookdown/gitbook but not KaTeX, @ronkok's suggesting a rule like .katex { margin: default !important; padding: default !important; }.

[thosgood]

unfortunately this doesn't work either (nor any one of the many things that I tried --- the closest I could get was manually changing every span to display: inline-block, and that sort of worked, but for some reason wouldn't work if I just used !important, and setting !important in all of katex.css just messed things up in the body of the page)

For now I've disabled KaTeX rendering just in the TOC, and, worst case, I might have to look at using MathJax or something to do the TOC separately (which is obviously a bit annoying).

I'm guessing there's no way for me to tell KaTeX to render in such a way that it puts all the CSS styling stuff inline? As in, a way of calling KaTeX without having to include katex.css? This would solve the problem I think (since inline styling always takes priority), but I doubt it's common functionality!

[edemaine]

Sadly, no, that's not a feature. I've wondered about it for rendering HTML email (though I'm not sure the fonts would be respected in email, and fonts require CSS). Plausibly you could do some postprocessing to see which KaTeX rules apply and then inline-style them...

[edemaine]

One other thing: perhaps you could raise an issue with Bookdown, to encourage a rewrite of that CSS rule to be more specific?