katex 0.10.1 → 0.12.0

package/src/environments/array.js

@@ -1,11 +1,12 @@
 // @flow
 import buildCommon from "../buildCommon";
+import Style from "../Style";
 import defineEnvironment from "../defineEnvironment";
 import defineFunction from "../defineFunction";
 import mathMLTree from "../mathMLTree";
 import ParseError from "../ParseError";
 import {assertNodeType, assertSymbolNodeType} from "../parseNode";
-import {checkNodeType, checkSymbolNodeType} from "../parseNode";
+import {checkSymbolNodeType} from "../parseNode";
 import {calculateSize} from "../units";
 import utils from "../utils";
 
@@ -25,17 +26,20 @@ export type AlignSpec = { type: "separator", separator: string } | {
     postgap?: number,
 };
 
+// Type to indicate column separation in MathML
+export type ColSeparationType = "align" | "alignat" | "small";
+
 function getHLines(parser: Parser): boolean[] {
     // Return an array. The array length = number of hlines.
     // Each element in the array tells if the line is dashed.
     const hlineInfo = [];
     parser.consumeSpaces();
-    let nxt = parser.nextToken.text;
+    let nxt = parser.fetch().text;
     while (nxt === "\\hline" || nxt === "\\hdashline") {
         parser.consume();
         hlineInfo.push(nxt === "\\hdashline");
         parser.consumeSpaces();
-        nxt = parser.nextToken.text;
+        nxt = parser.fetch().text;
     }
     return hlineInfo;
 }
