Fix jagged parentheses (#2234)

* Fix jagged parentheses

* Update screenshots

* Coordinate overlap with repeat element length.

* Fix lint error.

Co-authored-by: Erik Demaine <edemaine@mit.edu>

src/buildCommon.js

@@ -796,6 +796,8 @@ const svgData: {
     oiintSize2: ["oiintSize2", 1.472, 0.659],
     oiiintSize1: ["oiiintSize1", 1.304, 0.499],
     oiiintSize2: ["oiiintSize2", 1.98, 0.659],
+    leftParenInner: ["leftParenInner", 0.875, 0.3],
+    rightParenInner: ["rightParenInner", 0.875, 0.3],
 };
 
 const staticSvg = function(value: string, options: Options): SvgSpan {

src/delimiter.js

@@ -375,9 +375,20 @@ const makeStackedDelim = function(
 
     // To cover the gap create by the overlaps, insert one more repeat element,
     // at a position that juts 0.005 above the bottom of the top element.
-    inners.push({type: "kern", size: shiftOfExtraElement});
+    if ((repeat === "\u239c" || repeat === "\u239f") && repeatCount === 0) {
-    inners.push(makeInner(repeat, font, mode));
+        // Parentheses need a short repeat element in order to avoid an overrun.
-    inners.push(lap);
+        // We'll make a 0.3em tall element from a SVG.
+        const overlap = buildCommon.svgData.leftParenInner[2] / 2;
+        inners.push({type: "kern", size: -overlap});
+        const pathName = repeat === "\u239c" ? "leftParenInner" : "rightParenInner";
+        const innerSpan = buildCommon.staticSvg(pathName, options);
+        inners.push({type: "elem", elem: innerSpan});
+        inners.push({type: "kern", size: -overlap});
+    } else {
+        inners.push({type: "kern", size: shiftOfExtraElement});
+        inners.push(makeInner(repeat, font, mode));
+        inners.push(lap);
+    }
 
     // Add the top symbol
     inners.push(makeInner(top, font, mode));

src/svgGeometry.js

@@ -147,6 +147,10 @@ export const sqrtPath = function(
 };
 
 export const path: {[string]: string} = {
+    // Two paths that cover gaps in built-up parentheses.
+    leftParenInner: `M291 0 H417 V300 H291 z`,
+    rightParenInner: `M457 0 H583 V300 H457 z`,
+
     // The doubleleftarrow geometry is from glyph U+21D0 in the font KaTeX Main
     doubleleftarrow: `M262 157
 l10-10c34-36 62.7-77 86-123 3.3-8 5-13.3 5-16 0-5.3-6.7-8-20-8-7.3

test/screenshotter/ss_data.yaml

@@ -103,7 +103,12 @@ DeepFontSizing:
     nolatex: \Huge inside \dfrac doesn't work, needs an extra {…}
 DelimiterSizing: |
     \bigl\uparrow\Bigl\downarrow\biggl\updownarrow
-    \Biggl\Uparrow\Biggr\Downarrow\biggr\langle\Bigr\}\bigr\rfloor
+    \Biggl\Uparrow\Biggr\Downarrow\biggr\langle\Bigr\}\bigr\rfloor \\
+    \begin{pmatrix}
+        a & b & c\\
+        a & b & c\\
+        a & b & c\\
+    \end{pmatrix}
 DisplayMode:
     tex: \sum_{i=0}^\infty \frac{1}{i}
     pre: pre