Trouble setting roots

[DanielDrs]

Hallo,

I am a Katex-beginner, but I have many years of Latex-experiences. I have trouble to set root.

I used the shortcode:

[katex display=true]\sqrt{12345}  \qquad \frac{1}{\sqrt{12345}}[/katex]

[katex]\sqrt{12345}  \qquad \frac{1}{\sqrt{12345}}[/katex]

The page is visible here https://www.drphotgraph.de/?page_id=7017

Best regards, Daniel

[mbourne]

Daniel

Your math expression renders just fine on the KaTeX demo page https://katex.org/

So this suggests there is a conflict somewhere with the CSS (or script) on your page.

There is a LOT of CSS in all of the included plugin and other CSS files. I eliminated them one by one until I found the one causing the issue. It's this one:

https://www.drphotgraph.de/wp-content/plugins/royal-elementor-addons/assets/css/frontend.min.css?ver=1.3.60

With that one gone, your expressions look as they should:

In that one CSS file, there are 11,646 lines (when unminified).

I'd suggest either:

1. (Easiest) Remove the offending plugin from your Wordpress. At least temporarily disable it and see if you can live with whatever appearance changes it causes.
2. (Tedious) If you have a local copy of all of the files of your application, you could comment out portions of the CSS until you find the line or lines that are causing the issue.

But down the track, I suspect you're going to keep facing these sorts of issues. With tens of thousands of lines of CSS per page (156 kB of it on this page), it's going to be a constant battle trying to figure out why KaTeX is not working as you want.

Try removing as many plugins as you can - certainly the ones that give minimal aesthetic changes.

A good thing to do is to write any math you want to add in a clean (or very simple) page outside of your Wordpress setup. If it looks good on your simple page, but not when it's a post on your main site, then at least you won't pull your hair out trying to figure out if it's a KaTeX issue.

Hope it helps

Regards
Murray

[DanielDrs]

Thank you very much. I found a clumsy workaround:

{\hspace*{-3.5em}\sqrt{\hspace*{3.5em}12345}
I just need some formulae on one page, and just need the square roor of \sqrt{2\pi} several times. I simply
write a macro for \sqrt{2\pi} ....

Best regards, Daniel

[mbourne]

It actually didn't take me long to narrow down the problem.

The CSS for that royal-elementor-addons plugin has this (around line 240 when unminified)

svg:not(:root) {
    overflow: hidden;
    display: inline
}

It's the "display" bit that's giving you the problem.

Add the following to your page (you can maybe actually do it in your post) and it will fix the issue:

<style>
svg:not(:root) {
    display: block
}
</style>

Regards
Murray