@@ -48,11 +52,12 @@ function getHLines(parser: Parser): boolean[] {
  */
 function parseArray(
     parser: Parser,
-    {hskipBeforeAndAfter, addJot, cols, arraystretch}: {|
+    {hskipBeforeAndAfter, addJot, cols, arraystretch, colSeparationType}: {|
         hskipBeforeAndAfter?: boolean,
         addJot?: boolean,
         cols?: AlignSpec[],
         arraystretch?: number,
+        colSeparationType?: ColSeparationType,
     |},
     style: StyleStr,
 ): ParseNode<"array"> {
@@ -74,6 +79,9 @@ function parseArray(
         }
     }
 
+    // Start group for first cell
+    parser.gullet.beginGroup();
+
     let row = [];
     const body = [row];
     const rowGaps = [];
@@ -83,7 +91,11 @@ function parseArray(
     hLinesBeforeRow.push(getHLines(parser));
 
     while (true) {  // eslint-disable-line no-constant-condition
+        // Parse each cell in its own group (namespace)
         let cell = parser.parseExpression(false, "\\cr");
+        parser.gullet.endGroup();
+        parser.gullet.beginGroup();
+
         cell = {
             type: "ordgroup",
             mode: parser.mode,
@@ -98,7 +110,7 @@ function parseArray(
             };
         }
         row.push(cell);
-        const next = parser.nextToken.text;
+        const next = parser.fetch().text;
         if (next === "&") {
             parser.consume();
         } else if (next === "\\end") {
@@ -127,7 +139,12 @@ function parseArray(
                                  parser.nextToken);
         }
     }
+
+    // End cell group
+    parser.gullet.endGroup();
+    // End array group defining \\
     parser.gullet.endGroup();
+
     return {
         type: "array",
         mode: parser.mode,
@@ -138,6 +155,7 @@ function parseArray(
         rowGaps,
         hskipBeforeAndAfter,
         hLinesBeforeRow,
+        colSeparationType,
     };
 }
 
@@ -168,9 +186,24 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
     let body = new Array(nr);
     const hlines = [];
 
+    const ruleThickness = Math.max(
+        // From LaTeX \showthe\arrayrulewidth. Equals 0.04 em.
+        (options.fontMetrics().arrayRuleWidth),
+        options.minRuleThickness,  // User override.
+    );
+
     // Horizontal spacing
     const pt = 1 / options.fontMetrics().ptPerEm;
-    const arraycolsep = 5 * pt; // \arraycolsep in article.cls
+    let arraycolsep = 5 * pt; // default value, i.e. \arraycolsep in article.cls
+    if (group.colSeparationType && group.colSeparationType === "small") {
+        // We're in a {smallmatrix}. Default column space is \thickspace,
+        // i.e. 5/18em = 0.2778em, per amsmath.dtx for {smallmatrix}.
+        // But that needs adjustment because LaTeX applies \scriptstyle to the
+        // entire array, including the colspace, but this function applies
+        // \scriptstyle only inside each element.
+        const localMultiplier = options.havingStyle(Style.SCRIPT).sizeMultiplier;
+        arraycolsep = 0.2778 * (localMultiplier / options.sizeMultiplier);
+    }
 
     // Vertical spacing
     const baselineskip = 12 * pt; // see size10.clo
@@ -269,20 +302,15 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
                 cols.push(colSep);
             }
 
-            if (colDescr.separator === "|") {
+            if (colDescr.separator === "|" || colDescr.separator === ":") {
+                const lineType = (colDescr.separator === "|") ? "solid" : "dashed";
                 const separator = buildCommon.makeSpan(
                     ["vertical-separator"], [], options
                 );
                 separator.style.height = totalHeight + "em";
-                separator.style.verticalAlign =
-                    -(totalHeight - offset) + "em";
-
-                cols.push(separator);
-            } else if (colDescr.separator === ":") {
-                const separator = buildCommon.makeSpan(
-                    ["vertical-separator", "vs-dashed"], [], options
-                );
-                separator.style.height = totalHeight + "em";
+                separator.style.borderRightWidth = `${ruleThickness}em`;
+                separator.style.borderRightStyle = lineType;
+                separator.style.margin = `0 -${ruleThickness / 2}em`;
                 separator.style.verticalAlign =
                     -(totalHeight - offset) + "em";
 
@@ -346,8 +374,9 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
 
     // Add \hline(s), if any.
     if (hlines.length > 0) {
-        const line = buildCommon.makeLineSpan("hline", options, 0.05);
-        const dashes = buildCommon.makeLineSpan("hdashline", options, 0.05);
+        const line = buildCommon.makeLineSpan("hline", options, ruleThickness);
+        const dashes = buildCommon.makeLineSpan("hdashline", options,
+            ruleThickness);
         const vListElems = [{type: "elem", elem: body, shift: 0}];
         while (hlines.length > 0) {
             const hline = hlines.pop();
@@ -367,8 +396,14 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
     return buildCommon.makeSpan(["mord"], [body], options);
 };
 
+const alignMap = {
+    c: "center ",
+    l: "left ",
+    r: "right ",
+};
+
 const mathmlBuilder: MathMLBuilder<"array"> = function(group, options) {
-    return new mathMLTree.MathNode(
+    let table = new mathMLTree.MathNode(
         "mtable", group.body.map(function(row) {
             return new mathMLTree.MathNode(
                 "mtr", row.map(function(cell) {
@@ -376,6 +411,119 @@ const mathmlBuilder: MathMLBuilder<"array"> = function(group, options) {
                         "mtd", [mml.buildGroup(cell, options)]);
                 }));
         }));
+
+    // Set column alignment, row spacing, column spacing, and
+    // array lines by setting attributes on the table element.
+
+    // Set the row spacing. In MathML, we specify a gap distance.
+    // We do not use rowGap[] because MathML automatically increases
+    // cell height with the height/depth of the element content.
+
+    // LaTeX \arraystretch multiplies the row baseline-to-baseline distance.
+    // We simulate this by adding (arraystretch - 1)em to the gap. This
+    // does a reasonable job of adjusting arrays containing 1 em tall content.
+
+    // The 0.16 and 0.09 values are found emprically. They produce an array
+    // similar to LaTeX and in which content does not interfere with \hines.
+    const gap = (group.arraystretch === 0.5)
+        ? 0.1  // {smallmatrix}, {subarray}
+        : 0.16 + group.arraystretch - 1 + (group.addJot ? 0.09 : 0);
+    table.setAttribute("rowspacing", gap + "em");
+
+    // MathML table lines go only between cells.
+    // To place a line on an edge we'll use <menclose>, if necessary.
+    let menclose = "";
+    let align = "";
+
+    if (group.cols && group.cols.length > 0) {
+        // Find column alignment, column spacing, and  vertical lines.
+        const cols = group.cols;
+        let columnLines = "";
+        let prevTypeWasAlign = false;
+        let iStart = 0;
+        let iEnd = cols.length;
+
+        if (cols[0].type === "separator") {
+            menclose += "top ";
+            iStart = 1;
+        }
+        if (cols[cols.length - 1].type === "separator") {
+            menclose += "bottom ";
+            iEnd -= 1;
+        }
+
+        for (let i = iStart; i < iEnd; i++) {
+            if (cols[i].type === "align") {
+                align += alignMap[cols[i].align];
+
+                if (prevTypeWasAlign) {
+                    columnLines += "none ";
+                }
+                prevTypeWasAlign = true;
+            } else if (cols[i].type === "separator") {
+                // MathML accepts only single lines between cells.
+                // So we read only the first of consecutive separators.
+                if (prevTypeWasAlign) {
+                    columnLines += cols[i].separator === "|"
+                        ? "solid "
+                        : "dashed ";
+                    prevTypeWasAlign = false;
+                }
+            }
+        }
+
+        table.setAttribute("columnalign", align.trim());
+
+        if (/[sd]/.test(columnLines)) {
+            table.setAttribute("columnlines", columnLines.trim());
+        }
+    }
+
+    // Set column spacing.
+    if (group.colSeparationType === "align") {
+        const cols = group.cols || [];
+        let spacing = "";
+        for (let i = 1; i < cols.length; i++) {
+            spacing += i % 2 ? "0em " : "1em ";
+        }
+        table.setAttribute("columnspacing", spacing.trim());
+    } else if (group.colSeparationType === "alignat") {
+        table.setAttribute("columnspacing", "0em");
+    } else if (group.colSeparationType === "small") {
+        table.setAttribute("columnspacing", "0.2778em");
+    } else {
+        table.setAttribute("columnspacing", "1em");
+    }
+
+    // Address \hline and \hdashline
+    let rowLines = "";
+    const hlines = group.hLinesBeforeRow;
+
+    menclose += hlines[0].length > 0 ? "left " : "";
+    menclose += hlines[hlines.length - 1].length > 0 ? "right " : "";
+
+    for (let i = 1; i < hlines.length - 1; i++) {
+        rowLines += (hlines[i].length === 0)
+          ? "none "
+             // MathML accepts only a single line between rows. Read one element.
+          : hlines[i][0] ? "dashed " : "solid ";
+    }
+    if (/[sd]/.test(rowLines)) {
+        table.setAttribute("rowlines", rowLines.trim());
+    }
+
+    if (menclose !== "") {
+        table = new mathMLTree.MathNode("menclose", [table]);
+        table.setAttribute("notation", menclose.trim());
+    }
+
+    if (group.arraystretch && group.arraystretch < 1) {
+        // A small array. Wrap in scriptstyle so row gap is not too large.
+        table = new mathMLTree.MathNode("mstyle", [table]);
+        table.setAttribute("scriptlevel", "1");
+    }
+
+    return table;
 };
 
 // Convenience function for aligned and alignedat environments.
@@ -399,11 +547,10 @@ const alignedHandler = function(context, args) {
         mode: context.mode,
         body: [],
     };
-    const ordgroup = checkNodeType(args[0], "ordgroup");
-    if (ordgroup) {
+    if (args[0] && args[0].type === "ordgroup") {
         let arg0 = "";
-        for (let i = 0; i < ordgroup.body.length; i++) {
-            const textord = assertNodeType(ordgroup.body[i], "textord");
+        for (let i = 0; i < args[0].body.length; i++) {
+            const textord = assertNodeType(args[0].body[i], "textord");
             arg0 += textord.text;
         }
         numMaths = Number(arg0);
@@ -448,6 +595,7 @@ const alignedHandler = function(context, args) {
             postgap: 0,
         };
     }
+    res.colSeparationType = isAligned ? "align" : "alignat";
     return res;
 };
 
@@ -534,22 +682,83 @@ defineEnvironment({
             body: [res],
             left: delimiters[0],
             right: delimiters[1],
+            rightColor: undefined, // \right uninfluenced by \color in array
         } : res;
     },
     htmlBuilder,
     mathmlBuilder,
 });
 
+defineEnvironment({
+    type: "array",
+    names: ["smallmatrix"],
+    props: {
+        numArgs: 0,
+    },
+    handler(context) {
+        const payload = {arraystretch: 0.5};
+        const res = parseArray(context.parser, payload, "script");
+        res.colSeparationType = "small";
+        return res;
+    },
+    htmlBuilder,
+    mathmlBuilder,
+});
+
+defineEnvironment({
+    type: "array",
+    names: ["subarray"],
+    props: {
+        numArgs: 1,
+    },
+    handler(context, args) {
+        // Parsing of {subarray} is similar to {array}
+        const symNode = checkSymbolNodeType(args[0]);
+        const colalign: AnyParseNode[] =
+            symNode ? [args[0]] : assertNodeType(args[0], "ordgroup").body;
+        const cols = colalign.map(function(nde) {
+            const node = assertSymbolNodeType(nde);
+            const ca = node.text;
+            // {subarray} only recognizes "l" & "c"
+            if ("lc".indexOf(ca) !== -1) {
+                return {
+                    type: "align",
+                    align: ca,
+                };
+            }
+            throw new ParseError("Unknown column alignment: " + ca, nde);
+        });
+        if (cols.length > 1) {
+            throw new ParseError("{subarray} can contain only one column");
+        }
+        let res = {
+            cols,
+            hskipBeforeAndAfter: false,
+            arraystretch: 0.5,
+        };
+        res = parseArray(context.parser, res, "script");
+        if (res.body.length > 0 &&  res.body[0].length > 1) {
+            throw new ParseError("{subarray} can contain only one column");
+        }
+        return res;
+    },
+    htmlBuilder,
+    mathmlBuilder,
+});
+
 // A cases environment (in amsmath.sty) is almost equivalent to
 // \def\arraystretch{1.2}%
 // \left\{\begin{array}{@{}l@{\quad}l@{}} … \end{array}\right.
 // {dcases} is a {cases} environment where cells are set in \displaystyle,
 // as defined in mathtools.sty.
+// {rcases} is another mathtools environment. It's brace is on the right side.
 defineEnvironment({
     type: "array",
     names: [
         "cases",
         "dcases",
+        "rcases",
+        "drcases",
     ],
     props: {
         numArgs: 0,
@@ -579,8 +788,9 @@ defineEnvironment({
             type: "leftright",
             mode: context.mode,
             body: [res],
-            left: "\\{",
-            right: ".",
+            left: context.envName.indexOf("r") > -1 ? "." : "\\{",
+            right: context.envName.indexOf("r") > -1 ? "\\}" : ".",
+            rightColor: undefined,
         };
     },
     htmlBuilder,

package/src/fontMetrics.js

@@ -82,6 +82,14 @@ const sigmasAndXis = {
     // The space between adjacent `|` columns in an array definition. From
     // `\showthe\doublerulesep` in LaTeX. Equals 2.0 / ptPerEm.
     doubleRuleSep: [0.2, 0.2, 0.2],
+
+    // The width of separator lines in {array} environments. From
+    // `\showthe\arrayrulewidth` in LaTeX. Equals 0.4 / ptPerEm.
+    arrayRuleWidth: [0.04, 0.04, 0.04],
+
+    // Two values from LaTeX source2e:
+    fboxsep: [0.3, 0.3, 0.3], //        3 pt / ptPerEm
+    fboxrule: [0.04, 0.04, 0.04], // 0.4 pt / ptPerEm
 };
 
 // This map contains a mapping from font name and character code to character
@@ -211,10 +219,11 @@ export function getCharacterMetrics(
         throw new Error(`Font metrics not found for font: ${font}.`);
     }
     let ch = character.charCodeAt(0);
-    if (character[0] in extraCharacterMap) {
+    let metrics = metricMap[font][ch];
+    if (!metrics && character[0] in extraCharacterMap) {
         ch = extraCharacterMap[character[0]].charCodeAt(0);
+        metrics = metricMap[font][ch];
     }
-    let metrics = metricMap[font][ch];
 
     if (!metrics && mode === 'text') {
         // We don't typically have font metrics for Asian scripts.

package/src/functions/accent.js

@@ -4,7 +4,7 @@ import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
 import utils from "../utils";
 import stretchy from "../stretchy";
-import {assertNodeType, checkNodeType} from "../parseNode";
+import {assertNodeType} from "../parseNode";
 import {assertSpan, assertSymbolDomNode} from "../domTree";
 
 import * as html from "../buildHTML";
@@ -20,9 +20,8 @@ export const htmlBuilder: HtmlBuilderSupSub<"accent"> = (grp, options) => {
     let base: AnyParseNode;
     let group: ParseNode<"accent">;
 
-    const supSub: ?ParseNode<"supsub"> = checkNodeType(grp, "supsub");
     let supSubGroup;
-    if (supSub) {
+    if (grp && grp.type === "supsub") {
         // If our base is a character box, and we have superscripts and
         // subscripts, the supsub will defer to us. In particular, we want
         // to attach the superscripts and subscripts to the inner body (so
@@ -32,18 +31,18 @@ export const htmlBuilder: HtmlBuilderSupSub<"accent"> = (grp, options) => {
         // rendering that, while keeping track of where the accent is.
 
         // The real accent group is the base of the supsub group
-        group = assertNodeType(supSub.base, "accent");
+        group = assertNodeType(grp.base, "accent");
         // The character box is the base of the accent group
         base = group.base;
         // Stick the character box into the base of the supsub group
-        supSub.base = base;
+        grp.base = base;
 
         // Rerender the supsub group with its new base, and store that
         // result.
-        supSubGroup = assertSpan(html.buildGroup(supSub, options));
+        supSubGroup = assertSpan(html.buildGroup(grp, options));
 
         // reset original base
-        supSub.base = group;
+        grp.base = group;
     } else {
         group = assertNodeType(grp, "accent");
         base = group.base;
@@ -94,8 +93,9 @@ export const htmlBuilder: HtmlBuilderSupSub<"accent"> = (grp, options) => {
             accent = buildCommon.staticSvg("vec", options);
             width = buildCommon.svgData.vec[1];
         } else {
-            accent = buildCommon.makeSymbol(
-                group.label, "Main-Regular", group.mode, options);
+            accent = buildCommon.makeOrd({mode: group.mode, text: group.label},
+                options, "textord");
+            accent = assertSymbolDomNode(accent);
             // Remove the italic correction of the accent, because it only serves to
             // shift the accent over to a place we don't want.
             accent.italic = 0;

package/src/functions/accentunder.js

@@ -37,8 +37,8 @@ defineFunction({
 
         // Generate the vlist, with the appropriate kerns
         const vlist = buildCommon.makeVList({
-            positionType: "bottom",
-            positionData: accentBody.height + kern,
+            positionType: "top",
+            positionData: innerGroup.height,
             children: [
                 {type: "elem", elem: accentBody, wrapperClasses: ["svg-align"]},
                 {type: "kern", size: kern},

package/src/functions/arrow.js

@@ -9,6 +9,14 @@ import * as mml from "../buildMathML";
 
 import type {ParseNode} from "../parseNode";
 
+// Helper function
+const paddedNode = group => {
+    const node = new mathMLTree.MathNode("mpadded", group ? [group] : []);
+    node.setAttribute("width", "+0.6em");
+    node.setAttribute("lspace", "0.3em");
+    return node;
+};
+
 // Stretchy arrows with an optional argument
 defineFunction({
     type: "xArrow",
@@ -105,12 +113,11 @@ defineFunction({
     mathmlBuilder(group, options) {
         const arrowNode = stretchy.mathMLnode(group.label);
         let node;
-        let lowerNode;
 
         if (group.body) {
-            const upperNode = mml.buildGroup(group.body, options);
+            const upperNode = paddedNode(mml.buildGroup(group.body, options));
             if (group.below) {
-                lowerNode = mml.buildGroup(group.below, options);
+                const lowerNode = paddedNode(mml.buildGroup(group.below, options));
                 node = new mathMLTree.MathNode(
                     "munderover", [arrowNode, lowerNode, upperNode]
                 );
@@ -118,10 +125,13 @@ defineFunction({
                 node = new mathMLTree.MathNode("mover", [arrowNode, upperNode]);
             }
         } else if (group.below) {
-            lowerNode = mml.buildGroup(group.below, options);
+            const lowerNode = paddedNode(mml.buildGroup(group.below, options));
             node = new mathMLTree.MathNode("munder", [arrowNode, lowerNode]);
         } else {
-            node = new mathMLTree.MathNode("mover", [arrowNode]);
+            // This should never happen.
+            // Parser.js throws an error if there is no argument.
+            node = paddedNode();
+            node = new mathMLTree.MathNode("mover", [arrowNode, node]);
         }
         return node;
     },

package/src/functions/color.js

@@ -22,7 +22,8 @@ const htmlBuilder = (group, options) => {
 };
 
 const mathmlBuilder = (group, options) => {
-    const inner = mml.buildExpression(group.body, options);
+    const inner = mml.buildExpression(group.body,
+        options.withColor(group.color));
 
     const node = new mathMLTree.MathNode("mstyle", inner);
 
@@ -54,42 +55,6 @@ defineFunction({
     mathmlBuilder,
 });
 
-// TODO(kevinb): define these using macros
-defineFunction({
-    type: "color",
-    names: [
-        "\\blue", "\\orange", "\\pink", "\\red",
-        "\\green", "\\gray", "\\purple",
-        "\\blueA", "\\blueB", "\\blueC", "\\blueD", "\\blueE",
-        "\\tealA", "\\tealB", "\\tealC", "\\tealD", "\\tealE",
-        "\\greenA", "\\greenB", "\\greenC", "\\greenD", "\\greenE",
-        "\\goldA", "\\goldB", "\\goldC", "\\goldD", "\\goldE",
-        "\\redA", "\\redB", "\\redC", "\\redD", "\\redE",
-        "\\maroonA", "\\maroonB", "\\maroonC", "\\maroonD", "\\maroonE",
-        "\\purpleA", "\\purpleB", "\\purpleC", "\\purpleD", "\\purpleE",
-        "\\mintA", "\\mintB", "\\mintC",
-        "\\grayA", "\\grayB", "\\grayC", "\\grayD", "\\grayE",
-        "\\grayF", "\\grayG", "\\grayH", "\\grayI",
-        "\\kaBlue", "\\kaGreen",
-    ],
-    props: {
-        numArgs: 1,
-        allowedInText: true,
-        greediness: 3,
-    },
-    handler({parser, funcName}, args) {
-        const body = args[0];
-        return {
-            type: "color",
-            mode: parser.mode,
-            color: "katex-" + funcName.slice(1),
-            body: ordargument(body),
-        };
-    },
-    htmlBuilder,
-    mathmlBuilder,
-});
-
 defineFunction({
     type: "color",
     names: ["\\color"],
@@ -102,7 +67,13 @@ defineFunction({
     handler({parser, breakOnTokenText}, args) {
         const color = assertNodeType(args[0], "color-token").color;
 
-        // If we see a styling function, parse out the implicit body
+        // Set macro \current@color in current namespace to store the current
+        // color, mimicking the behavior of color.sty.
+        // This is currently used just to correctly color a \right
+        // that follows a \color command.
+        parser.gullet.macros.set("\\current@color", color);
+
+        // Parse out the implicit body that should be colored.
         const body = parser.parseExpression(true, breakOnTokenText);
 
         return {