Fixing Overlaps for Large Absolute Value Signs in KaTeX

A KaTeX user complained about vertical bar overlapping when rendering absolute value signs. This page attempts to provide 2 solutions for this problem. They are intended as (fairly rough) proofs of concept.

Original KaTeX rendering

The problem can be seen on certain screens and at certain zoom settings, whereby there is a darker and thicker region in the middle of each of the absolutee value signs:

$$\left|f(x)-\frac{A(x+h)-A(x)}{h}\right|$$

Color-coded Original KaTeX rendering

We'll make it bigger and color-code the sections of the vertical bars to make it clearer what's going on:

The middle portion of each absolute value sign is actually an SVG (it's black and a bit thicker), while the outer portions are 2 different spans containing the text "|".

Proposal 1 - extend the SVG

We know the height of the sign, so we can remove (or hide, as I did here) the (text) spans containing the text "|" and extend the SVG to suit:

I needed to scale the SVG so it extended the full height of the expression, and I moved it such that it is now inside the nearby span.vlist-t.

There is now one solid vertical line for each of the absolute value symbols.

Proposal 2 - use a border

The height of the span.vlist-t is the required height for the vertical lines, so in this proposal, we place a border on that span:

We don't need any of the spans containing the text "|" nor the SVG, so I've deleted them here. I didn't delete the containing spans because they were needed for proper positioning and height.

Once again, we have one solid vertical line for each of the absolute value symbols.