the line of \left\vert is disconnected

[lesonli]

\dfrac{\left\vert\dfrac{12\sqrt{3+211}}{a}\right|}{1}

How can we solve this problem?

[ronkok]

Well, that's annoying. I'll turn in a PR that removes a .toFixed(3) from the code. That rounding changes the width of an SVG by a minute amount. It might be enough for a browser to occasionally misplace the SVG.

[edemaine]

@lesonli The latest version of KaTeX makes some changes to this behavior. Can you confirm whether you're still seeing an issue?

[rinmyo]

@lesonli The latest version of KaTeX makes some changes to this behavior. Can you confirm whether you're still seeing an issue?

Still has this issue in 0.15.1, but I'm not sure if it is a same bug.

[edemaine]

Definitely looks like an improvement. I don't think we have an easy way to do better.

For the specific case, of |, I could imagine doing the whole symbol with one SVG, but I imagine this is pretty different from how LaTeX renders large symbols.

[mbourne]

This is still causing issues (recently, #3669).

I could imagine doing the whole symbol with one SVG, but I imagine this is pretty different from how LaTeX renders large symbols.

Seems to me this issue would be resolved if one element was used. I had a play around and offer 2 possible solutions, which have the added benefit of reducing the number of DOM elements should one or other be implemented.

The first suggestion is to render it with a single SVG (as @edemaine mentioned), and the second is to draw a border. (I'm just tinkering with clones of the KaTeX output.)

https://bourne2learn.com/math/katex/large-absolute-values-signs-proposal.php

Screenshot of the extended SVG approach:

I still feel at times pure LaTeX approaches don't make sense in HTML. My guess is 99% of users just want it to look right, and don't care if if fails LaTeX purity tests, as long as it is valid HTML.

[mbourne]

Any comment on my suggested solution? The single SVG approach is what MathJax does, BTW.

[rben01]

I'm also seeing this. It definitely seems to depend on the specifics how browsers render fonts.

Safari

Regular:

Zoomed:

Brave

Regular:

Zoomed:

Brave is definitely better but neither is perfect. I think a single SVG would solves and seems like the "correct" solution (one line, one element).

[mangerlahn]

The linked PR appears to fix the cases described here (thanks for the fix!), but there are still cases (arrows) which see the same issues. From the test expectations:

(Source)