Thick / Double Fraction Bar showing up

[arshbucks]

Trying to write some simple fractions to the screen, but
(a) a double lined fraction bar keeps showing up - my config is pretty standard (using latest 0.9.0 katex version), and using the below expression.
Note: The issue is definitely the "type" of line (looks like a "double border"), and not the thickness - see third image.
(b) the division symbol is misaligned when the font is small, but gets resolved when the font is bigger (not a big deal, jw if there is an easy fix)

$\\frac{1}{2} \\div \\frac{3}{4}$

Any ideas if I'm doing something wrong, or if this is a known issue?
Thanks

[kevinbarabash]

@arlohosk what browser are you using? Also there are multiple pre-release versions of 0.9.0, can you be more specific? Have you tried the latest one, v0.9.0-beta?

[arshbucks]

Thanks for the quick reply.

I am using chrome, but have tested in IE (edge) + Firefox as well, same issue.

I am pulling the npm package directly from here https://www.npmjs.com/package/katex and updated it today, so I believe it is using v0.9.0-beta (though this issue was present 3-4 months ago as well).

Note: I am using the autorender functionality (In my case, I'm using Meteor, so I had to take the full auto-render.js and copy it into my app), not sure if that would affect the formatting though.

[ronkok]

@arlohosk Are you using KaTeX to render something inside an SVG?

[arshbucks]

@ronkok Nope, just a standard html (with some css applied of course - hence the green background in one of the pictures)

[ronkok]

Can you provide a link? I'd like to go investigate.

[arshbucks]

@ronkok hmm...Its not deployed (and won't be until fixed) into our prod site + behind a log in page.

Is there a messaging function on github I'm missing or some way to reach you directly? I could try to screenshare code or send you a log in on a dev site

[ronkok]

My first hypothesis is that the root cause of this issue is the same as issue #1088. Some external SVG styling has caused the frac-line, which is an SVG path, to render with a black border and a white fill.

PR #1089 was merged into master yesterday. If my hypothesis, is correct, then both problems will be fixed when that PR is released.

[arshbucks]

@ronkok Gotcha. Ok, happy to wait and see on that.
Not a show stopper, but would be great to have it resolved.
I will look into the SVG hypothesis in the meantime

[arshbucks]

Btw, behavior is also weirdly inconsistent - I haven't changed anything on this page (although I did activate MathJax on another HTML template - this is a "SPA" Meteor web app, I'm assuming that's what caused it), and that causes Katex to go haywire:

https://imgur.com/a/QpbOl

[ylemkimon]

The v0.9.0-beta1 was released a few hours ago. Could you try it?

[arshbucks]

@ylemkimon thanks for the heads up. Will give it a shot later this week (due to other reqs)

[mbourne]

I downloaded 0.9.0-beta yesterday, and also came across the inconsistent double-thickness fraction line problem. Here's a screen shot (Chrome latest on Win7, same deal on Opera, FF, IE. I use 1.15em for .katex font-size) showing some thick, some not thick fraction lines:

I also noticed something odd when looking closely at the SVG. Here's what I see for each of those thick fraction line cases:
<svg width="100%" height="0.2em" viewBox="0 0 10 10" preserveAspectRatio="none"><line x1="0" y1="5" x2="10" y2="5" stroke-width="2"></line><line x1="0" y1="5" x2="10" y2="5" stroke-width="2"></line></svg>
It seems the second line is identical to the first and I'm trying to figure out the purpose of that.
As it turns out, the SVG is identical for both thick and thin line cases.
I don't have a live page since I haven't uploaded this version to my server.
I downloaded 0.9.0beta1 just now and the result is the same - screen shot would be identical.

[ronkok]

@mbourne I think that @arlohosk's double line is being caused by something different than your thick line. I hope that the double line has just been solved by release 0.9.0-beta1.

Also, @mbourne , the second SVG line is there by design. I have an explanation in two versions. The short version is that the second line is there to prevent the frac-line from blurry edges.

Read on if you want to hear the long winded second version.

Imagine that a frac-line is positioned on a monitor screen so it is centered exactly on the border between two rows of screen pixels. The frac-line is only 0.04em thick, so let's say that it covers 30% of the upper pixel and 30% of the lower pixel. How that will render varies with the browser and with the way we draw the line.

1. A span border seems to be treated by some browsers so that pixel is binary -- either completely on (black) or completely off. KaTeX used to make frac-lines with span borders and sometimes Chrome would disappear them.

2. An SVG path will not be omitted, but it won't be black, either. Instead the browser takes that 0.3 coverage value and uses it to anti-alias the pixel. It will be some shade of gray. That makes some lines appear to have blurry edges.

So I wrote the SVG with two lines, written directly on top of each other. I think of this as similar to two brush strokes. The browser adds some gray to the pixel for each brush stroke and it ends up black (or near black). And we perceive a frac-line with crisp edges instead of blurry edges.

Unfortunately, we also sometimes get lines that are too thick. That's better than a missing line, and I think a few thick lines are better than a lot of blurry lines. If I ever think of a way to make all the problems go away, I'll change it.

If I can't think of anything, well as time goes by, we'll all migrate to screens with higher pixel density. The frac-lines will get closer to the 0.04em value that Donald Knuth intended.

[arshbucks]

Still getting the same double-bar issue with 0.9.0-beta1

Not sure if this and the earlier image I posted (https://imgur.com/a/QpbOl) is related with the haywire fraction layout when mathjax is activated (on another part of the app)

[soichih]

I am seeing a related but an opposite issue. It looks like the horizontal bars are not displayed in sqrt/frac.

Like.. I have following syntax.

c =\sqrt{2}

c = \frac{1}{2}

which is displayed as

If I downgrade to Katex 0.8.3, I see horizontal line for \frac (double-lined) but not \sqrt.

[kevinbarabash]

@soichih what OS/Browser are you using? Also, it looks like there's some issue with the spacing around the = which is weird b/c the v0.9.0-beta1 doesn't even use CSS for that spacing anymore. What version of KaTeX are you using?

[kevinbarabash]

@mbourne can you post a link to that page?

[soichih]

@kevinbarabash I am using Ubuntu16 / Chrome. I am seeing the same issue with Firefox also.

I've added the text Katex syntax here

https://brainlife.io/pub/5a539560b1fd8000452bda45

[kevinbarabash]

@soichih I'm seeing the same thing in Safari. I'm confused. It's using a sqrt character but we use SVG for \sqrt now. What version of KaTeX are you using?

[ylemkimon]

@soichih I think you are using the new version of KaTeX CSS, but old version of KaTeX JS.

[kevinbarabash]

Firefox (Win7) @ 12px

Firefox (Win7) @ 12px @ 90% zoom

I think Firefox is having issues with the \sqrt bar being so close to the edge of the SVG. I wasn't able to get the fraction bar to disappear even when zooming out all of the way.

[soichih]

@ylemkimon I am using vue-markdown which uses markdown-it-katex which currently uses katex 0.6.0

https://github.com/waylonflinn/markdown-it-katex/blob/master/package.json#L25

I believe I should ask the maintainer of markdown-it-katex to upgrade to the 0.9.

[ronkok]

@mbourne How do \sqrt top bars compare to frac-bars? They're both 0.04em thick, but \sqrt uses two SVG paths and frac-bar uses two SVG lines. If the paths work better for you, I could easily make that change.

Such a change would also seem to clear up the problem for @arlohosk. The \sqrt in his screen shot looks good.

[ronkok]

I think Firefox is having issues with the \sqrt bar being so close to the edge of the SVG

@kevinbarabash Are you contemplating getting some space there by using a taller \sqrt view box and then an adjustment to the value we pass to makeVList?

[kevinbarabash]

@ronkok will you have time to give that a try?

[mbourne]

@ronkok Thank you for the explanation regarding double lines - makes perfect sense and explains why I was seeing grey lines when experimenting with 1 line and/or thinner line widths.

All the square root signs seem fine. Here's a case where the fraction line is thick, but the square root sign is good:

Yes, please try using path. That could do it.

@kevinbarabash As mentioned in my post, I haven't upgraded to 0.9.0beta1 on my server. 0.9.0alpha1 works well for all fractions - no disappearing lines, none blurry and none that are too thick.

[ronkok]

@kevinbarabash Yes, I can put together a couple of PRs. One to change frac-lines from SVG lines to paths and another to create some padding above the \sqrt line.

But that will be in a few days, when I'm feeling better. I'm a little under the weather at the moment.

[edemaine]

#1249 (also in 0.10.0-alpha) addressed the first part. @ronkok did you still plan to tweak \sqrt? Would anyone else on this thread like to retest on the latest KaTeX to see if the issues are resolved?

[ronkok]

No more tweaks planned. PR #1249 reverted frac-lines back into borders and PR #1143 added padding over \sqrt lines. I've done what I can.

[edemaine]

Great! Marking this resolved. Feel free to open a new issue if there are any remaining problems.