A small bug of KaTeX plugin

[yuzijie]

Hi, I have found a small bug of KaTeX plugin which is the vector symbol cannot be displayed.

From KaTeX official website

From Tiddlywiki KaTeX demo page

[Jermolene]

Thanks @yuzijie I'm investigating. One issue is that the demo on the KaTeX site actually wraps the text you enter into the string \displaystyle{<typedformula>}. After allowing for that I'm finding that TW and the KaTeX demo are generating exactly the same HTML, so I think it might be a fonts issue. Will continue investigating.

[Jermolene]

Hi @yuzijie what browser are you using? After a bit more investigation, I think this might be a Chrome bug; in my tests, TiddlyWiki renders correctly in Firefox:

It's not clear why the KaTeX demo site isn't encountering the same bug, I'll continue investigations.

[yuzijie]

Hi @Jermolene, It is indeed a Webkit bug! I never use Firefox, so I assumed that all browsers should have the same problem. However, I did some investigation today, and found that this bug is related to webkit browsers only, except for Safari, which doesn’t apply the correct length of the arrow. Then accidentally, I found this weird thing:

It proves my point.

[yuzijie]

I think the best solution for this is to add text-rendering: auto; in .katex class.

[Jermolene]

Thank you @yuzijie for your brilliant detective work, the fix works for me.

[ghost]

Hi,

I am having this problem with my TiddlyWiki. Vector arrows do not display, whether I open it in Chrome, Edge, Internet Explorer or Firefox.

I am using the latest version, 5.1.17, of both TiddlyWiki and the KaTeX plugin.

I tried to switch from "text-rendering: optimizeLegibility;" to "text-rendering: auto;" within all the KaTeX parts of the .html file, but it didn't help. @yuzijie : What exact part of the .html file is the .katex class you mention, in which I should add "text-rendering: auto;"?

Is nobody else still experiencing this?

Sincerely,

[eguiraud]

Hi, still experiencing this (I'm on firefox).

I created a new tiddler KatexStylesheet with tag $:/tags/Stylesheet and content

.katex {
    text-rendering: auto;
}

and, although it seems that the CSS is being picked up (checked e.g. by changing katex background to red), I still cannot see any arrows over \vec{x}.

[pmario]

@bluehood ... The problem seems to be from SVG max-width definition from TW.

.katex svg {
  max-width: initial;
}

This does the trick for me in FF. .. The text-rendering: auto; imo isn't needed, since it is applied already that way.

[pmario]

I was testing with: https://tiddlywiki.com/plugins/tiddlywiki/katex/

So if you did include other plugins, which include CSS settings it may be different results!

[pmario]

@Jermolene ... IMO this bug should be reopened an fixed.

[eguiraud]

@pmario thank you so much, max-width: initial did the trick!

[Jermolene]

Thanks @bluehood @pmario I've pushed a fix for v5.1.20 -- 94d18a2