katex 0.10.1 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "katex",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Fast math typesetting for the web.",
   "main": "dist/katex.js",
   "homepage": "https://katex.org",

package/src/Options.js

@@ -36,6 +36,10 @@ const sizeAtStyle = function(size: number, style: StyleInterface): number {
     return style.size < 2 ? size : sizeStyleMap[size - 1][style.size - 1];
 };
 
+// In these types, "" (empty string) means "no change".
+export type FontWeight = "textbf" | "textmd" | "";
+export type FontShape = "textit" | "textup" | "";
+
 export type OptionsData = {
     style: StyleInterface;
     color?: string | void;
@@ -44,8 +48,8 @@ export type OptionsData = {
     phantom?: boolean;
     font?: string;
     fontFamily?: string;
-    fontWeight?: string;
-    fontShape?: string;
+    fontWeight?: FontWeight;
+    fontShape?: FontShape;
     sizeMultiplier?: number;
     maxSize: number;
 };
@@ -68,8 +72,8 @@ class Options {
     // See: https://tex.stackexchange.com/questions/22350/difference-between-textrm-and-mathrm
     font: string;
     fontFamily: string;
-    fontWeight: string;
-    fontShape: string;
+    fontWeight: FontWeight;
+    fontShape: FontShape;
     sizeMultiplier: number;
     maxSize: number;
     _fontMetrics: FontMetrics | void;
@@ -244,7 +248,7 @@ class Options {
     /**
      * Creates a new options object with the given font weight
      */
-    withTextFontWeight(fontWeight: string): Options {
+    withTextFontWeight(fontWeight: FontWeight): Options {
         return this.extend({
             fontWeight,
             font: "",
@@ -254,7 +258,7 @@ class Options {
     /**
      * Creates a new options object with the given font weight
      */
-    withTextFontShape(fontShape: string): Options {
+    withTextFontShape(fontShape: FontShape): Options {
         return this.extend({
             fontShape,
             font: "",
@@ -295,81 +299,13 @@ class Options {
         return this._fontMetrics;
     }
 
-    /**
-     * A map of color names to CSS colors.
-     * TODO(emily): Remove this when we have real macros
-     */
-    static colorMap = {
-        "katex-blue": "#6495ed",
-        "katex-orange": "#ffa500",
-        "katex-pink": "#ff00af",
-        "katex-red": "#df0030",
-        "katex-green": "#28ae7b",
-        "katex-gray": "gray",
-        "katex-purple": "#9d38bd",
-        "katex-blueA": "#ccfaff",
-        "katex-blueB": "#80f6ff",
-        "katex-blueC": "#63d9ea",
-        "katex-blueD": "#11accd",
-        "katex-blueE": "#0c7f99",
-        "katex-tealA": "#94fff5",
-        "katex-tealB": "#26edd5",
-        "katex-tealC": "#01d1c1",
-        "katex-tealD": "#01a995",
-        "katex-tealE": "#208170",
-        "katex-greenA": "#b6ffb0",
-        "katex-greenB": "#8af281",
-        "katex-greenC": "#74cf70",
-        "katex-greenD": "#1fab54",
-        "katex-greenE": "#0d923f",
-        "katex-goldA": "#ffd0a9",
-        "katex-goldB": "#ffbb71",
-        "katex-goldC": "#ff9c39",
-        "katex-goldD": "#e07d10",
-        "katex-goldE": "#a75a05",
-        "katex-redA": "#fca9a9",
-        "katex-redB": "#ff8482",
-        "katex-redC": "#f9685d",
-        "katex-redD": "#e84d39",
-        "katex-redE": "#bc2612",
-        "katex-maroonA": "#ffbde0",
-        "katex-maroonB": "#ff92c6",
-        "katex-maroonC": "#ed5fa6",
-        "katex-maroonD": "#ca337c",
-        "katex-maroonE": "#9e034e",
-        "katex-purpleA": "#ddd7ff",
-        "katex-purpleB": "#c6b9fc",
-        "katex-purpleC": "#aa87ff",
-        "katex-purpleD": "#7854ab",
-        "katex-purpleE": "#543b78",
-        "katex-mintA": "#f5f9e8",
-        "katex-mintB": "#edf2df",
-        "katex-mintC": "#e0e5cc",
-        "katex-grayA": "#f6f7f7",
-        "katex-grayB": "#f0f1f2",
-        "katex-grayC": "#e3e5e6",
-        "katex-grayD": "#d6d8da",
-        "katex-grayE": "#babec2",
-        "katex-grayF": "#888d93",
-        "katex-grayG": "#626569",
-        "katex-grayH": "#3b3e40",
-        "katex-grayI": "#21242c",
-        "katex-kaBlue": "#314453",
-        "katex-kaGreen": "#71B307",
-    };
 
     /**
-     * Gets the CSS color of the current options object, accounting for the
-     * `colorMap`.
+     * Gets the CSS color of the current options object
      */
     getColor(): string | void {
         if (this.phantom) {
             return "transparent";
-        } else if (
-            this.color != null &&
-            Options.colorMap.hasOwnProperty(this.color)
-        ) {
-            return Options.colorMap[this.color];
         } else {
             return this.color;
         }

package/src/buildMathML.js

@@ -145,14 +145,24 @@ export const buildExpression = function(
                     lastGroup.children.push(...group.children);
                     continue;
                 }
+            } else if (lastGroup.type === 'mi' && lastGroup.children.length === 1) {
+                const lastChild = lastGroup.children[0];
+                if (lastChild instanceof TextNode && lastChild.text === '\u0338' &&
+                    (group.type === 'mo' || group.type === 'mi' ||
+                        group.type === 'mn')) {
+                    const child = group.children[0];
+                    if (child instanceof TextNode && child.text.length > 0) {
+                        // Overlay with combining character long solidus
+                        child.text = child.text.slice(0, 1) + "\u0338" +
+                            child.text.slice(1);
+                        groups.pop();
+                    }
+                }
             }
         }
         groups.push(group);
         lastGroup = group;
     }
-
-    // TODO(kevinb): combine \\not with mrels and mords
-
     return groups;
 };
 

package/src/domTree.js

@@ -264,6 +264,69 @@ export class Anchor implements HtmlDomNode {
     }
 }
 
+/**
+ * This node represents an image embed (<img>) element.
+ */
+export class Img implements VirtualNode {
+    src: string;
+    alt: string;
+    classes: string[];
+    height: number;
+    depth: number;
+    maxFontSize: number;
+    style: CssStyle;
+
+    constructor(
+        src: string,
+        alt: string,
+        style: CssStyle,
+    ) {
+        this.alt = alt;
+        this.src = src;
+        this.classes = ["mord"];
+        this.style = style;
+    }
+
+    hasClass(className: string): boolean {
+        return utils.contains(this.classes, className);
+    }
+
+    toNode(): Node {
+        const node = document.createElement("img");
+        node.src = this.src;
+        node.alt = this.alt;
+        node.className = "mord";
+
+        // Apply inline styles
+        for (const style in this.style) {
+            if (this.style.hasOwnProperty(style)) {
+                // $FlowFixMe
+                node.style[style] = this.style[style];
+            }
+        }
+
+        return node;
+    }
+
+    toMarkup(): string {
+        let markup = `<img  src='${this.src} 'alt='${this.alt}' `;
+
+        // Add the styles, after hyphenation
+        let styles = "";
+        for (const style in this.style) {
+            if (this.style.hasOwnProperty(style)) {
+                styles += `${utils.hyphenate(style)}:${this.style[style]};`;
+            }
+        }
+        if (styles) {
+            markup += ` style="${utils.escape(styles)}"`;
+        }
+
+        markup += "'/>";
+        return markup;
+    }
+}
+
 const iCombinations = {
     'î': '\u0131\u0302',
     'ï': '\u0131\u0308',

package/src/environments/array.js

@@ -25,6 +25,9 @@ export type AlignSpec = { type: "separator", separator: string } | {
     postgap?: number,
 };
 
+// Type to indicate column separation in MathML
+export type ColSeparationType = "align" | "alignat";
+
 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.
@@ -48,11 +51,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"> {
@@ -138,6 +142,7 @@ function parseArray(
         rowGaps,
         hskipBeforeAndAfter,
         hLinesBeforeRow,
+        colSeparationType,
     };
 }
 
@@ -367,8 +372,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(
+    const table = new mathMLTree.MathNode(
         "mtable", group.body.map(function(row) {
             return new mathMLTree.MathNode(
                 "mtr", row.map(function(cell) {
@@ -376,6 +387,110 @@ 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 = 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) {
+        // 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 {
+        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 === "") {
+        return table;
+    } else {
+        const wrapper =  new mathMLTree.MathNode("menclose", [table]);
+        wrapper.setAttribute("notation", menclose.trim());
+        return wrapper;
+    }
 };
 
 // Convenience function for aligned and alignedat environments.
@@ -448,6 +563,7 @@ const alignedHandler = function(context, args) {
             postgap: 0,
         };
     }
+    res.colSeparationType = isAligned ? "align" : "alignat";
     return res;
 };
 

package/src/fontMetrics.js

@@ -211,10 +211,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/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"],

package/src/functions/delimsizing.js

@@ -318,9 +318,19 @@ defineFunction({
         return middleDelim;
     },
     mathmlBuilder: (group, options) => {
-        const middleNode = new mathMLTree.MathNode(
-            "mo", [mml.makeText(group.delim, group.mode)]);
+        // A Firefox \middle will strech a character vertically only if it
+        // is in the fence part of the operator dictionary at:
+        // https://www.w3.org/TR/MathML3/appendixc.html.
+        // So we need to avoid U+2223 and use plain "|" instead.
+        const textNode = (group.delim === "\\vert" || group.delim === "|")
+            ? mml.makeText("|", "text")
+            : mml.makeText(group.delim, group.mode);
+        const middleNode = new mathMLTree.MathNode("mo", [textNode]);
         middleNode.setAttribute("fence", "true");
+        // MathML gives 5/18em spacing to each <mo> element.
+        // \middle should get delimiter spacing instead.
+        middleNode.setAttribute("lspace", "0.05em");
+        middleNode.setAttribute("rspace", "0.05em");
         return middleNode;
     },
 });

package/src/functions/enclose.js

@@ -112,7 +112,9 @@ const htmlBuilder = (group, options) => {
 
 const mathmlBuilder = (group, options) => {
     const node = new mathMLTree.MathNode(
-        "menclose", [mml.buildGroup(group.body, options)]);
+        (group.label.indexOf("colorbox") > -1) ? "mpadded" : "menclose",
+        [mml.buildGroup(group.body, options)]
+    );
     switch (group.label) {
         case "\\cancel":
             node.setAttribute("notation", "updiagonalstrike");
@@ -127,8 +129,18 @@ const mathmlBuilder = (group, options) => {
             node.setAttribute("notation", "box");
             break;
         case "\\fcolorbox":
-            // TODO(ron): I don't know any way to set the border color.
-            node.setAttribute("notation", "box");
+        case "\\colorbox":
+            // <menclose> doesn't have a good notation option. So use <mpadded>
+            // instead. Set some attributes that come included with <menclose>.
+            node.setAttribute("width", "+6pt");
+            node.setAttribute("height", "+6pt");
+            node.setAttribute("lspace", "3pt"); // LaTeX source2e: \fboxsep = 3pt
+            node.setAttribute("voffset", "3pt");
+            if (group.label === "\\fcolorbox") {
+                const thk = options.fontMetrics().defaultRuleThickness;
+                node.setAttribute("style", "border: " + thk + "em solid " +
+                    String(group.borderColor));
+            }
             break;
         case "\\xcancel":
             node.setAttribute("notation", "updiagonalstrike downdiagonalstrike");

package/src/functions/genfrac.js

@@ -11,22 +11,29 @@ import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
 import {calculateSize} from "../units";
 
-const htmlBuilder = (group, options) => {
-    // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e).
+const adjustStyle = (size, originalStyle) => {
     // Figure out what style this fraction should be in based on the
     // function used
-    let style = options.style;
-    if (group.size === "display") {
-        style = Style.DISPLAY;
-    } else if (group.size === "text" &&
+    let style = originalStyle;
+    if (size === "display") {
+        // Get display style as a default.
+        // If incoming style is sub/sup, use style.text() to get correct size.
+        style = style.id >= Style.SCRIPT.id ? style.text() : Style.DISPLAY;
+    } else if (size === "text" &&
         style.size === Style.DISPLAY.size) {
         // We're in a \tfrac but incoming style is displaystyle, so:
         style = Style.TEXT;
-    } else if (group.size === "script") {
+    } else if (size === "script") {
         style = Style.SCRIPT;
-    } else if (group.size === "scriptscript") {
+    } else if (size === "scriptscript") {
         style = Style.SCRIPTSCRIPT;
     }
+    return style;
+};
+
+const htmlBuilder = (group, options) => {
+    // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e).
+    const style = adjustStyle(group.size, options.style);
 
     const nstyle = style.fracNum();
     const dstyle = style.fracDen();
@@ -69,7 +76,7 @@ const htmlBuilder = (group, options) => {
     let numShift;
     let clearance;
     let denomShift;
-    if (style.size === Style.DISPLAY.size) {
+    if (style.size === Style.DISPLAY.size || group.size === "display") {
         numShift = options.fontMetrics().num1;
         if (ruleWidth > 0) {
             clearance = 3 * ruleSpacing;
@@ -176,7 +183,7 @@ const htmlBuilder = (group, options) => {
 };
 
 const mathmlBuilder = (group, options) => {
-    const node = new mathMLTree.MathNode(
+    let node = new mathMLTree.MathNode(
         "mfrac",
         [
             mml.buildGroup(group.numer, options),
@@ -190,12 +197,22 @@ const mathmlBuilder = (group, options) => {
         node.setAttribute("linethickness", ruleWidth + "em");
     }
 
+    const style = adjustStyle(group.size, options.style);
+    if (style.size !== options.style.size) {
+        node = new mathMLTree.MathNode("mstyle", [node]);
+        const isDisplay = (style.size === Style.DISPLAY.size) ? "true" : "false";
+        node.setAttribute("displaystyle", isDisplay);
+        node.setAttribute("scriptlevel", "0");
+    }
+
     if (group.leftDelim != null || group.rightDelim != null) {
         const withDelims = [];
 
         if (group.leftDelim != null) {
             const leftOp = new mathMLTree.MathNode(
-                "mo", [new mathMLTree.TextNode(group.leftDelim)]);
+                "mo",
+                [new mathMLTree.TextNode(group.leftDelim.replace("\\", ""))]
+            );
 
             leftOp.setAttribute("fence", "true");
 
@@ -206,7 +223,9 @@ const mathmlBuilder = (group, options) => {
 
         if (group.rightDelim != null) {
             const rightOp = new mathMLTree.MathNode(
-                "mo", [new mathMLTree.TextNode(group.rightDelim)]);
+                "mo",
+                [new mathMLTree.TextNode(group.rightDelim.replace("\\", ""))]
+            );
 
             rightOp.setAttribute("fence", "true");