Add | column separators to arrays.

This adds the ability to add `|` to a column description and have
vertical separators be added. I added types to the column descriptions
and added some logic to handle the separators when building the vertical
lists of the array.

Test plan:
 - See the Arrays screenshot looks good.
 - `make test`

src/buildHTML.js

@@ -532,9 +532,11 @@ var groupTypes = {
             var inrow = group.value.body[r];
             var height = arstrutHeight; // \@array adds an \@arstrut
             var depth = arstrutDepth;   // to each tow (via the template)
+
             if (nc < inrow.length) {
                 nc = inrow.length;
             }
+
             var outrow = new Array(inrow.length);
             for (c = 0; c < inrow.length; ++c) {
                 var elt = buildGroup(inrow[c], options);
@@ -546,6 +548,7 @@ var groupTypes = {
                 }
                 outrow[c] = elt;
             }
+
             var gap = 0;
             if (group.value.rowGaps[r]) {
                 gap = group.value.rowGaps[r].value;
@@ -568,6 +571,7 @@ var groupTypes = {
                     gap = 0;
                 }
             }
+
             outrow.height = height;
             outrow.depth = depth;
             totalHeight += height;
@@ -575,21 +579,64 @@ var groupTypes = {
             totalHeight += depth + gap; // \@yargarraycr
             body[r] = outrow;
         }
+
         var offset = totalHeight / 2 + fontMetrics.metrics.axisHeight;
-        var coldescriptions = group.value.cols || [];
+        var colDescriptions = group.value.cols || [];
         var cols = [];
-        var colsep;
-        for (c = 0; c < nc; ++c) {
-            var coldescr = coldescriptions[c] || {};
+        var colSep;
+        var colDescrNum;
+        for (c = 0, colDescrNum = 0;
+             // Continue while either there are more columns or more column
+             // descriptions, so trailing separators don't get lost.
+             c < nc || colDescrNum < colDescriptions.length;
+             ++c, ++colDescrNum) {
+
+            var colDescr = colDescriptions[colDescrNum] || {};
+
+            var firstSeparator = true;
+            while (colDescr.type === "separator") {
+                // If there is more than one separator in a row, add a space
+                // between them.
+                if (!firstSeparator) {
+                    colSep = makeSpan(["arraycolsep"], []);
+                    colSep.style.width =
+                        fontMetrics.metrics.doubleRuleSep + "em";
+                    cols.push(colSep);
+                }
+
+                if (colDescr.separator === "|") {
+                    var separator = makeSpan(
+                        ["vertical-separator"],
+                        []);
+                    separator.style.height = totalHeight + "em";
+                    separator.style.verticalAlign =
+                        -(totalHeight - offset) + "em";
+
+                    cols.push(separator);
+                } else {
+                    throw new ParseError(
+                        "Invalid separator type: " + colDescr.separator);
+                }
+
+                colDescrNum++;
+                colDescr = colDescriptions[colDescrNum] || {};
+                firstSeparator = false;
+            }
+
+            if (c >= nc) {
+                continue;
+            }
+
             var sepwidth;
             if (c > 0 || group.value.hskipBeforeAndAfter) {
-                sepwidth = utils.deflt(coldescr.pregap, arraycolsep);
+                sepwidth = utils.deflt(colDescr.pregap, arraycolsep);
                 if (sepwidth !== 0) {
-                    colsep = makeSpan(["arraycolsep"], []);
-                    colsep.style.width = sepwidth + "em";
-                    cols.push(colsep);
+                    colSep = makeSpan(["arraycolsep"], []);
+                    colSep.style.width = sepwidth + "em";
+                    cols.push(colSep);
                 }
             }
+
             var col = [];
             for (r = 0; r < nr; ++r) {
                 var row = body[r];
@@ -602,17 +649,19 @@ var groupTypes = {
                 elem.height = row.height;
                 col.push({type: "elem", elem: elem, shift: shift});
             }
+
             col = buildCommon.makeVList(col, "individualShift", null, options);
             col = makeSpan(
-                ["col-align-" + (coldescr.align || "c")],
+                ["col-align-" + (colDescr.align || "c")],
                 [col]);
             cols.push(col);
+
             if (c < nc - 1 || group.value.hskipBeforeAndAfter) {
-                sepwidth = utils.deflt(coldescr.postgap, arraycolsep);
+                sepwidth = utils.deflt(colDescr.postgap, arraycolsep);
                 if (sepwidth !== 0) {
-                    colsep = makeSpan(["arraycolsep"], []);
-                    colsep.style.width = sepwidth + "em";
-                    cols.push(colsep);
+                    colSep = makeSpan(["arraycolsep"], []);
+                    colSep.style.width = sepwidth + "em";
+                    cols.push(colSep);
                 }
             }
         }

src/environments.js

@@ -65,14 +65,19 @@ var environmentDefinitions = [
         numArgs: 1,
         handler: function(pos, mode, envName, colalign, positions) {
             var parser = this;
-            // Currently only supports alignment, no separators like | yet.
             colalign = colalign.value.map ? colalign.value : [colalign];
             var cols = colalign.map(function(node) {
                 var ca = node.value;
                 if ("lcr".indexOf(ca) !== -1) {
                     return {
+                        type: "align",
                         align: ca
                     };
+                } else if (ca === "|") {
+                    return {
+                        type: "separator",
+                        separator: "|"
+                    };
                 }
                 throw new ParseError(
                     "Unknown column alignment: " + node.value,
@@ -134,10 +139,12 @@ var environmentDefinitions = [
                 type: "array",
                 arraystretch: 1.2,
                 cols: [{
+                    type: "align",
                     align: "l",
                     pregap: 0,
                     postgap: fontMetrics.metrics.quad
                 }, {
+                    type: "align",
                     align: "l",
                     pregap: 0,
                     postgap: 0

src/fontMetrics.js

@@ -67,6 +67,10 @@ var xi13 = 0.1;
 // match.
 var ptPerEm = 10.0;
 
+// The space between adjacent `|` columns in an array definition. From
+// `\showthe\doublerulesep` in LaTeX.
+var doubleRuleSep = 2.0 / ptPerEm;
+
 /**
  * This is just a mapping from common names to real metrics
  */
@@ -94,6 +98,7 @@ var metrics = {
     bigOpSpacing5: xi13,
     ptPerEm: ptPerEm,
     emPerEx: sigma5 / sigma6,
+    doubleRuleSep: doubleRuleSep,
 
     // TODO(alpert): Missing parallel structure here. We should probably add
     // style-specific metrics for all of these.