Padding over \sqrt and Paths for frac-line (#1143)

* Padding over \sqrt and Paths for frac-line

This replaces two earlier PRs.

* Restore reaction arrows

* regenerate screenshots

* Set line padding in a constant

* Update with latest master

* Fix lint error

* update screenshots

src/delimiter.js

@@ -318,6 +318,11 @@ const makeStackedDelim = function(delim, heightTotal, center, options, mode,
         Style.TEXT, options, classes);
 };
 
+// All surds have 0.08em padding above the viniculum inside the SVG.
+// That keeps browser span height rounding error from pinching the line.
+const vbPad = 80;   // padding above the surd, measured inside the viewBox.
+const emPad = 0.08; // padding, in ems, measured in the document.
+
 const sqrtSvg = function(sqrtName, height, viewBoxHeight, options) {
     let alternate;
     if (sqrtName === "sqrtTall") {
@@ -325,11 +330,11 @@ const sqrtSvg = function(sqrtName, height, viewBoxHeight, options) {
         // One path edge has a variable length. It runs from the viniculumn
         // to a point near (14 units) the bottom of the surd. The viniculum
         // is 40 units thick. So the length of the line in question is:
-        const vertSegment = viewBoxHeight - 54;
-        alternate = `M702 0H400000v40H742v${vertSegment}l-4 4-4 4c-.667.667
+        const vertSegment = viewBoxHeight - 54 - vbPad;
+        alternate = `M702 ${vbPad}H400000v40H742v${vertSegment}l-4 4-4 4c-.667.7
 -2 1.5-4 2.5s-4.167 1.833-6.5 2.5-5.5 1-9.5 1h-12l-28-84c-16.667-52-96.667
 -294.333-240-727l-212 -643 -85 170c-4-3.333-8.333-7.667-13 -13l-13-13l77-155
- 77-156c66 199.333 139 419.667 219 661 l218 661zM702 0H400000v40H742z`;
+ 77-156c66 199.333 139 419.667 219 661 l218 661zM702 ${vbPad}H400000v40H742z`;
     }
     const pathNode = new domTree.pathNode(sqrtName, alternate);
 
@@ -354,23 +359,32 @@ const makeSqrtImage = function(height, options) {
     // Create a span containing an SVG image of a sqrt symbol.
     let span;
     let sizeMultiplier = options.sizeMultiplier;  // default
-    let spanHeight;
-    let viewBoxHeight;
+    let spanHeight = 0;
+    let texHeight = 0;
+    let viewBoxHeight = 0;
+
+    // We create viewBoxes with 80 units of "padding" above each surd.
+    // Then browser rounding error on the parent span height will not
+    // encroach on the ink of the viniculum. But that padding is not
+    // included in the TeX-like `height` used for calculation of
+    // vertical alignment. So texHeight = span.height < span.style.height.
 
     if (delim.type === "small") {
         // Get an SVG that is derived from glyph U+221A in font KaTeX-Main.
-        viewBoxHeight = 1000;  // from font
+        viewBoxHeight = 1000 + vbPad;  // 1000 unit glyph height.
         const newOptions = options.havingBaseStyle(delim.style);
         sizeMultiplier = newOptions.sizeMultiplier / options.sizeMultiplier;
-        spanHeight = 1 * sizeMultiplier;
+        spanHeight = (1.0 + emPad) * sizeMultiplier;
+        texHeight = 1.00 * sizeMultiplier;
         span = sqrtSvg("sqrtMain", spanHeight, viewBoxHeight, options);
         span.style.minWidth = "0.853em";
         span.advanceWidth = 0.833 * sizeMultiplier;   // from the font.
 
     } else if (delim.type === "large") {
         // These SVGs come from fonts: KaTeX_Size1, _Size2, etc.
-        viewBoxHeight = 1000 * sizeToMaxHeight[delim.size];
-        spanHeight = sizeToMaxHeight[delim.size] / sizeMultiplier;
+        viewBoxHeight = (1000 + vbPad) * sizeToMaxHeight[delim.size];
+        texHeight = sizeToMaxHeight[delim.size] / sizeMultiplier;
+        spanHeight = (sizeToMaxHeight[delim.size] + emPad) / sizeMultiplier;
         span = sqrtSvg("sqrtSize" + delim.size, spanHeight, viewBoxHeight, options);
         span.style.minWidth = "1.02em";
         span.advanceWidth = 1.0 / sizeMultiplier; // from the font
@@ -378,14 +392,15 @@ const makeSqrtImage = function(height, options) {
     } else {
         // Tall sqrt. In TeX, this would be stacked using multiple glyphs.
         // We'll use a single SVG to accomplish the same thing.
-        spanHeight = height / sizeMultiplier;
-        viewBoxHeight = Math.floor(1000 * height);
+        spanHeight = height / sizeMultiplier + emPad;
+        texHeight = height / sizeMultiplier;
+        viewBoxHeight = Math.floor(1000 * height) + vbPad;
         span = sqrtSvg("sqrtTall", spanHeight, viewBoxHeight, options);
         span.style.minWidth = "0.742em";
         span.advanceWidth = 1.056 / sizeMultiplier;
     }
 
-    span.height = spanHeight;
+    span.height = texHeight;
     span.style.height = spanHeight + "em";
 
     return {

src/functions/genfrac.js

@@ -170,7 +170,7 @@ defineFunction({
                     // But we put the rule into a a span that is 5 rules tall,
                     // to overcome a Chrome rendering issue. Put another way,
                     // we've replaced a kern of width = 2 * ruleWidth with a
-                    // bottom gap in the SVG = 2 * ruleWidth.
+                    // bottom padding inside the SVG = 2 * ruleWidth.
                     {type: "elem", elem: rule,   shift: midShift + 2 * ruleWidth},
                     {type: "elem", elem: numerm, shift: -numShift},
                 ],

src/katex.less

@@ -413,7 +413,9 @@
             display: inline-block;
             margin: 0 -0.125em;     // The ink in the rule is actually 0.05em wide.
             width: 0.25em;          // We put it in a 0.25em wide span to overcome
-        }                           // a Chrome rendering issue.
+            overflow: hidden;       // a Chrome rendering issue.
+            position: relative;
+        }
 
         .arraycolsep {
             display: inline-block;
@@ -475,6 +477,8 @@
     .stretchy {
         width: 100%;
         display: block;
+        position: relative;
+        overflow: hidden;
 
         &:before,
         &:after {

src/stretchy.js

@@ -342,50 +342,43 @@ const encloseSpan = function(
 const ruleSpan = function(className: string, lineThickness: number,
     options: Options): domTree.span {
 
-    // Get a span with an SVG line that fills the middle fifth of the span.
+    // Get a span with an SVG path that fills the middle fifth of the span.
     // We're using an extra wide span so Chrome won't round it down to zero.
 
-    const lines = [];
+    let path;
     let svgNode;
-    if (className === "vertical-separator") {
-        // Apply 2 brush strokes for sharper edges on low-res screens.
-        for (let i = 0; i < 2; i++) {
-            lines.push(new domTree.lineNode({
-                "x1": "5",
-                "y1": "0",
-                "x2": "5",
-                "y2": "10",
-                "stroke-width": "2",
-            }));
-        }
+    let parentClass = "stretchy";  // default
 
-        svgNode = new domTree.svgNode(lines, {
-            "width": "0.25em",
-            "height": "100%",
-            "viewBox": "0 0 10 10",
-            "preserveAspectRatio": "none",
+    if (className === "vertical-separator") {
+        path = new domTree.pathNode("vertSeparator");
+        svgNode = new domTree.svgNode([path], {
+            "width": "0.25em",    // contains a path that is 0.05 ems wide.
+            "height": "400em",
+            "viewBox": "0 0 250 400000",
+            "preserveAspectRatio": "xMinYMin slice",
         });
+        parentClass = "vertical-separator";
 
     } else {
-        for (let i = 0; i < 2; i++) {
-            lines.push(new domTree.lineNode({
-                "x1": "0",
-                "y1": "5",
-                "x2": "10",
-                "y2": "5",
-                "stroke-width": "2",
-            }));
-        }
+        // The next two lines are the only place in KaTeX where SVG paths are
+        // put into a viewBox that is not always exactly a 1000:1 scale to the
+        // document em size. Instead, the path is a horizontal line set to
+        // take up the middle fifth of the viewBox and span. If the context is
+        // normalsize/textstyle then the line will be 0.04em and the usual
+        // 1000:1 ratio holds. But if the context is scriptstyle, then
+        // lineThickness > 0.04em and we have a ratio somewhat different than
+        // 1000:1.
 
-        svgNode = new domTree.svgNode(lines, {
-            "width": "100%",
+        path = new domTree.pathNode("stdHorizRule");
+        svgNode = new domTree.svgNode([path], {
+            "width": "400em",
             "height": 5 * lineThickness + "em",
-            "viewBox": "0 0 10 10",
-            "preserveAspectRatio": "none",
+            "viewBox": "0 0 400000 200",
+            "preserveAspectRatio": "xMinYMin slice",
         });
     }
 
-    return buildCommon.makeSpan([className], [svgNode], options);
+    return buildCommon.makeSpan([parentClass], [svgNode], options);
 };
 
 export default {

src/svgGeometry.js

@@ -4,46 +4,69 @@
  * It's a storehouse of path geometry for SVG images.
  */
 
+// We do frac-lines, underlines, and overlines with an SVG path and we put that
+// path is into a viewBox that is 5 times as thick as the line. That way,
+// any browser rounding error on the size of the surrounding span will
+// not pinch the ink of the line.  Think of it as padding for the line.
+// As usual, the viewBox-to-em scale is 1000.
+
+const hLinePad = 80;  // padding above and below a std 0.04em horiz rule.
+const vLinePad = 100; // padding on either side of a std vert 0.05em rule.
+
 const path: {[string]: string} = {
+    // stdHorizRule is used for frac-lines, underlines, and overlines.
+    // It is 0.04em thick if the line comes from normalsize/textstyle.
+    stdHorizRule: `M0 ${hLinePad}H400000 v40H0z M0 ${hLinePad}H400000 v40H0z`,
+
+    // vertSeparator is used in arrays. It is 0.05em wide in a 0.25em viewBox.
+    vertSeparator: `M${vLinePad} 0h50V400000h-50zM${vLinePad} 0h50V400000h-50z`,
+
     // sqrtMain path geometry is from glyph U221A in the font KaTeX Main
-    sqrtMain: `M95 622c-2.667 0-7.167-2.667-13.5
--8S72 604 72 600c0-2 .333-3.333 1-4 1.333-2.667 23.833-20.667 67.5-54s
-65.833-50.333 66.5-51c1.333-1.333 3-2 5-2 4.667 0 8.667 3.333 12 10l173
-378c.667 0 35.333-71 104-213s137.5-285 206.5-429S812 17.333 812 14c5.333
--9.333 12-14 20-14h399166v40H845.272L620 507 385 993c-2.667 4.667-9 7-19
-7-6 0-10-1-12-3L160 575l-65 47zM834 0h399166v40H845z`,
+    // All surds have 80 units padding above the viniculumn.
+    sqrtMain: `M95,${622 + hLinePad}c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,
+-10,-9.5,-14c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54c44.2,-33.3,65.8,
+-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10s173,378,173,378c0.7,0,
+35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429c69,-144,104.5,-217.7,106.5,
+-221c5.3,-9.3,12,-14,20,-14H400000v40H845.2724s-225.272,467,-225.272,467
+s-235,486,-235,486c-2.7,4.7,-9,7,-19,7c-6,0,-10,-1,-12,-3s-194,-422,-194,-422
+s-65,47,-65,47z M834 ${hLinePad}H400000v40H845z`,
 
     // size1 is from glyph U221A in the font KaTeX_Size1-Regular
-    sqrtSize1: `M263 601c.667 0 18 39.667 52 119s68.167
- 158.667 102.5 238 51.833 119.333 52.5 120C810 373.333 980.667 17.667 982 11
-c4.667-7.333 11-11 19-11h398999v40H1012.333L741 607c-38.667 80.667-84 175-136
- 283s-89.167 185.333-111.5 232-33.833 70.333-34.5 71c-4.667 4.667-12.333 7-23
- 7l-12-1-109-253c-72.667-168-109.333-252-110-252-10.667 8-22 16.667-34 26-22
- 17.333-33.333 26-34 26l-26-26 76-59 76-60zM1001 0h398999v40H1012z`,
+    sqrtSize1: `M263,${601 + hLinePad}c0.7,0,18,39.7,52,119c34,79.3,68.167,
+158.7,102.5,238c34.3,79.3,51.8,119.3,52.5,120c340,-704.7,510.7,-1060.3,512,-1067
+c4.7,-7.3,11,-11,19,-11H40000v40H1012.3s-271.3,567,-271.3,567c-38.7,80.7,-84,
+175,-136,283c-52,108,-89.167,185.3,-111.5,232c-22.3,46.7,-33.8,70.3,-34.5,71
+c-4.7,4.7,-12.3,7,-23,7s-12,-1,-12,-1s-109,-253,-109,-253c-72.7,-168,-109.3,
+-252,-110,-252c-10.7,8,-22,16.7,-34,26c-22,17.3,-33.3,26,-34,26s-26,-26,-26,-26
+s76,-59,76,-59s76,-60,76,-60z M1001 ${hLinePad}H40000v40H1012z`,
 
     // size2 is from glyph U221A in the font KaTeX_Size2-Regular
-    sqrtSize2: `M1001 0h398999v40H1013.084S929.667 308 749
- 880s-277 876.333-289 913c-4.667 4.667-12.667 7-24 7h-12c-1.333-3.333-3.667
--11.667-7-25-35.333-125.333-106.667-373.333-214-744-10 12-21 25-33 39l-32 39
-c-6-5.333-15-14-27-26l25-30c26.667-32.667 52-63 76-91l52-60 208 722c56-175.333
- 126.333-397.333 211-666s153.833-488.167 207.5-658.5C944.167 129.167 975 32.667
- 983 10c4-6.667 10-10 18-10zm0 0h398999v40H1013z`,
+    // The 80 units padding is most obvious here. Note start node at M1001 80.
+    sqrtSize2: `M1001,${hLinePad}H400000v40H1013.1s-83.4,268,-264.1,840c-180.7,
+572,-277,876.3,-289,913c-4.7,4.7,-12.7,7,-24,7s-12,0,-12,0c-1.3,-3.3,-3.7,-11.7,
+-7,-25c-35.3,-125.3,-106.7,-373.3,-214,-744c-10,12,-21,25,-33,39s-32,39,-32,39
+c-6,-5.3,-15,-14,-27,-26s25,-30,25,-30c26.7,-32.7,52,-63,76,-91s52,-60,52,-60
+s208,722,208,722c56,-175.3,126.3,-397.3,211,-666c84.7,-268.7,153.8,-488.2,207.5,
+-658.5c53.7,-170.3,84.5,-266.8,92.5,-289.5c4,-6.7,10,-10,18,-10z
+M1001 ${hLinePad}H400000v40H1013z`,
 
     // size3 is from glyph U221A in the font KaTeX_Size3-Regular
-    sqrtSize3: `M424 2398c-1.333-.667-38.5-172-111.5-514 S202.667 1370.667 202
- 1370c0-2-10.667 14.333-32 49-4.667 7.333-9.833 15.667-15.5 25s-9.833 16-12.5
- 20l-5 7c-4-3.333-8.333-7.667-13-13l-13-13 76-122 77-121 209 968c0-2 84.667
--361.667 254-1079C896.333 373.667 981.667 13.333 983 10c4-6.667 10-10 18-10
-h398999v40H1014.622S927.332 418.667 742 1206c-185.333 787.333-279.333 1182.333
--282 1185-2 6-10 9-24 9-8 0-12-.667-12-2zM1001 0h398999v40H1014z`,
+    sqrtSize3: `M424,${2398 + hLinePad}c-1.3,-0.7,-38.5,-172,-111.5,-514c-73,
+-342,-109.8,-513.3,-110.5,-514c0,-2,-10.7,14.3,-32,49c-4.7,7.3,-9.8,15.7,-15.5,
+25c-5.7,9.3,-9.8,16,-12.5,20s-5,7,-5,7c-4,-3.3,-8.3,-7.7,-13,-13s-13,-13,-13,
+-13s76,-122,76,-122s77,-121,77,-121s209,968,209,968c0,-2,84.7,-361.7,254,-1079
+c169.3,-717.3,254.7,-1077.7,256,-1081c4,-6.7,10,-10,18,-10H400000v40H1014.6
+s-87.3,378.7,-272.6,1166c-185.3,787.3,-279.3,1182.3,-282,1185c-2,6,-10,9,-24,9
+c-8,0,-12,-0.7,-12,-2z M1001 ${hLinePad}H400000v40H1014z`,
 
     // size4 is from glyph U221A in the font KaTeX_Size4-Regular
-    sqrtSize4: `M473 2713C812.333 913.667 982.333 13 983 11c3.333-7.333 9.333
--11 18-11h399110v40H1017.698S927.168 518 741.5 1506C555.833 2494 462 2989 460
- 2991c-2 6-10 9-24 9-8 0-12-.667-12-2s-5.333-32-16-92c-50.667-293.333-119.667
--693.333-207-1200 0-1.333-5.333 8.667-16 30l-32 64-16 33-26-26 76-153 77-151
-c.667.667 35.667 202 105 604 67.333 400.667 102 602.667 104 606z
-M1001 0h398999v40H1017z`,
+    sqrtSize4: `M473,${2713 + hLinePad}c339.3,-1799.3,509.3,-2700,510,-2702
+c3.3,-7.3,9.3,-11,18,-11H400000v40H1017.7s-90.5,478,-276.2,1466c-185.7,988,
+-279.5,1483,-281.5,1485c-2,6,-10,9,-24,9c-8,0,-12,-0.7,-12,-2c0,-1.3,-5.3,-32,
+-16,-92c-50.7,-293.3,-119.7,-693.3,-207,-1200c0,-1.3,-5.3,8.7,-16,30c-10.7,
+21.3,-21.3,42.7,-32,64s-16,33,-16,33s-26,-26,-26,-26s76,-153,76,-153s77,-151,
+77,-151c0.7,0.7,35.7,202,105,604c67.3,400.7,102,602.7,104,606z
+M1001 ${hLinePad}H400000v40H1017z`,
 
     // The doubleleftarrow geometry is from glyph U+21D0 in the font KaTeX Main
     doubleleftarrow: `M262 157