Change frac-line from border to full span (#976)

* Change frac-line from border to full span

Change `frac-line`  and `vertical-separator`.  Instead of using span borders, fill entire span using a `box-shadow`.

This change will enable more dependable engagement of the `min-height` CSS.

* Fix indentation

* Fix indent again

* Change box shadow to inline SVG

* Fix lint error

* regenerate screenshots after switching to SVG for fraction bars

src/buildHTML.js

@@ -475,9 +475,11 @@ groupTypes.spacing = function(group, options) {
 };
 
 export const makeLineSpan = function(className, options, thickness) {
-    const line = makeSpan([className], [], options);
+    // Fill the entire span instead of just a border. That way, the min-height
+    // value in katex.less will ensure that at least one screen pixel displays.
+    const line = stretchy.ruleSpan(className, options);
     line.height = thickness || options.fontMetrics().defaultRuleThickness;
-    line.style.borderBottomWidth = line.height + "em";
+    line.style.height = line.height + "em";
     line.maxFontSize = 1.0;
     return line;
 };

src/environments/array.js

@@ -6,6 +6,7 @@ import ParseError from "../ParseError";
 import ParseNode from "../ParseNode";
 import {calculateSize} from "../units";
 import utils from "../utils";
+import stretchy from "../stretchy";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -198,9 +199,8 @@ const htmlBuilder = function(group, options) {
             }
 
             if (colDescr.separator === "|") {
-                const separator = buildCommon.makeSpan(
+                const separator = stretchy.ruleSpan("vertical-separator",
-                    ["vertical-separator"],
+                    options);
-                    []);
                 separator.style.height = totalHeight + "em";
                 separator.style.verticalAlign =
                     -(totalHeight - offset) + "em";

src/stretchy.js

@@ -315,8 +315,22 @@ const encloseSpan = function(
     return img;
 };
 
+const ruleSpan = function(className: string, options: Options): span {
+    // Get a big square image. The parent span will hide the overflow.
+    const pathNode = new domTree.pathNode('bigRule');
+    const attributes = [
+        ["width", "400em"],
+        ["height", "400em"],
+        ["viewBox", "0 0 400000 400000"],
+        ["preserveAspectRatio", "xMinYMin slice"],
+    ];
+    const svg =  new domTree.svgNode([pathNode], attributes);
+    return buildCommon.makeSpan([className, "hide-tail"], [svg], options);
+};
+
 export default {
     encloseSpan: encloseSpan,
     mathMLnode: mathMLnode,
+    ruleSpan: ruleSpan,
     svgSpan: svgSpan,
 };

src/svgGeometry.js

@@ -5,6 +5,10 @@
  */
 
 const path: {[string]: string} = {
+    // bigRule provides a big square image for frac-lines, etc.
+    // The actual rendered rule is smaller, controlled by overflow:hidden.
+    bigRule: 'M0 0 h400000 v400000 h-400000z M0 0 h400000 v400000 h-400000z',
+
     // 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

static/katex.less

@@ -297,7 +297,6 @@
         .frac-line {
             display: inline-block;
             width: 100%;
-            border-bottom-style: solid;
         }
     }
 
@@ -428,7 +427,6 @@
     .underline .underline-line {
         display: inline-block;
         width: 100%;
-        border-bottom-style: solid;
     }
 
     .sqrt {
@@ -546,7 +544,18 @@
         .vertical-separator {
             display: inline-block;
             margin: 0 -0.025em;
-            border-right: 0.05em solid black;
+            width: 0.05em;
+
+            // Set a min-width so it will display at least one screen pixel.
+            @media screen {
+                min-width: 1px;
+            }
+
+            // Modify min-width for retina displays. Don't force two screen pixels.
+            @media screen and (-webkit-min-device-pixel-ratio: 2.0),
+                screen and (min-resolution: 192dpi) {
+                min-width: 0.5px;
+            }
         }
 
         .arraycolsep {