Support stretchy wide elements. (#670)

2025-10-05 03:08:40 +00:00 · 2017-06-15 20:47:51 -07:00
parent eaa7f3a17d
commit eff7653c51
57 changed files with 1634 additions and 42 deletions
--- a/src/buildHTML.js
+++ b/src/buildHTML.js
@@ -14,6 +14,7 @@ const delimiter = require("./delimiter");
 const domTree = require("./domTree");
 const fontMetrics = require("./fontMetrics");
 const utils = require("./utils");
+const stretchy = require("./stretchy");

 const makeSpan = buildCommon.makeSpan;

@@ -147,18 +148,24 @@ const getTypeOfDomTree = function(node) {
 * handling them itself.
 */
 const shouldHandleSupSub = function(group, options) {
-    if (!group) {
+    if (!group.value.base) {
        return false;
-    } else if (group.type === "op") {
-        // Operators handle supsubs differently when they have limits
-        // (e.g. `\displaystyle\sum_2^3`)
-        return group.value.limits &&
-            (options.style.size === Style.DISPLAY.size ||
-            group.value.alwaysHandleSupSub);
-    } else if (group.type === "accent") {
-        return isCharacterBox(group.value.base);
    } else {
-        return null;
+        const base = group.value.base;
+        if (base.type === "op") {
+            // Operators handle supsubs differently when they have limits
+            // (e.g. `\displaystyle\sum_2^3`)
+            return base.value.limits &&
+                (options.style.size === Style.DISPLAY.size ||
+                base.value.alwaysHandleSupSub);
+        } else if (base.type === "accent") {
+            return isCharacterBox(base.value.base);
+        } else if (base.type === "horizBrace") {
+            const isSup = (group.value.sub ? false : true);
+            return (isSup === base.value.isOver);
+        } else {
+            return null;
+        }
    }
 };

@@ -300,7 +307,7 @@ groupTypes.supsub = function(group, options) {

    // Here is where we defer to the inner group if it should handle
    // superscripts and subscripts itself.
-    if (shouldHandleSupSub(group.value.base, options)) {
+    if (shouldHandleSupSub(group, options)) {
        return groupTypes[group.value.base.type](group, options);
    }

@@ -1437,13 +1444,16 @@ groupTypes.accent = function(group, options) {
    const body = buildGroup(
        base, options.withStyle(style.cramp()));

+    // Does the accent need to shift for the skew of a character?
+    const mustShift = group.value.isShifty && isCharacterBox(base);
+
    // Calculate the skew of the accent. This is based on the line "If the
    // nucleus is not a single character, let s = 0; otherwise set s to the
    // kern amount for the nucleus followed by the \skewchar of its font."
    // Note that our skew metrics are just the kern between each character
    // and the skewchar.
    let skew = 0;
-    if (isCharacterBox(base)) {
+    if (mustShift) {
        // If the base is a character box, then we want the skew of the
        // innermost character. To do that, we find the innermost character:
        const baseChar = getBaseElem(base);
@@ -1464,31 +1474,48 @@ groupTypes.accent = function(group, options) {
        style.metrics.xHeight);

    // Build the accent
-    const accent = buildCommon.makeSymbol(
-        group.value.accent, "Main-Regular", "math", options);
-    // 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;
+    let accentBody;
+    if (!group.value.isStretchy) {
+        const accent = buildCommon.makeSymbol(
+            group.value.label, "Main-Regular", "math", options);
+        // 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;

-    // The \vec character that the fonts use is a combining character, and
-    // thus shows up much too far to the left. To account for this, we add a
-    // specific class which shifts the accent over to where we want it.
-    // TODO(emily): Fix this in a better way, like by changing the font
-    const vecClass = group.value.accent === "\\vec" ? "accent-vec" : null;
+        // The \vec character that the fonts use is a combining character, and
+        // thus shows up much too far to the left. To account for this, we add a
+        // specific class which shifts the accent over to where we want it.
+        // TODO(emily): Fix this in a better way, like by changing the font
+        const vecClass = group.value.label === "\\vec" ? "accent-vec" : null;

-    let accentBody = makeSpan(["accent-body", vecClass], [
-        makeSpan([], [accent])]);
+        accentBody = makeSpan(["accent-body", vecClass], [
+            makeSpan([], [accent])]);

-    accentBody = buildCommon.makeVList([
-        {type: "elem", elem: body},
-        {type: "kern", size: -clearance},
-        {type: "elem", elem: accentBody},
-    ], "firstBaseline", null, options);
+        // Shift the accent over by the skew. Note we shift by twice the skew
+        // because we are centering the accent, so by adding 2*skew to the left,
+        // we shift it to the right by 1*skew.
+        accentBody.style.marginLeft = 2 * skew + "em";

-    // Shift the accent over by the skew. Note we shift by twice the skew
-    // because we are centering the accent, so by adding 2*skew to the left,
-    // we shift it to the right by 1*skew.
-    accentBody.children[1].style.marginLeft = 2 * skew + "em";
+        accentBody = buildCommon.makeVList([
+            {type: "elem", elem: body},
+            {type: "kern", size: -clearance},
+            {type: "elem", elem: accentBody},
+        ], "firstBaseline", null, options);
+
+    } else {
+        accentBody = stretchy.svgSpan(group, options);
+
+        if (skew > 0) {
+            // Shorten the accent. That will nudge it to the right.
+            const adjSize = "calc(100% - " + (2 * skew) + "em) 100%";
+            accentBody.style.backgroundSize = adjSize;
+        }
+
+        accentBody = buildCommon.makeVList([
+            {type: "elem", elem: body},
+            {type: "elem", elem: accentBody},
+        ], "firstBaseline", null, options);
+    }

    const accentWrap = makeSpan(["mord", "accent"], [accentBody], options);

@@ -1510,6 +1537,209 @@ groupTypes.accent = function(group, options) {
    }
 };

+groupTypes.horizBrace = function(group, options) {
+    const style = options.style;
+
+    const hasSupSub = (group.type === "supsub");
+    let supSubGroup;
+    let newOptions;
+    let supSubReset;
+    if (hasSupSub) {
+        // Ref: LaTeX source2e: }}}}\limits}
+        // i.e. LaTeX treats the brace similar to an op and passes it
+        // with \limits, so we need to assign supsub style.
+        if (group.value.sup) {
+            newOptions = options.withStyle(style.sup());
+            supSubGroup = buildGroup(group.value.sup, newOptions);
+            supSubReset =  makeSpan([style.reset(), style.sup().cls()],
+                [supSubGroup], newOptions);
+        } else {
+            newOptions = options.withStyle(style.sub());
+            supSubGroup = buildGroup(group.value.sub, newOptions);
+            supSubReset =  makeSpan([style.reset(), style.sub().cls()],
+                [supSubGroup], newOptions);
+        }
+        group = group.value.base;
+    }
+
+    // Build the base group
+    const body = buildGroup(
+       group.value.base, options.withStyle(style.cramp()));
+
+    // Create the stretchy element
+    const braceBody = stretchy.svgSpan(group, options);
+
+    // Generate the vlist, with the appropriate kerns               ┏━━━━━━━━┓
+    // This first vlist contains the subject matter and the brace:   equation
+    let vlist;
+    if (group.value.isOver) {
+        vlist = buildCommon.makeVList([
+            {type: "elem", elem: body},
+            {type: "kern", size: 0.1},
+            {type: "elem", elem: braceBody},
+        ], "firstBaseline", null, options);
+    } else {
+        vlist = buildCommon.makeVList([
+            {type: "elem", elem: braceBody},
+            {type: "kern", size: 0.1},
+            {type: "elem", elem: body},
+        ], "bottom", body.depth + 0.1 + braceBody.height, options);
+    }
+
+    if (hasSupSub) {
+        // In order to write the supsub, wrap the first vlist in another vlist:
+        // They can't all go in the same vlist, because the note might be wider
+        // than the equation. We want the equation to control the brace width.
+
+        //      note          long note           long note
+        //   ┏━━━━━━━━┓   or    ┏━━━┓     not    ┏━━━━━━━━━┓
+        //    equation           eqn                 eqn
+
+        const vSpan = makeSpan(["mord",
+            (group.value.isOver ? "mover" : "munder")],
+            [vlist], options);
+
+        if (group.value.isOver) {
+            vlist = buildCommon.makeVList([
+                {type: "elem", elem: vSpan},
+                {type: "kern", size: 0.2},
+                {type: "elem", elem: supSubReset},
+            ], "firstBaseline", null, options);
+        } else {
+            vlist = buildCommon.makeVList([
+                {type: "elem", elem: supSubReset},
+                {type: "kern", size: 0.2},
+                {type: "elem", elem: vSpan},
+            ], "bottom", vSpan.depth + 0.2 + supSubReset.height,
+            options);
+        }
+    }
+
+    return makeSpan(["mord", (group.value.isOver ? "mover" : "munder")],
+        [vlist], options);
+};
+
+groupTypes.accentUnder = function(group, options) {
+    // Treat under accents much like underlines.
+    const innerGroup = buildGroup(group.value.body, options);
+
+    const accentBody = stretchy.svgSpan(group, options);
+    const kern = (/tilde/.test(group.value.label) ? 0.12 : 0);
+
+    // Generate the vlist, with the appropriate kerns
+    const vlist = buildCommon.makeVList([
+        {type: "elem", elem: accentBody},
+        {type: "kern", size: kern},
+        {type: "elem", elem: innerGroup},
+    ], "bottom", accentBody.height + kern, options);
+
+    return makeSpan(["mord", "accentunder"], [vlist], options);
+};
+
+groupTypes.enclose = function(group, options) {
+    // \cancel, \bcancel, \xcancel, \sout, \fbox
+    const inner = buildGroup(group.value.body, options.reset());
+
+    const label = group.value.label.substr(1);
+    const scale = options.style.sizeMultiplier;
+    let img;
+    let pad = 0;
+    let imgShift = 0;
+
+    if (label === "sout") {
+        img = makeSpan(["stretchy", "sout"]);
+        img.height = fontMetrics.metrics.defaultRuleThickness / scale;
+        img.maxFontSize = 1.0;
+        imgShift = -0.5 * options.style.metrics.xHeight;
+    } else {
+        // Add horizontal padding
+        inner.classes.push((label === "fbox" ? "boxpad" : "cancel-pad"));
+
+        // Add vertical padding
+        const isCharBox = (isCharacterBox(group.value.body));
+        // ref: LaTeX source2e: \fboxsep = 3pt;  \fboxrule = .4pt
+        // ref: cancel package: \advance\totalheight2\p@ % "+2"
+        pad = (label === "fbox" ? 0.34 : (isCharBox ? 0.2 : 0));
+        imgShift = inner.depth + pad;
+
+        img = stretchy.encloseSpan(inner, isCharBox, label, pad, options);
+    }
+
+    const vlist = buildCommon.makeVList([
+        {type: "elem", elem: inner, shift: 0},
+        {type: "elem", elem: img, shift: imgShift},
+    ], "individualShift", null, options);
+
+    if (img.height > vlist.maxFontSize) {
+        // Correct for an issue in makeVList. It placed the image top at
+        // the top of the line box created by a 1 em maxFontSize.
+        vlist.children[1].style.top = -(inner.height + pad - 0.9 / scale)
+            + "em";
+        // The 0.9 in the previous line is there because the KaTeX fonts
+        // have an ascent = 0.9 em. We're setting the top of the image
+        // relative to the top of that line box.
+    }
+
+    if (/cancel/.test(label)) {
+        // cancel does not create horiz space for its line extension.
+        // That is, not when adjacent to a mord.
+        return makeSpan(["mord", "cancel-lap"], [vlist], options);
+    } else {
+        return makeSpan(["mord"], [vlist], options);
+    }
+};
+
+groupTypes.xArrow = function(group, options) {
+    const style = options.style;
+
+    // Build the argument groups in the appropriate style.
+    // Ref: amsmath.dtx:   \hbox{$\scriptstyle\mkern#3mu{#6}\mkern#4mu$}%
+
+    let newOptions = options.withStyle(style.sup());
+    const upperGroup = buildGroup(group.value.body, newOptions);
+    const upperGroupWrap = makeSpan([style.reset(), style.sup().cls()],
+        [upperGroup], newOptions);
+
+    let lowerGroup;
+    let lowerGroupWrap;
+    if (group.value.below) {
+        // Build the lower group
+        newOptions = options.withStyle(style.sub());
+        lowerGroup = buildGroup(group.value.below, newOptions);
+        lowerGroupWrap = makeSpan([style.reset(), style.sub().cls()],
+            [lowerGroup], newOptions);
+    }
+
+    const arrowBody = stretchy.svgSpan(group, options);
+
+    const arrowShift = -style.metrics.axisHeight + arrowBody.depth;
+    const upperShift = -style.metrics.axisHeight - arrowBody.height -
+        0.111;    // 2 mu. Ref: amsmath.dtx: #7\if0#2\else\mkern#2mu\fi
+
+    // Generate the vlist
+    let vlist;
+    if (group.value.below) {
+        const lowerShift = -style.metrics.axisHeight
+            + lowerGroupWrap.height + arrowBody.height
+            + 0.111;
+        vlist = buildCommon.makeVList([
+            {type: "elem", elem: upperGroupWrap, shift: upperShift},
+            {type: "elem", elem: arrowBody,  shift: arrowShift},
+            {type: "elem", elem: lowerGroupWrap, shift: lowerShift},
+        ], "individualShift", null, options);
+    } else {
+        vlist = buildCommon.makeVList([
+            {type: "elem", elem: upperGroupWrap, shift: upperShift},
+            {type: "elem", elem: arrowBody,  shift: arrowShift},
+        ], "individualShift", null, options);
+    }
+
+    const node = makeSpan(["mrel", "x-arrow"], [vlist], options);
+    node.depth = node.depth;
+    node.height = node.height;
+    return node;
+};
+
 groupTypes.phantom = function(group, options) {
    const elements = buildExpression(
        group.value.value,
--- a/src/buildMathML.js
+++ b/src/buildMathML.js
@@ -10,6 +10,7 @@ const mathMLTree = require("./mathMLTree");
 const ParseError = require("./ParseError");
 const symbols = require("./symbols");
 const utils = require("./utils");
+const stretchy = require("./stretchy");

 const makeSpan = buildCommon.makeSpan;
 const fontMap = buildCommon.fontMap;
@@ -195,6 +196,20 @@ groupTypes.color = function(group, options) {
 };

 groupTypes.supsub = function(group, options) {
+    // Is the inner group a relevant horizonal brace?
+    let isBrace = false;
+    let isOver;
+    let isSup;
+    if (group.value.base) {
+        if (group.value.base.value.type === "horizBrace") {
+            isSup = (group.value.sup ? true : false);
+            if (isSup === group.value.base.value.isOver) {
+                isBrace = true;
+                isOver = group.value.base.value.isOver;
+            }
+        }
+    }
+
    const children = [buildGroup(group.value.base, options)];

    if (group.value.sub) {
@@ -206,7 +221,9 @@ groupTypes.supsub = function(group, options) {
    }

    let nodeType;
-    if (!group.value.sub) {
+    if (isBrace) {
+        nodeType = (isOver ? "mover" : "munder");
+    } else if (!group.value.sub) {
        nodeType = "msup";
    } else if (!group.value.sup) {
        nodeType = "msub";
@@ -323,8 +340,13 @@ groupTypes.middle = function(group, options) {
 };

 groupTypes.accent = function(group, options) {
-    const accentNode = new mathMLTree.MathNode(
-        "mo", [makeText(group.value.accent, group.mode)]);
+    let accentNode;
+    if (group.value.isStretchy) {
+        accentNode = stretchy.mathMLnode(group.value.label);
+    } else {
+        accentNode = new mathMLTree.MathNode(
+            "mo", [makeText(group.value.label, group.mode)]);
+    }

    const node = new mathMLTree.MathNode(
        "mover",
@@ -499,6 +521,69 @@ groupTypes.underline = function(group, options) {
    return node;
 };

+groupTypes.accentUnder = function(group, options) {
+    const accentNode = stretchy.mathMLnode(group.value.label);
+    const node = new mathMLTree.MathNode(
+        "munder",
+        [buildGroup(group.value.body, options), accentNode]
+    );
+    node.setAttribute("accentunder", "true");
+    return node;
+};
+
+groupTypes.enclose = function(group, options) {
+    const node = new mathMLTree.MathNode(
+        "menclose", [buildGroup(group.value.body, options)]);
+    let notation = "";
+    switch (group.value.label) {
+        case "\\bcancel":
+            notation = "downdiagonalstrike";
+            break;
+        case "\\sout":
+            notation = "horizontalstrike";
+            break;
+        case "\\fbox":
+            notation = "box";
+            break;
+        default:
+            notation = "updiagonalstrike";
+    }
+    node.setAttribute("notation", notation);
+    return node;
+};
+
+groupTypes.horizBrace = function(group, options) {
+    const accentNode = stretchy.mathMLnode(group.value.label);
+    return new mathMLTree.MathNode(
+        (group.value.isOver ? "mover" : "munder"),
+        [buildGroup(group.value.base, options), accentNode]
+    );
+};
+
+groupTypes.xArrow = function(group, options) {
+    const arrowNode = stretchy.mathMLnode(group.value.label);
+    let node;
+    let lowerNode;
+
+    if (group.value.body) {
+        const upperNode = buildGroup(group.value.body, options);
+        if (group.value.below) {
+            lowerNode = buildGroup(group.value.below, options);
+            node = new mathMLTree.MathNode(
+                "munderover", [arrowNode, lowerNode, upperNode]
+            );
+        } else {
+            node = new mathMLTree.MathNode("mover", [arrowNode, upperNode]);
+        }
+    } else if (group.value.below) {
+        lowerNode = buildGroup(group.value.below, options);
+        node = new mathMLTree.MathNode("munder", [arrowNode, lowerNode]);
+    } else {
+        node = new mathMLTree.MathNode("mover", [arrowNode]);
+    }
+    return node;
+};
+
 groupTypes.rule = function(group) {
    // TODO(emily): Figure out if there's an actual way to draw black boxes
    // in MathML.
--- a/src/functions.js
+++ b/src/functions.js
@@ -634,19 +634,99 @@ defineFunction([
 defineFunction([
    "\\acute", "\\grave", "\\ddot", "\\tilde", "\\bar", "\\breve",
    "\\check", "\\hat", "\\vec", "\\dot",
-    // We don't support expanding accents yet
-    // "\\widetilde", "\\widehat"
+    "\\widehat", "\\widetilde", "\\overrightarrow", "\\overleftarrow",
+    "\\Overrightarrow", "\\overleftrightarrow", "\\overgroup",
+    "\\overlinesegment", "\\overleftharpoon", "\\overrightharpoon",
+], {
+    numArgs: 1,
+}, function(context, args) {
+    const base = args[0];
+
+    const isStretchy = !utils.contains([
+        "\\acute", "\\grave", "\\ddot", "\\tilde", "\\bar", "\\breve",
+        "\\check", "\\hat", "\\vec", "\\dot",
+    ], context.funcName);
+
+    const isShifty = !isStretchy || utils.contains([
+        "\\widehat", "\\widetilde",
+    ], context.funcName);
+
+    return {
+        type: "accent",
+        label: context.funcName,
+        isStretchy: isStretchy,
+        isShifty: isShifty,
+        value: ordargument(base),
+        base: base,
+    };
+});
+
+// Horizontal stretchy braces
+defineFunction([
+    "\\overbrace", "\\underbrace",
 ], {
    numArgs: 1,
 }, function(context, args) {
    const base = args[0];
    return {
-        type: "accent",
-        accent: context.funcName,
+        type: "horizBrace",
+        label: context.funcName,
+        isOver: /^\\over/.test(context.funcName),
        base: base,
    };
 });

+// Stretchy accents under the body
+defineFunction([
+    "\\underleftarrow", "\\underrightarrow", "\\underleftrightarrow",
+    "\\undergroup", "\\underlinesegment", "\\undertilde",
+], {
+    numArgs: 1,
+}, function(context, args) {
+    const body = args[0];
+    return {
+        type: "accentUnder",
+        label: context.funcName,
+        value: ordargument(body),
+        body: body,
+    };
+});
+
+// Stretchy arrows with an optional argument
+defineFunction([
+    "\\xleftarrow", "\\xrightarrow", "\\xLeftarrow", "\\xRightarrow",
+    "\\xleftrightarrow", "\\xLeftrightarrow", "\\xhookleftarrow",
+    "\\xhookrightarrow", "\\xmapsto", "\\xrightharpoondown",
+    "\\xrightharpoonup", "\\xleftharpoondown", "\\xleftharpoonup",
+    "\\xrightleftharpoons", "\\xleftrightharpoons", "\\xLongequal",
+    "\\xtwoheadrightarrow", "\\xtwoheadleftarrow", "\\xLongequal",
+    "\\xtofrom",
+], {
+    numArgs: 1,
+    numOptionalArgs: 1,
+}, function(context, args) {
+    const below = args[0];
+    const body = args[1];
+    return {
+        type: "xArrow",   // x for extensible
+        label: context.funcName,
+        body: body,
+        below: below,
+    };
+});
+
+// enclose
+defineFunction(["\\cancel", "\\bcancel", "\\xcancel", "\\sout", "\\fbox"], {
+    numArgs: 1,
+}, function(context, args) {
+    const body = args[0];
+    return {
+        type: "enclose",
+        label: context.funcName,
+        body: body,
+    };
+});
+
 // Infix generalized fractions
 defineFunction(["\\over", "\\choose", "\\atop"], {
    numArgs: 0,
--- a/src/macros.js
+++ b/src/macros.js
@@ -22,6 +22,9 @@ defineMacro("\\endgroup", "}");
 defineMacro("\\overset", "\\mathop{#2}\\limits^{#1}");
 defineMacro("\\underset", "\\mathop{#2}\\limits_{#1}");

+// \newcommand{\boxed}[1]{\fbox{\m@th$\displaystyle#1$}}
+defineMacro("\\boxed", "\\fbox{\\displaystyle{#1}}");
+
 //TODO: When implementing \dots, should ideally add the \DOTSB indicator
 //      into the macro, to indicate these are binary operators.
 // \def\iff{\DOTSB\;\Longleftrightarrow\;}
@@ -30,3 +33,4 @@ defineMacro("\\underset", "\\mathop{#2}\\limits_{#1}");
 defineMacro("\\iff", "\\;\\Longleftrightarrow\\;");
 defineMacro("\\implies", "\\;\\Longrightarrow\\;");
 defineMacro("\\impliedby", "\\;\\Longleftarrow\\;");
+
--- a/src/stretchy.js
+++ b/src/stretchy.js
@@ -0,0 +1,186 @@
+/**
+ * This file provides support to buildMathML.js and buildHTML.js
+ * for stretchy wide elements rendered from background-image SVG files
+ * and other CSS trickery.
+ */
+
+const buildCommon = require("./buildCommon");
+const mathMLTree = require("./mathMLTree");
+const utils = require("./utils");
+
+const stretchyCodePoint = {
+    widehat : "^",
+    widetilde : "~",
+    undertilde : "~",
+    overleftarrow : "\u2190",
+    underleftarrow : "\u2190",
+    xleftarrow : "\u2190",
+    overrightarrow: "\u2192",
+    underrightarrow: "\u2192",
+    xrightarrow : "\u2192",
+    underbrace : "\u23b5",
+    overbrace : "\u23de",
+    overleftrightarrow : "\u2194",
+    underleftrightarrow : "\u2194",
+    xleftrightarrow : "\u2194",
+    Overrightarrow : "\u21d2",
+    xRightarrow : "\u21d2",
+    overleftharpoon : "\u21bc",
+    xleftharpoonup : "\u21bc",
+    overrightharpoon : "\u21c0",
+    xrightharpoonup : "\u21c0",
+    xLeftarrow : "\u21d0",
+    xLeftrightarrow : "\u21d4",
+    xhookleftarrow : "\u21a9",
+    xhookrightarrow : "\u21aa",
+    xmapsto : "\u21a6",
+    xrightharpoondown : "\u21c1",
+    xleftharpoondown : "\u21bd",
+    xrightleftharpoons : "\u21cc",
+    xleftrightharpoons : "\u21cb",
+    xtwoheadleftarrow : "\u219e",
+    xtwoheadrightarrow : "\u21a0",
+    xLongequal : "=",
+    xtofrom : "\u21c4",
+};
+
+const mathMLnode = function(label) {
+    const node = new mathMLTree.MathNode(
+        "mo", [new mathMLTree.TextNode(stretchyCodePoint[label.substr(1)])]);
+    node.setAttribute("stretchy", "true");
+    return node;
+};
+
+// In the katexImagesData object just below, the dimensions all
+// correspond to path geometry inside the relevant SVG file.
+// For example, \rightarrow uses the same arrowhead as glyph U+2192
+// from the KaTeX Main font. The scaling factor is 1000.
+// That is, inside the font, that arrowhead is 522 units tall, which
+// corresponds to 0.522 em inside the document.
+// And for extensible arrows, we split that distance around the math axis.
+
+const katexImagesData = {
+                 // height, depth, fileName
+    overleftarrow : [0.522, 0, "leftarrow"],
+    underleftarrow : [0.522, 0, "leftarrow"],
+    xleftarrow : [0.261, 0.261, "leftarrow"],
+    overrightarrow : [0.522, 0, "rightarrow"],
+    underrightarrow : [0.522, 0, "rightarrow"],
+    xrightarrow : [0.261, 0.261, "rightarrow"],
+    overbrace : [0.548, 0, "overbrace"],
+    underbrace : [0.548, 0, "underbrace"],
+    overleftrightarrow : [0.522, 0, "leftrightarrow"],
+    underleftrightarrow : [0.522, 0, "leftrightarrow"],
+    xleftrightarrow : [0.261, 0.261, "leftrightarrow"],
+    Overrightarrow : [0.56, 0, "doublerightarrow"],
+    xLeftarrow : [0.28, 0.28, "doubleleftarrow"],
+    xRightarrow : [0.28, 0.28, "doublerightarrow"],
+    xLeftrightarrow : [0.28, 0.28, "doubleleftrightarrow"],
+    overleftharpoon : [0.522, 0, "leftharpoon"],
+    overrightharpoon : [0.522, 0, "rightharpoon"],
+    xleftharpoonup : [0.261, 0.261, "leftharpoon"],
+    xrightharpoonup : [0.261, 0.261, "rightharpoon"],
+    xhookleftarrow : [0.261, 0.261, "hookleftarrow"],
+    xhookrightarrow : [0.261, 0.261, "hookrightarrow"],
+    overlinesegment : [0.414, 0, "linesegment"],
+    underlinesegment : [0.414, 0, "linesegment"],
+    xmapsto : [0.261, 0.261, "mapsto"],
+    xrightharpoondown : [0.261, 0.261, "rightharpoondown"],
+    xleftharpoondown : [0.261, 0.261, "leftharpoondown"],
+    xrightleftharpoons : [0.358, 0.358, "rightleftharpoons"],
+    xleftrightharpoons : [0.358, 0.358, "leftrightharpoons"],
+    overgroup : [0.342, 0, "overgroup"],
+    undergroup : [0.342, 0, "undergroup"],
+    xtwoheadleftarrow : [0.167, 0.167, "twoheadleftarrow"],
+    xtwoheadrightarrow : [0.167, 0.167, "twoheadrightarrow"],
+    xLongequal : [0.167, 0.167, "longequal"],
+    xtofrom : [0.264, 0.264, "tofrom"],
+};
+
+const svgSpan = function(group, options) {
+    // Create a span with class(es) that refer to the background-image
+    // and/or the mask-image.
+    const label = group.value.label.substr(1);
+    let height = 0;
+    let depth = 0;
+    const classArray = ["stretchy"];
+    let fileName = "";
+
+    if (utils.contains(["widehat", "widetilde", "undertilde"], label)) {
+        // There are four SVG images available for each function.
+        // Choose a taller image when there are more characters.
+        const numChars = group.value.value.length;
+        if (numChars > 5) {
+            height = 0.312;
+            fileName = (label === "widehat" ? "widehat" : "tilde") + "4";
+        } else {
+            const imgIndex = [1, 1, 2, 2, 3, 3][numChars];
+            if (label === "widehat") {
+                height = [0, 0.24, 0.30, 0.30, 0.36, 0.36][numChars];
+                fileName = "widehat" + imgIndex;
+            } else {
+                height = [0, 0.26, 0.30, 0.30, 0.34, 0.34][numChars];
+                fileName = "tilde" + imgIndex;
+            }
+        }
+    } else {
+        const imgData = katexImagesData[label];
+        height = imgData[0];
+        depth = imgData[1];
+        fileName = imgData[2];
+        if (label.substr(0, 1) === "x") {
+            classArray.push("x-arrow");     // Lengthen the arrow via padding.
+        }
+    }
+
+    let node;
+    if (options.color) {
+        classArray.push(fileName);         // Set span height and IE image.
+        // The next two lines each add a class that CSS will apply
+        // only to browsers that support CSS mask.
+        // IE will not recognize that CSS, so it will fall back to
+        // the background-image set in the previous line of code.
+        classArray.push("mask");             // Over-ride image.
+        classArray.push(fileName + "-mask"); // Set mask-image.
+        node = buildCommon.makeSpan(classArray, [], options);
+        node.style.backgroundColor = options.color;
+    } else {
+        classArray.push(fileName);             // Set image and span height.
+        node = buildCommon.makeSpan(classArray, [], options);
+    }
+
+    node.height = height;
+    node.depth = depth;
+    node.maxFontSize = 1;
+    return node;
+};
+
+const encloseSpan = function(inner, isCharBox, label, pad, options) {
+    // Return an image span for \cancel, \bcancel, \xcancel, or \fbox
+    const img = buildCommon.makeSpan(["stretchy", label], [], options);
+
+    if (options.color) {
+        if (label === "fbox") {
+            img.style.borderColor = options.color;
+        } else {
+            img.classes[2] = label + "-mask";
+            img.style.backgroundColor = options.color;
+        }
+    }
+
+    img.height = inner.height + inner.depth + 2 * pad;
+    img.style.height = img.height + "em";
+
+    if (/cancel/.test(label) && isCharBox) {
+        img.maxFontSize = 1.2; // Make line box tall enough for image to fit.
+    } else {
+        img.maxFontSize = 1;
+    }
+    return img;
+};
+
+module.exports = {
+    encloseSpan: encloseSpan,
+    mathMLnode: mathMLnode,
+    svgSpan: svgSpan,
+};
--- a/static/images/Image-Licensing-and-Technical-Notes.txt
+++ b/static/images/Image-Licensing-and-Technical-Notes.txt
@@ -0,0 +1,70 @@
+Copyright and Licensing
+=======================
+
+Many KaTeX SVG images have been adapted from glyphs in the KaTeX fonts.
+Copyright (c) 2009-2010, Design Science, Inc. (<www.mathjax.org>)
+Copyright (c) 2014-2017 Khan Academy (<www.khanacademy.org>)
+Licensed under the SIL Open Font License, Version 1.1. See \nhttp://scripts.sil.org/OFL
+
+The license terms above apply to the following images:
+          FILENAME         ORIGINAL GLYPH     ORIGINAL FONT FILE
+    =====================  ==============     ==================
+    doubleleftarrow.svg       U+21D0             KaTeX Main
+    doubleleftrightarrow.svg  U+21D4             KaTeX Main
+    doublerightarrow.svg      U+21D2             KaTeX Main
+    hookleftarrow.svg         U+21A9             KaTeX Main
+    hookrightarrow.svg        U+21AA             KaTeX Main
+    leftarrow.svg             U+2190             KaTeX Main
+    leftharpoon.svg           U+21BD             KaTeX Main
+    leftrightarrow.svg        U+2194             KaTeX Main
+    leftrightharpoons.svg     U+21BC/21B1        KaTeX Main
+    mapsto.svg                U+21A6             KaTeX Main
+    overbrace.svg             U+23A9/23A8/23A7   KaTeX Size 4 Regular
+    rightarrow.svg            U+2192             KaTeX Main
+    rightharpoon.svg          U+21C0             KaTeX Main
+    rightharpoondown.svg      U+21C1             KaTeX Main
+    rightleftharpoons.svg     U+21CC             KaTeX Main
+    tofrom.svg                U+21C4             KaTeX AMS Regular
+    twoheadleftarrow.svg      U+219E             KaTeX AMS Regular
+    twoheadrightarrow.svg     U+21A0             KaTeX AMS Regular
+    underbrace.svg            U+23A9/23A8/23A7   KaTeX Size 4 Regular
+
+Images for \widehat, \widetilde, \overgroup, and \undergroup have been adapted (and modified)
+from font glyphs in the MnSymbol package. These fonts are in the public domain.
+
+
+Technical Comments
+==================
+
+Nested SVGs
+    Many of the KaTeX SVG images contain a nested SVG. This is done to achieve a
+    stretchy image while avoiding distortion of arrowheads or brace corners.
+
+    The inner SVG typically contains a very long (400 em) arrow.
+
+    The outer SVG acts like a window that exposes only part of the inner SVG. The
+    outer SVG will grow or shrink to match the dimensions set for it by CSS.
+
+    The inner SVG always has a longer, thinner aspect ratio than the outer SVG.
+    After the inner SVG fills 100% of the height of the outer SVG, there is a long
+    arrow shaft left over. That left-over shaft is not shown. Instead, it is
+    sliced off because the inner SVG is set to "preserveAspectRatio='... slice'".
+
+    Thus, the reader sees an arrow that matches the subject matter width without
+    distortion.
+
+    Some functions, such as \cancel, need to vary their aspect ratio. These functions
+    do not get the nested SVG treatment.
+
+Second Brush Stroke
+    Low resolution monitors struggle to display images in fine detail.
+    So browsers apply anti-aliasing as described at http://www.rastertragedy.com/.
+    A long straight arrow shaft therefore will sometimes appear as if it has a
+    blurred edge.
+
+    To mitigate this, these SVG files contain a second "brush-stroke" on the
+    arrow shafts. That is, a second long thin rectangular SVG path has been
+    written directly on top of each arrow shaft. This reinforcement causes some
+    of the screen pixels to display as black instead of the anti-aliased gray
+    pixel that a  single path would generate. So we get arrow shafts whose
+    edges appear to be sharper.
--- a/static/images/bcancel.svg
+++ b/static/images/bcancel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" preserveAspectRatio="none"><path stroke="#000" d="M0 0l12 12"/></svg>
--- a/static/images/cancel.svg
+++ b/static/images/cancel.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' preserveAspectRatio='none'><path stroke="#000" d="M0 12L12 0"/></svg>
--- a/static/images/doubleleftarrow.svg
+++ b/static/images/doubleleftarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-10c34-36 62.7-77 86-123 3.3-8 5-13.3 5-16 0-5.3-6.7-8-20-8-7.3 0-12.2.5-14.5 1.5-2.3 1-4.8 4.5-7.5 10.5-49.3 97.3-121.7 169.3-217 216-28 14-57.3 25-88 33-6.7 2-11 3.8-13 5.5-2 1.7-3 4.2-3 7.5s1 5.8 3 7.5c2 1.7 6.3 3.5 13 5.5 68 17.3 128.2 47.8 180.5 91.5 52.3 43.7 93.8 96.2 124.5 157.5 9.3 8 15.3 12.3 18 13h6c12-.7 18-4 18-10 0-2-1.7-7-5-15-23.3-46-52-87-86-123l-10-10h399738v-40H218c328 0 0 0 0 0l-10-8c-26.7-20-65.7-43-117-69 2.7-2 6-3.7 10-5 36.7-16 72.3-37.3 107-64l10-8h399782v-40zm8 0v40h399730v-40zm0 194v40h399730v-40z"/></svg></svg>
--- a/static/images/doubleleftrightarrow.svg
+++ b/static/images/doubleleftrightarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-10c34-36 62.7-77 86-123 3.3-8 5-13.3 5-16 0-5.3-6.7-8-20-8-7.3 0-12.2.5-14.5 1.5-2.3 1-4.8 4.5-7.5 10.5-49.3 97.3-121.7 169.3-217 216-28 14-57.3 25-88 33-6.7 2-11 3.8-13 5.5-2 1.7-3 4.2-3 7.5s1 5.8 3 7.5c2 1.7 6.3 3.5 13 5.5 68 17.3 128.2 47.8 180.5 91.5 52.3 43.7 93.8 96.2 124.5 157.5 9.3 8 15.3 12.3 18 13h6c12-.7 18-4 18-10 0-2-1.7-7-5-15-23.3-46-52-87-86-123l-10-10h399738v-40H218c328 0 0 0 0 0l-10-8c-26.7-20-65.7-43-117-69 2.7-2 6-3.7 10-5 36.7-16 72.3-37.3 107-64l10-8h399782v-40zm8 0v40h399730v-40zm0 194v40h399730v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 549" preserveAspectRatio="xMaxYMin slice"><path d="M399738 392l-10 10c-34 36-62.7 77-86 123-3.3 8-5 13.3-5 16 0 5.3 6.7 8 20 8 7.3 0 12.2-.5 14.5-1.5 2.3-1 4.8-4.5 7.5-10.5 49.3-97.3 121.7-169.3 217-216 28-14 57.3-25 88-33 6.7-2 11-3.8 13-5.5 2-1.7 3-4.2 3-7.5s-1-5.8-3-7.5c-2-1.7-6.3-3.5-13-5.5-68-17.3-128.2-47.8-180.5-91.5-52.3-43.7-93.8-96.2-124.5-157.5-9.3-8-15.3-12.3-18-13h-6c-12 .7-18 4-18 10 0 2 1.7 7 5 15 23.3 46 52 87 86 123l10 10H0v40h399782c-328 0 0 0 0 0l10 8c26.7 20 65.7 43 117 69-2.7 2-6 3.7-10 5-36.7 16-72.3 37.3-107 64l-10 8H0v40zM0 157v40h399730v-40zm0 194v40h399730v-40z"/></svg></svg>
--- a/static/images/doublerightarrow.svg
+++ b/static/images/doublerightarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMaxYMin slice"><path d="M399738 392l-10 10c-34 36-62.7 77-86 123-3.3 8-5 13.3-5 16 0 5.3 6.7 8 20 8 7.3 0 12.2-.5 14.5-1.5 2.3-1 4.8-4.5 7.5-10.5 49.3-97.3 121.7-169.3 217-216 28-14 57.3-25 88-33 6.7-2 11-3.8 13-5.5 2-1.7 3-4.2 3-7.5s-1-5.8-3-7.5c-2-1.7-6.3-3.5-13-5.5-68-17.3-128.2-47.8-180.5-91.5-52.3-43.7-93.8-96.2-124.5-157.5-9.3-8-15.3-12.3-18-13h-6c-12 .7-18 4-18 10 0 2 1.7 7 5 15 23.3 46 52 87 86 123l10 10H0v40h399782c-328 0 0 0 0 0l10 8c26.7 20 65.7 43 117 69-2.7 2-6 3.7-10 5-36.7 16-72.3 37.3-107 64l-10 8H0v40zM0 157v40h399730v-40zm0 194v40h399730v-40z"/></svg></svg>
--- a/static/images/hookleftarrow.svg
+++ b/static/images/hookleftarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><path d="M400000 241H110l3-3c68.7-52.7 113.7-120 135-202 4-14.7 6-23 6-25 0-7.3-7-11-21-11-8 0-13.2.8-15.5 2.5-2.3 1.7-4.2 5.8-5.5 12.5-1.3 4.7-2.7 10.3-4 17-12 48.7-34.8 92-68.5 130S65.3 228.3 18 247c-10 4-16 7.7-18 11 0 8.7 6 14.3 18 17 47.3 18.7 87.8 47 121.5 85S196 441.3 208 490c.7 2 1.3 5 2 9s1.2 6.7 1.5 8c.3 1.3 1 3.3 2 6s2.2 4.5 3.5 5.5c1.3 1 3.3 1.8 6 2.5s6 1 10 1c14 0 21-3.7 21-11 0-2-2-10.3-6-25-20-79.3-65-146.7-135-202l-3-3h399890zM100 241v40h399900v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M399859 241c-764 0 0 0 0 0 40-3.3 68.7-15.7 86-37 10-12 15-25.3 15-40 0-22.7-9.8-40.7-29.5-54-19.7-13.3-43.5-21-71.5-23-17.3-1.3-26-8-26-20 0-13.3 8.7-20 26-20 38 0 71 11.2 99 33.5 0 0 7 5.6 21 16.7 14 11.2 21 33.5 21 66.8s-14 61.2-42 83.5c-28 22.3-61 33.5-99 33.5L0 241zM0 281v-40h399859v40z"/></svg></svg>
--- a/static/images/hookrightarrow.svg
+++ b/static/images/hookrightarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><path d="M400000 281H103s-33-11.2-61-33.5S0 197.3 0 164s14.2-61.2 42.5-83.5C70.8 58.2 104 47 142 47c16.7 0 25 6.7 25 20 0 12-8.7 18.7-26 20-40 3.3-68.7 15.7-86 37-10 12-15 25.3-15 40 0 22.7 9.8 40.7 29.5 54 19.7 13.3 43.5 21 71.5 23h399859zM103 281v-40h399897v40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M0 241v40h399891c-47.3 35.3-84 78-110 128-16.7 32-27.7 63.7-33 95 0 1.3-.2 2.7-.5 4-.3 1.3-.5 2.3-.5 3 0 7.3 6.7 11 20 11 8 0 13.2-.8 15.5-2.5 2.3-1.7 4.2-5.5 5.5-11.5 2-13.3 5.7-27 11-41 14.7-44.7 39-84.5 73-119.5s73.7-60.2 119-75.5c6-2 9-5.7 9-11s-3-9-9-11c-45.3-15.3-85-40.5-119-75.5s-58.3-74.8-73-119.5c-4.7-14-8.3-27.3-11-40-1.3-6.7-3.2-10.8-5.5-12.5-2.3-1.7-7.5-2.5-15.5-2.5-14 0-21 3.7-21 11 0 2 2 10.3 6 25 20.7 83.3 67 151.7 139 205zm0 0v40h399900v-40z"/></svg></svg>
--- a/static/images/leftarrow.svg
+++ b/static/images/leftarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><path d="M400000 241H110l3-3c68.7-52.7 113.7-120 135-202 4-14.7 6-23 6-25 0-7.3-7-11-21-11-8 0-13.2.8-15.5 2.5-2.3 1.7-4.2 5.8-5.5 12.5-1.3 4.7-2.7 10.3-4 17-12 48.7-34.8 92-68.5 130S65.3 228.3 18 247c-10 4-16 7.7-18 11 0 8.7 6 14.3 18 17 47.3 18.7 87.8 47 121.5 85S196 441.3 208 490c.7 2 1.3 5 2 9s1.2 6.7 1.5 8c.3 1.3 1 3.3 2 6s2.2 4.5 3.5 5.5c1.3 1 3.3 1.8 6 2.5s6 1 10 1c14 0 21-3.7 21-11 0-2-2-10.3-6-25-20-79.3-65-146.7-135-202l-3-3h399890zM100 241v40h399900v-40z"/></svg></svg>
--- a/static/images/leftdoublearrow.svg
+++ b/static/images/leftdoublearrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-10c34-36 62.7-77 86-123 3.3-8 5-13.3 5-16 0-5.3-6.7-8-20-8-7.3 0-12.2.5-14.5 1.5-2.3 1-4.8 4.5-7.5 10.5-49.3 97.3-121.7 169.3-217 216-28 14-57.3 25-88 33-6.7 2-11 3.8-13 5.5-2 1.7-3 4.2-3 7.5s1 5.8 3 7.5c2 1.7 6.3 3.5 13 5.5 68 17.3 128.2 47.8 180.5 91.5 52.3 43.7 93.8 96.2 124.5 157.5 9.3 8 15.3 12.3 18 13h6c12-.7 18-4 18-10 0-2-1.7-7-5-15-23.3-46-52-87-86-123l-10-10h399738v-40H218c328 0 0 0 0 0l-10-8c-26.7-20-65.7-43-117-69 2.7-2 6-3.7 10-5 36.7-16 72.3-37.3 107-64l10-8h399782v-40z"/></svg></svg>
--- a/static/images/leftharpoon.svg
+++ b/static/images/leftharpoon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><path d="M0 267c.7 5.3 3 10 7 14h399993v-40H93c3.3-3.3 10.2-9.5 20.5-18.5s17.8-15.8 22.5-20.5c50.7-52 88-110.3 112-175 4-11.3 5-18.3 3-21-1.3-4-7.3-6-18-6-8 0-13 .7-15 2s-4.7 6.7-8 16c-42 98.7-107.3 174.7-196 228-6.7 4.7-10.7 8-12 10-1.3 2-2 5.7-2 11zm100-26v40h399900v-40z"/></svg></svg>
--- a/static/images/leftharpoondown.svg
+++ b/static/images/leftharpoondown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M399747 511c0 7.3 6.7 11 20 11 8 0 13-.8 15-2.5s4.7-6.8 8-15.5c40-94 99.3-166.3 178-217 13.3-8 20.3-12.3 21-13 5.3-3.3 8.5-5.8 9.5-7.5 1-1.7 1.5-5.2 1.5-10.5s-2.3-10.3-7-15H0v40h399908c-34 25.3-64.7 57-92 95-27.3 38-48.7 77.7-64 119-3.3 8.7-5 14-5 16zM0 241v40h399900v-40z"/></svg></svg>
--- a/static/images/leftrightarrow.svg
+++ b/static/images/leftrightarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><path d="M400000 241H110l3-3c68.7-52.7 113.7-120 135-202 4-14.7 6-23 6-25 0-7.3-7-11-21-11-8 0-13.2.8-15.5 2.5-2.3 1.7-4.2 5.8-5.5 12.5-1.3 4.7-2.7 10.3-4 17-12 48.7-34.8 92-68.5 130S65.3 228.3 18 247c-10 4-16 7.7-18 11 0 8.7 6 14.3 18 17 47.3 18.7 87.8 47 121.5 85S196 441.3 208 490c.7 2 1.3 5 2 9s1.2 6.7 1.5 8c.3 1.3 1 3.3 2 6s2.2 4.5 3.5 5.5c1.3 1 3.3 1.8 6 2.5s6 1 10 1c14 0 21-3.7 21-11 0-2-2-10.3-6-25-20-79.3-65-146.7-135-202l-3-3h399890zM100 241v40h399900v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M0 241v40h399891c-47.3 35.3-84 78-110 128-16.7 32-27.7 63.7-33 95 0 1.3-.2 2.7-.5 4-.3 1.3-.5 2.3-.5 3 0 7.3 6.7 11 20 11 8 0 13.2-.8 15.5-2.5 2.3-1.7 4.2-5.5 5.5-11.5 2-13.3 5.7-27 11-41 14.7-44.7 39-84.5 73-119.5s73.7-60.2 119-75.5c6-2 9-5.7 9-11s-3-9-9-11c-45.3-15.3-85-40.5-119-75.5s-58.3-74.8-73-119.5c-4.7-14-8.3-27.3-11-40-1.3-6.7-3.2-10.8-5.5-12.5-2.3-1.7-7.5-2.5-15.5-2.5-14 0-21 3.7-21 11 0 2 2 10.3 6 25 20.7 83.3 67 151.7 139 205zm0 0v40h399900v-40z"/></svg></svg>
--- a/static/images/leftrightharpoons.svg
+++ b/static/images/leftrightharpoons.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 716" preserveAspectRatio="xMinYMin slice"><path d="M0 267c.7 5.3 3 10 7 14h399993v-40H93c3.3-3.3 10.2-9.5 20.5-18.5s17.8-15.8 22.5-20.5c50.7-52 88-110.3 112-175 4-11.3 5-18.3 3-21-1.3-4-7.3-6-18-6-8 0-13 .7-15 2s-4.7 6.7-8 16c-42 98.7-107.3 174.7-196 228-6.7 4.7-10.7 8-12 10-1.3 2-2 5.7-2 11zm100-26v40h399900v-40zM0 435v40h400000v-40zm0 0v40h400000v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 716" preserveAspectRatio="xMaxYMin slice"><path d="M399747 705c0 7.3 6.7 11 20 11 8 0 13-.8 15-2.5s4.7-6.8 8-15.5c40-94 99.3-166.3 178-217 13.3-8 20.3-12.3 21-13 5.3-3.3 8.5-5.8 9.5-7.5 1-1.7 1.5-5.2 1.5-10.5s-2.3-10.3-7-15H0v40h399908c-34 25.3-64.7 57-92 95-27.3 38-48.7 77.7-64 119-3.3 8.7-5 14-5 16zM0 435v40h399900v-40zm0-194v40h400000v-40zm0 0v40h400000v-40z"/></svg></svg>
--- a/static/images/linesegment.svg
+++ b/static/images/linesegment.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 414" preserveAspectRatio="xMinYMin slice"><path d="M40 187V40H0v334h40V227h399960v-40zm0 0V40H0v334h40V227h399960v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 414" preserveAspectRatio="xMaxYMin slice"><path d="M0 187v40h399960v147h40V40h-40v147zm0 0v40h399960v147h40V40h-40v147z"/></svg></svg>
--- a/static/images/longequal.svg
+++ b/static/images/longequal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 334" preserveAspectRatio="none"><path d="M0 50h100v40H0zm0 194h100v40H0z"/></svg>
--- a/static/images/mapsto.svg
+++ b/static/images/mapsto.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><path d="M40 241c740 0 0 0 0 0v-75c0-40.7-.2-64.3-.5-71-.3-6.7-2.2-11.7-5.5-15-4-4-8.7-6-14-6-5.3 0-10 2-14 6C2.7 83.3.8 91.3.5 104 .2 116.7 0 169 0 261c0 114 .7 172.3 2 175 4 8 10 12 18 12 5.3 0 10-2 14-6 3.3-3.3 5.2-8.3 5.5-15 .3-6.7.5-30.3.5-71v-75h399960zm0 0v40h399960v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M0 241l399891 40c-47.3 35.3-84 78-110 128-16.7 32-27.7 63.7-33 95 0 1.3-.2 2.7-.5 4-.3 1.3-.5 2.3-.5 3 0 7.3 6.7 11 20 11 8 0 13.2-.8 15.5-2.5 2.3-1.7 4.2-5.5 5.5-11.5 2-13.3 5.7-27 11-41 14.7-44.7 39-84.5 73-119.5s73.7-60.2 119-75.5c6-2 9-5.7 9-11s-3-9-9-11c-45.3-15.3-85-40.5-119-75.5s-58.3-74.8-73-119.5c-4.7-14-8.3-27.3-11-40-1.3-6.7-3.2-10.8-5.5-12.5-2.3-1.7-7.5-2.5-15.5-2.5-14 0-21 3.7-21 11 0 2 2 10.3 6 25 20.7 83.3 67 151.7 139 205zm0 0v40h399900v-40z"/></svg></svg>
--- a/static/images/overbrace.svg
+++ b/static/images/overbrace.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="25.5%" viewBox="0 0 400000 548" preserveAspectRatio="xMinYMin slice"><path d="M6 548l-6-6v-35l6-11c56-104 135.3-181.3 238-232 57.3-28.7 117-45 179-50h399577v120H403c-43.3 7-81 15-113 26-100.7 33-179.7 91-237 174-2.7 5-6 9-10 13-.7 1-7.3 1-20 1H6z"/></svg><svg x="25%" width="50%" viewBox="0 0 400000 548" preserveAspectRatio="xMidYMin slice"><path d="M200428 334c-100.7-8.3-195.3-44-280-108-55.3-42-101.7-93-139-153l-9-14c-2.7 4-5.7 8.7-9 14-53.3 86.7-123.7 153-211 199-66.7 36-137.3 56.3-212 62H0V214h199568c178.3-11.7 311.7-78.3 403-201 6-8 9.7-12 11-12 .7-.7 6.7-1 18-1s17.3.3 18 1c1.3 0 5 4 11 12 44.7 59.3 101.3 106.3 170 141s145.3 54.3 229 60h199572v120z"/></svg><svg x="74.9%" width="24.1%" viewBox="0 0 400000 548" preserveAspectRatio="xMaxYMin slice"><path d="M400000 542l-6 6h-17c-12.7 0-19.3-.3-20-1-4-4-7.3-8.3-10-13-35.3-51.3-80.8-93.8-136.5-127.5s-117.2-55.8-184.5-66.5c-.7 0-2-.3-4-1-18.7-2.7-76-4.3-172-5H0V214h399571l6 1c124.7 8 235 61.7 331 161 31.3 33.3 59.7 72.7 85 118l7 13v35z"/></svg></svg>
--- a/static/images/overgroup.svg
+++ b/static/images/overgroup.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 342" preserveAspectRatio="xMinYMin slice"><path d="M400000 80H435C64 80 168.3 229.4 21 260c-5.9 1.2-18 0-18 0-2 0-3-1-3-3v-38C76 61 257 0 435 0h399565z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 342" preserveAspectRatio="xMaxYMin slice"><path d="M0 80h399565c371 0 266.7 149.4 414 180 5.9 1.2 18 0 18 0 2 0 3-1 3-3v-38c-76-158-257-219-435-219H0z"/></svg></svg>
--- a/static/images/rightarrow.svg
+++ b/static/images/rightarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M0 241v40h399891c-47.3 35.3-84 78-110 128-16.7 32-27.7 63.7-33 95 0 1.3-.2 2.7-.5 4-.3 1.3-.5 2.3-.5 3 0 7.3 6.7 11 20 11 8 0 13.2-.8 15.5-2.5 2.3-1.7 4.2-5.5 5.5-11.5 2-13.3 5.7-27 11-41 14.7-44.7 39-84.5 73-119.5s73.7-60.2 119-75.5c6-2 9-5.7 9-11s-3-9-9-11c-45.3-15.3-85-40.5-119-75.5s-58.3-74.8-73-119.5c-4.7-14-8.3-27.3-11-40-1.3-6.7-3.2-10.8-5.5-12.5-2.3-1.7-7.5-2.5-15.5-2.5-14 0-21 3.7-21 11 0 2 2 10.3 6 25 20.7 83.3 67 151.7 139 205zm0 0v40h399900v-40z"/></svg></svg>
--- a/static/images/rightharpoon.svg
+++ b/static/images/rightharpoon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M0 241v40h399993c4.7-4.7 7-9.3 7-14 0-9.3-3.7-15.3-11-18-92.7-56.7-159-133.7-199-231-3.3-9.3-6-14.7-8-16-2-1.3-7-2-15-2-10.7 0-16.7 2-18 6-2 2.7-1 9.7 3 21 15.3 42 36.7 81.8 64 119.5 27.3 37.7 58 69.2 92 94.5zm0 0v40h399900v-40z"/></svg></svg>
--- a/static/images/rightharpoondown.svg
+++ b/static/images/rightharpoondown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M399747 511c0 7.3 6.7 11 20 11 8 0 13-.8 15-2.5s4.7-6.8 8-15.5c40-94 99.3-166.3 178-217 13.3-8 20.3-12.3 21-13 5.3-3.3 8.5-5.8 9.5-7.5 1-1.7 1.5-5.2 1.5-10.5s-2.3-10.3-7-15H0v40h399908c-34 25.3-64.7 57-92 95-27.3 38-48.7 77.7-64 119-3.3 8.7-5 14-5 16zM0 241v40h399900v-40z"/></svg></svg>
--- a/static/images/rightleftharpoons.svg
+++ b/static/images/rightleftharpoons.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50%" viewBox="0 0 400000 716" preserveAspectRatio="xMinYMin slice"><path d="M7 435c-4 4-6.3 8.7-7 14 0 5.3.7 9 2 11s5.3 5.3 12 10c90.7 54 156 130 196 228 3.3 10.7 6.3 16.3 9 17 2 .7 5 1 9 1h5c10.7 0 16.7-2 18-6 2-2.7 1-9.7-3-21-32-87.3-82.7-157.7-152-211l-3-3h399907v-40H7zm93 0v40h399900v-40zM0 241v40h399900v-40zm0 0v40h399900v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 716" preserveAspectRatio="xMaxYMin slice"><path d="M0 241v40h399993c4.7-4.7 7-9.3 7-14 0-9.3-3.7-15.3-11-18-92.7-56.7-159-133.7-199-231-3.3-9.3-6-14.7-8-16-2-1.3-7-2-15-2-10.7 0-16.7 2-18 6-2 2.7-1 9.7 3 21 15.3 42 36.7 81.8 64 119.5 27.3 37.7 58 69.2 92 94.5zm0 0v40h399900v-40zm100 194v40h399900v-40zm0 0v40h399900v-40z"/></svg></svg>
--- a/static/images/tilde1.svg
+++ b/static/images/tilde1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 260" preserveAspectRatio="none"><path d="M200 55.538c-77 0-168 73.953-177 73.953-3 0-7-2.175-9-5.437L2 97c-1-2-2-4-2-6 0-4 2-7 5-9l20-12C116 12 171 0 207 0c86 0 114 68 191 68 78 0 168-68 177-68 4 0 7 2 9 5l12 19c1 2.175 2 4.35 2 6.525 0 4.35-2 7.613-5 9.788l-19 13.05c-92 63.077-116.937 75.308-183 76.128-68.267.847-113-73.952-191-73.952z"/></svg>
--- a/static/images/tilde2.svg
+++ b/static/images/tilde2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1033 286" preserveAspectRatio="none"><path d="M344 55.266c-142 0-300.638 81.316-311.5 86.418-8.01 3.762-22.5 10.91-23.5 5.562L1 120c-1-2-1-3-1-4 0-5 3-9 8-10l18.4-9C160.9 31.9 283 0 358 0c148 0 188 122 331 122s314-97 326-97c4 0 8 2 10 7l7 21.114c1 2.14 1 3.21 1 4.28 0 5.347-3 9.626-7 10.696l-22.3 12.622C852.6 158.372 751 181.476 676 181.476c-149 0-189-126.21-332-126.21z"/></svg>
--- a/static/images/tilde3.svg
+++ b/static/images/tilde3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2339 306" preserveAspectRatio="none"><path d="M786 59C457 59 32 175.242 13 175.242c-6 0-10-3.457-11-10.37L.15 138c-1-7 3-12 10-13l19.2-6.4C378.4 40.7 634.3 0 804.3 0c337 0 411.8 157 746.8 157 328 0 754-112 773-112 5 0 10 3 11 9l1 14.075c1 8.066-.697 16.595-6.697 17.492l-21.052 7.31c-367.9 98.146-609.15 122.696-778.15 122.696-338 0-409-156.573-744-156.573z"/></svg>
--- a/static/images/tilde4.svg
+++ b/static/images/tilde4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2340 312" preserveAspectRatio="none"><path d="M786 58C457 58 32 177.487 13 177.487c-6 0-10-3.345-11-10.035L.15 143c-1-7 3-12 10-13l22-6.7C381.2 35 637.15 0 807.15 0c337 0 409 177 744 177 328 0 754-127 773-127 5 0 10 3 11 9l1 14.794c1 7.805-3 13.38-9 14.495l-20.7 5.574c-366.85 99.79-607.3 139.372-776.3 139.372-338 0-409-175.236-744-175.236z"/></svg>
--- a/static/images/tofrom.svg
+++ b/static/images/tofrom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 528" preserveAspectRatio="xMinYMin slice"><path d="M0 147h400000v40H0zm0 214c68 40 115.7 95.7 143 167h22c15.3 0 23-.3 23-1 0-1.3-5.3-13.7-16-37-18-35.3-41.3-69-70-101l-7-8h399905v-40H95l7-8c28.7-32 52-65.7 70-101 10.7-23.3 16-35.7 16-37 0-.7-7.7-1-23-1h-22C115.7 265.3 68 321 0 361zm0-174v-40h399900v40zm100 154v40h399900v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 528" preserveAspectRatio="xMaxYMin slice"><path d="M400000 167c-70.7-42-118-97.7-142-167h-23c-15.3 0-23 .3-23 1 0 1.3 5.3 13.7 16 37 18 35.3 41.3 69 70 101l7 8H0v40h399905l-7 8c-28.7 32-52 65.7-70 101-10.7 23.3-16 35.7-16 37 0 .7 7.7 1 23 1h23c24-69.3 71.3-125 142-167zM100 147v40h399900v-40zM0 341v40h399900v-40z"/></svg></svg>
--- a/static/images/twoheadleftarrow.svg
+++ b/static/images/twoheadleftarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 334" preserveAspectRatio="xMinYMin slice"><path d="M0 167c68 40 115.7 95.7 143 167h22c15.3 0 23-.3 23-1 0-1.3-5.3-13.7-16-37-18-35.3-41.3-69-70-101l-7-8h125l9 7c50.7 39.3 85 86 103 140h46c0-4.7-6.3-18.7-19-42-18-35.3-40-67.3-66-96l-9-9h399716v-40H284l9-9c26-28.7 48-60.7 66-96 12.7-23.333 19-37.333 19-42h-46c-18 54-52.3 100.7-103 140l-9 7H95l7-8c28.7-32 52-65.7 70-101 10.7-23.333 16-35.7 16-37 0-.7-7.7-1-23-1h-22C115.7 71.3 68 127 0 167z"/></svg></svg>
--- a/static/images/twoheadrightarrow.svg
+++ b/static/images/twoheadrightarrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 334" preserveAspectRatio="xMaxYMin slice"><path d="M400000 167c-68-40-115.7-95.7-143-167h-22c-15.3 0-23 .3-23 1 0 1.3 5.3 13.7 16 37 18 35.3 41.3 69 70 101l7 8h-125l-9-7c-50.7-39.3-85-86-103-140h-46c0 4.7 6.3 18.7 19 42 18 35.3 40 67.3 66 96l9 9H0v40h399716l-9 9c-26 28.7-48 60.7-66 96-12.7 23.333-19 37.333-19 42h46c18-54 52.3-100.7 103-140l9-7h125l-7 8c-28.7 32-52 65.7-70 101-10.7 23.333-16 35.7-16 37 0 .7 7.7 1 23 1h22c27.3-71.3 75-127 143-167z"/></svg></svg>
--- a/static/images/underbrace.svg
+++ b/static/images/underbrace.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><svg width="25.1%" viewBox="0 0 400000 548" preserveAspectRatio="xMinYMin slice"><path d="M0 6l6-6h17c12.688 0 19.313.3 20 1 4 4 7.313 8.3 10 13 35.313 51.3 80.813 93.8 136.5 127.5 55.688 33.7 117.188 55.8 184.5 66.5.688 0 2 .3 4 1 18.688 2.7 76 4.3 172 5h399450v120H429l-6-1c-124.688-8-235-61.7-331-161C60.687 138.7 32.312 99.3 7 54L0 41V6z"/></svg><svg x="25%" width="50%" viewBox="0 0 400000 548" preserveAspectRatio="xMidYMin slice"><path d="M199572 214c100.7 8.3 195.3 44 280 108 55.3 42 101.7 93 139 153l9 14c2.7-4 5.7-8.7 9-14 53.3-86.7 123.7-153 211-199 66.7-36 137.3-56.3 212-62h199568v120H200432c-178.3 11.7-311.7 78.3-403 201-6 8-9.7 12-11 12-.7.7-6.7 1-18 1s-17.3-.3-18-1c-1.3 0-5-4-11-12-44.7-59.3-101.3-106.3-170-141s-145.3-54.3-229-60H0V214z"/></svg><svg x="74.9%" width="25.1%" viewBox="0 0 400000 548" preserveAspectRatio="xMaxYMin slice"><path d="M399994 0l6 6v35l-6 11c-56 104-135.3 181.3-238 232-57.3 28.7-117 45-179 50H-300V214h399897c43.3-7 81-15 113-26 100.7-33 179.7-91 237-174 2.7-5 6-9 10-13 .7-1 7.3-1 20-1h17z"/></svg></svg>
--- a/static/images/undergroup.svg
+++ b/static/images/undergroup.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<svg width="50.1%" viewBox="0 0 400000 342" preserveAspectRatio="xMinYMin slice">
+<path fill="black"
+d="M 400000,262 435,262 C 64,262 168.3,112.6 21,82 15.1,80.8 3,82 3,82 1,82 0,83 0,85 l 0,38 c 76,158 257,219 435,219 l 399565,0 z"/>
+</svg>
+
+<svg x="50%" width="50%" viewBox="0 0 400000 342" preserveAspectRatio="xMaxYMin slice">
+<path fill="black"
+d="M0,262l399565,0c371,0,266.7,-149.4,414,-180c5.9,-1.2,18,0,18,0c2,0,3,1,3,3l0,38c-76,158,-257,219,-435,219l-399565,0z"/>
+</svg>
+</svg>
--- a/static/images/widehat1.svg
+++ b/static/images/widehat1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1062 239" preserveAspectRatio="none"><path d="M529 0h5l519 115c5 1 9 5 9 10 0 1-1 2-1 3l-4 22c-1 5-5 9-11 9h-2L532 67 19 159h-2c-5 0-9-4-11-9l-5-22c-1-6 2-12 8-13z"/></svg>
--- a/static/images/widehat2.svg
+++ b/static/images/widehat2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2364 300" preserveAspectRatio="none"><path d="M1181 0h2l1171 176c6 0 10 5 10 11l-2 23c-1 6-5 10-11 10h-1L1182 67 15 220h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z"/></svg>
--- a/static/images/widehat3.svg
+++ b/static/images/widehat3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2364 360" preserveAspectRatio="none"><path d="M1181 0h2l1171 236c6 0 10 5 10 11l-2 23c-1 6-5 10-11 10h-1L1182 67 15 280h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z"/></svg>
--- a/static/images/widehat4.svg
+++ b/static/images/widehat4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2364 420" preserveAspectRatio="none"><path d="M1181 0h2l1171 296c6 0 10 5 10 11l-2 23c-1 6-5 10-11 10h-1L1182 67 15 340h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z"/></svg>
--- a/static/images/xcancel.svg
+++ b/static/images/xcancel.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' preserveAspectRatio='none'><path stroke="#000" d="M0 0l12 12M0 12L12 0"/></svg>
--- a/static/katex.less
+++ b/static/katex.less
@@ -22,6 +22,11 @@
    // Protect elements inside .katex from inheriting text-indent.
    text-indent: 0;

+    // Prevent a rendering bug that misplaces \vec in Chrome.
+    text-rendering: auto;
+  
+    // Prevent background resetting in Windows's high-contrast mode.
+
    // Prevent background resetting on elements in Windows's high-contrast
    // mode, while still allowing background/foreground setting on root .katex
    * { -ms-high-contrast-adjust: none !important; }
@@ -557,4 +562,628 @@
        }
    }

+    // Define CSS for background-image whose width will match its span width.
+    .stretchy {
+        width: 100%;
+        display: block;
+        background-repeat: no-repeat;
+        background-position: right center;  //right, so that \widehat will shift right when it is shortened
+        background-size: 100% 100%;
+
+        &:before,
+        &:after {
+            content: "";
+        }
+    }
+
+    // Lengthen the extensible arrows via padding.
+    .x-arrow > span > span {
+        text-align: center;
+        > span > .mord {
+            padding: 0 0.5em 0 0.5em;
+        }
+    }
+
+    .mover > span > span,
+    .munder > span > span {
+        text-align: center;   // above and below a horizontal brace
+    }
+
+    .boxpad {
+        padding: 0 0.3em 0 0.3em;      // \fboxsep = 3pt
+    }
+    .fbox {
+        box-sizing: border-box;
+        border: 0.04em solid black;   // \fboxrule = 0.4pt
+    }
+    .cancel-pad {
+        padding: 0 0.2em 0 0.2em;    // ref: cancel package  \advance\dimen@ 2\p@ %  "+2"
+    }
+    .mord + .cancel-lap,
+    .mbin + .cancel-lap {
+        margin-left: -0.2em;
+    }
+    .cancel-lap + .mord,
+    .cancel-lap + .mbin,
+    .cancel-lap + .msupsub {
+        margin-left: -0.2em;
+    }
+    .sout {
+        border-bottom-style: solid;
+        border-bottom-width: 0.08em;
+    }
+
+    .widehat1 {
+        height: 0.24em;
+        background-image: url(images/widehat1.svg);
+    }
+    .widehat2 {
+        height: 0.30em;
+        background-image: url(images/widehat2.svg);
+    }
+    .widehat3 {
+        height: 0.36em;
+        background-image: url(images/widehat3.svg);
+    }
+    .widehat4 {
+        height: 0.42em;
+        background-image: url(images/widehat4.svg);
+    }
+    .tilde1 {
+        height: 0.26em;
+        background-image: url(images/tilde1.svg);
+    }
+    .tilde2 {
+        height: 0.29em;
+        background-image: url(images/tilde2.svg);
+    }
+    .tilde3 {
+        height: 0.306em;
+        background-image: url(images/tilde3.svg);
+    }
+    .tilde4 {
+        height: 0.312em;
+        background-image: url(images/tilde4.svg);
+    }
+    .rightarrow {
+        height: 0.522em;
+        min-width: 0.5em;
+        background-image: url(images/rightarrow.svg);
+    }
+    .xrightarrow {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/rightarrow.svg);
+    }
+    .leftarrow {
+        height: 0.522em;
+        min-width: 0.5em;
+        background-image: url(images/leftarrow.svg);
+    }
+    .xleftarrow {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/leftarrow.svg);
+    }
+    .overbrace {
+        height: 0.548em;
+        min-width: 1.6em;
+        background-image: url(images/overbrace.svg);
+    }
+    .underbrace {
+        height: 0.548em;
+        min-width: 1.6em;
+        background-image: url(images/underbrace.svg);
+    }
+    .leftrightarrow {
+        height: 0.522em;
+        min-width: 0.5em;
+        background-image: url(images/leftrightarrow.svg);
+    }
+    .xleftrightarrow {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/leftrightarrow.svg);
+    }
+    .doublerightarrow {
+        height: 0.56em;
+        min-width: 0.783em;
+        background-image: url(images/doublerightarrow.svg);
+    }
+    .doubleleftarrow {
+        height: 0.56em;
+        min-width: 0.783em;
+        background-image: url(images/doubleleftarrow.svg);
+    }
+    .doubleleftrightarrow {
+        height: 0.56em;
+        min-width: 0.955em;
+        background-image: url(images/doubleleftrightarrow.svg);
+    }
+    .leftharpoon {
+        height: 0.522em;
+        min-width: 0.5em;
+        background-image: url(images/leftharpoon.svg);
+    }
+    .leftharpoon {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/leftharpoon.svg);
+    }
+    .rightharpoon {
+        height: 0.522em;
+        min-width: 0.5em;
+        background-image: url(images/rightharpoon.svg);
+    }
+    .xrightharpoon {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/rightharpoon.svg);
+    }
+    .hookleftarrow {
+        height: 0.522em;
+        min-width: 0.87em;
+        background-image: url(images/hookleftarrow.svg);
+    }
+    .hookrightarrow {
+        min-width: 0.87em;
+        height: 0.522em;
+        background-image: url(images/hookrightarrow.svg);
+    }
+    .mapsto {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/mapsto.svg);
+    }
+    .leftharpoondown {
+        height: 0.522em;
+        min-width: 0.5em;
+        background-image: url(images/leftharpoondown.svg);
+    }
+    .leftharpoondown {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/leftharpoondown.svg);
+    }
+    .rightharpoondown {
+        height: 0.522em;
+        min-width: 0.5em;
+        background-image: url(images/rightharpoondown.svg);
+    }
+    .xrightharpoondown {
+        height: 0.522em;
+        min-width: 0.783em;
+        background-image: url(images/rightharpoondown.svg);
+    }
+    .rightleftharpoons {
+        height: 0.716em;
+        min-width: 0.783em;
+        background-image: url(images/rightleftharpoons.svg);
+    }
+    .leftrightharpoons {
+        height: 0.716em;
+        min-width: 0.783em;
+        background-image: url(images/leftrightharpoons.svg);
+    }
+    .overgroup {
+        height: 0.342em;
+        min-width: 0.87em;
+        background-image: url(images/overgroup.svg);
+    }
+    .undergroup {
+        height: 0.342em;
+        min-width: 0.87em;
+        background-image: url(images/undergroup.svg);
+    }
+    .twoheadleftarrow {
+        height: 0.334em;
+        min-width: 0.86em;
+        background-image: url(images/twoheadleftarrow.svg);
+    }
+    .twoheadrightarrow {
+        height: 0.334em;
+        min-width: 0.86em;
+        background-image: url(images/twoheadrightarrow.svg);
+    }
+    .linesegment {
+        height: 0.414em;
+        min-width: 0.5em;
+        background-image: url(images/linesegment.svg);
+    }
+    .longequal {
+        height: 0.334em;
+        min-width: 0.5em;
+        background-image: url(images/longequal.svg);
+    }
+    .tofrom {
+        height: 0.528em;
+        min-width: 0.86em;
+        background-image: url(images/tofrom.svg);
+    }
+
+    // \cancel, \bcancel, and \xcancel again.
+    // Define the detailed background-image for the span.
+    // Use a linear-gradient to draw a diagonal line that is 0.08 ems wide,
+    // that is, 0.04 ems on each side of the line on the diagonal of the span.
+    .cancel {
+        background:
+           linear-gradient(to top left,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+    }
+
+    .bcancel {
+        background:
+           linear-gradient(to top right,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+    }
+
+    .xcancel {
+        background:
+           linear-gradient(to top left,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%),
+           linear-gradient(to top right,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+    }
+
+    @media screen and (min-width:~"0\0") {
+        // CSS hack for IE 9, 10, & 11.
+        // IE doesn't recognize @supports. Hence the media screen hack.
+
+        .mask {
+            background-color: transparent !important;
+        }
+
+        // Instead of a linear gradient, use an SVG to draw the diagonal line for \cancel.
+        // This line unfortunately has a width that varies with the size of the span.
+        .bcancel,
+        .bcancel-mask {
+            background-color: transparent !important;    // Prevent a blob of color.
+            background-image: url(images/bcancel.svg);
+        }
+        .cancel,
+        .cancel-mask {
+            background-color: transparent !important;
+            background-image: url(images/cancel.svg);
+        }
+        .xcancel,
+        .xcancel-mask {
+            background-color: transparent !important;
+            background-image: url(images/xcancel.svg);
+        }
+    }
+
+    @supports ((mask-image:none) or (-webkit-mask:none)) {
+        // This section is part of the KaTeX support for \color of stretchy elements.
+        // In up-to-date browsers, over-ride the background-image set above.
+        // This section won't be applied by some older browsers, so they will instead
+        // render the black background-image defined above.
+
+      .mask {
+        background-image: none;
+      }
+    }
+
+    @supports not ((mask-image:none) or (-webkit-mask:none)) {
+        //  Fall back for older browswers that do not support CSS mask.
+
+        .mask {
+            background-color: transparent !important;
+        }
+
+        // For \cancel, use a background:linear-gradient, not a mask-image:linear-gradient.
+        .cancel-mask {
+            background-color: transparent !important;
+            background:
+               linear-gradient(to top left,
+                   rgba(0,0,0,0) 0%,
+                   rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) 100%);
+        }
+
+        .bcancel-mask {
+            background-color: transparent !important;
+            background:
+               linear-gradient(to top right,
+                   rgba(0,0,0,0) 0%,
+                   rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) 100%);
+        }
+
+        .xcancel-mask {
+            background-color: transparent !important;
+            background:
+               linear-gradient(to top left,
+                   rgba(0,0,0,0) 0%,
+                   rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) 100%),
+               linear-gradient(to top right,
+                   rgba(0,0,0,0) 0%,
+                   rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+                   rgba(0,0,0,0) 100%);
+        }
+    }
+
+    .cancel-mask {
+        mask-image:
+           linear-gradient(to top left,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+        -webkit-mask-image:
+           linear-gradient(to top left,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+    }
+
+    .bcancel-mask {
+        mask-image:
+           linear-gradient(to top right,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+        -webkit-mask-image:
+           linear-gradient(to top right,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+    }
+
+    .xcancel-mask {
+        mask-image:
+           linear-gradient(to top left,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%),
+           linear-gradient(to top right,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+        -webkit-mask-image:
+           linear-gradient(to top left,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%),
+           linear-gradient(to top right,
+               rgba(0,0,0,0) 0%,
+               rgba(0,0,0,0) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
+               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) ~"calc(50% + 0.04em)",
+               rgba(0,0,0,0) 100%);
+    }
+
+    @supports (-ms-touch-action: none) {
+        // CSS hack for Edge
+        // TODO(ron): If/When Edge fixes its CSS calc() bug, delete the next few lines and use gradients for \cancel.
+        .bcancel,
+        .bcancel-mask {
+            background-color: transparent !important;
+            background-image: url(images/bcancel.svg);
+        }
+        .cancel,
+        .cancel-mask {
+            background-color: transparent !important;
+            background-image: url(images/cancel.svg);
+        }
+        .xcancel,
+        .xcancel-mask {
+            background-color: transparent !important;
+            background-image: url(images/xcancel.svg);
+        }
+    }
+
+    // Next, define the CSS masks used for \color on stretchy wide elements.
+    .widehat1-mask {
+        -webkit-mask: url(images/widehat1.svg);
+        mask: url(images/widehat1.svg) no-repeat;
+    }
+    .widehat2-mask {
+        -webkit-mask: url(images/widehat2.svg);
+        mask: url(images/widehat2.svg) no-repeat;
+    }
+    .widehat3-mask {
+        -webkit-mask: url(images/widehat3.svg);
+        mask: url(images/widehat3.svg) no-repeat;
+    }
+    .widehat4-mask {
+        -webkit-mask: url(images/widehat4.svg);
+        mask: url(images/widehat4.svg) no-repeat;
+    }
+    .tilde1-mask {
+        -webkit-mask: url(images/tilde1.svg);
+        mask: url(images/tilde1.svg) no-repeat;
+    }
+    .tilde2-mask {
+        -webkit-mask: url(images/tilde2.svg);
+        mask: url(images/tilde2.svg) no-repeat;
+    }
+    .tilde3-mask {
+        -webkit-mask: url(images/tilde3.svg);
+        mask: url(images/tilde3.svg) no-repeat;
+    }
+    .tilde4-mask {
+        -webkit-mask: url(images/tilde4.svg);
+        mask: url(images/tilde4.svg) no-repeat;
+    }
+    .rightarrow-mask {
+        mask: url(images/rightarrow.svg);
+        -webkit-mask: url(images/rightarrow.svg);
+    }
+    .xrightarrow-mask {
+        mask: url(images/rightarrow.svg);
+        -webkit-mask: url(images/rightarrow.svg);
+    }
+    .leftarrow-mask {
+        mask: url(images/leftarrow.svg);
+        -webkit-mask: url(images/leftarrow.svg);
+    }
+    .xleftarrow-mask {
+        mask: url(images/leftarrow.svg);
+        -webkit-mask: url(images/leftarrow.svg);
+    }
+    .overbrace-mask {
+        min-width: 1.6em;
+        mask: url(images/overbrace.svg);
+        -webkit-mask: url(images/overbrace.svg);
+    }
+    .underbrace-mask {
+        min-width: 1.6em;
+        mask: url(images/underbrace.svg);
+        -webkit-mask: url(images/underbrace.svg);
+    }
+    .leftrightarrow-mask {
+        mask: url(images/leftrightarrow.svg);
+        -webkit-mask: url(images/leftrightarrow.svg);
+    }
+    .xleftrightarrow-mask {
+        mask: url(images/leftrightarrow.svg);
+        -webkit-mask: url(images/leftrightarrow.svg);
+    }
+    .doublerightarrow-mask {
+        mask: url(images/doublerightarrow.svg);
+        -webkit-mask: url(images/doublerightarrow.svg);
+    }
+    .doubleleftarrow-mask {
+        mask: url(images/doubleleftarrow.svg);
+        -webkit-mask: url(images/doubleleftarrow.svg);
+    }
+    .doubleleftrightarrow-mask {
+        mask: url(images/doubleleftrightarrow.svg);
+        -webkit-mask: url(images/doubleleftrightarrow.svg);
+    }
+    .leftharpoon-mask {
+        mask: url(images/leftharpoon.svg);
+        -webkit-mask: url(images/leftharpoon.svg);
+    }
+    .xleftharpoon-mask {
+        mask: url(images/leftharpoon.svg);
+        -webkit-mask: url(images/leftharpoon.svg);
+    }
+    .rightharpoon-mask {
+        mask: url(images/rightharpoon.svg);
+        -webkit-mask: url(images/rightharpoon.svg);
+    }
+    .xrightharpoon-mask {
+        mask: url(images/rightharpoon.svg);
+        -webkit-mask: url(images/rightharpoon.svg);
+    }
+    .hookleftarrow-mask {
+        mask: url(images/hookleftarrow.svg);
+        -webkit-mask: url(images/hookleftarrow.svg);
+    }
+    .hookrightarrow-mask {
+        mask: url(images/hookrightarrow.svg);
+        -webkit-mask: url(images/hookrightarrow.svg);
+    }
+    .mapsto-mask {
+        mask: url(images/mapsto.svg);
+        -webkit-mask: url(images/mapsto.svg);
+    }
+    .leftharpoondown-mask {
+        mask: url(images/leftharpoondown.svg);
+        -webkit-mask: url(images/leftharpoondown.svg);
+    }
+    .xleftharpoondown-mask {
+        mask: url(images/leftharpoondown.svg);
+        -webkit-mask: url(images/leftharpoondown.svg);
+    }
+    .rightharpoondown-mask {
+        mask: url(images/rightharpoondown.svg);
+        -webkit-mask: url(images/rightharpoondown.svg);
+    }
+    .xrightharpoondown-mask {
+        mask: url(images/rightharpoondown.svg);
+        -webkit-mask: url(images/rightharpoondown.svg);
+    }
+    .rightleftharpoons-mask {
+        mask: url(images/rightleftharpoons.svg);
+        -webkit-mask: url(images/rightleftharpoons.svg);
+    }
+    .leftrightharpoons-mask {
+        mask: url(images/leftrightharpoons.svg);
+        -webkit-mask: url(images/leftrightharpoons.svg);
+    }
+    .overgroup-mask {
+        mask: url(images/overgroup.svg);
+        -webkit-mask: url(images/overgroup.svg);
+    }
+    .undergroup-mask {
+        mask: url(images/undergroup.svg);
+        -webkit-mask: url(images/undergroup.svg);
+    }
+    .twoheadleftarrow-mask {
+        mask: url(images/twoheadleftarrow.svg);
+        -webkit-mask: url(images/twoheadleftarrow.svg);
+    }
+    .twoheadrightarrow-mask {
+        mask: url(images/twoheadrightarrow.svg);
+        -webkit-mask: url(images/twoheadrightarrow.svg);
+    }
+    .linesegment-mask {
+        mask: url(images/linesegment.svg);
+        -webkit-mask: url(images/linesegment.svg);
+    }
+    .longequal-mask {
+        mask: url(images/longequal.svg);
+        -webkit-mask: url(images/longequal.svg);
+    }
+    .tofrom-mask {
+        mask: url(images/tofrom.svg);
+        -webkit-mask: url(images/tofrom.svg);
+    }
+
 }
--- a/test/katex-spec.js
+++ b/test/katex-spec.js
@@ -1797,8 +1797,12 @@ describe("An accent parser", function() {
        expect(parse.type).toEqual("supsub");
    });

-    it("should not parse expanding accents", function() {
-        expect("\\widehat{x}").toNotParse();
+    it("should parse stretchy, shifty accents", function() {
+        expect("\\widehat{x}").toParse();
+    });
+
+    it("should parse stretchy, non-shifty accents", function() {
+        expect("\\overrightarrow{x}").toParse();
    });
 });

@@ -1819,6 +1823,234 @@ describe("An accent builder", function() {
    });
 });

+describe("A stretchy and shifty accent builder", function() {
+    it("should not fail", function() {
+        expect("\\widehat{AB}").toBuild();
+        expect("\\widehat{AB}^2").toBuild();
+        expect("\\widehat{AB}_2").toBuild();
+        expect("\\widehat{AB}_2^2").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\widehat{AB}")[0].classes).toContain("mord");
+        expect(getBuilt("\\widehat +")[0].classes).toContain("mord");
+        expect(getBuilt("\\widehat +")[0].classes).not.toContain("mbin");
+        expect(getBuilt("\\widehat )^2")[0].classes).toContain("mord");
+        expect(getBuilt("\\widehat )^2")[0].classes).not.toContain("mclose");
+    });
+});
+
+describe("A stretchy and non-shifty accent builder", function() {
+    it("should not fail", function() {
+        expect("\\overrightarrow{AB}").toBuild();
+        expect("\\overrightarrow{AB}^2").toBuild();
+        expect("\\overrightarrow{AB}_2").toBuild();
+        expect("\\overrightarrow{AB}_2^2").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\overrightarrow{AB}")[0].classes).toContain("mord");
+        expect(getBuilt("\\overrightarrow +")[0].classes).toContain("mord");
+        expect(getBuilt("\\overrightarrow +")[0].classes).not.toContain("mbin");
+        expect(getBuilt("\\overrightarrow )^2")[0].classes).toContain("mord");
+        expect(getBuilt("\\overrightarrow )^2")[0].classes).not.toContain("mclose");
+    });
+});
+
+describe("An under-accent parser", function() {
+    it("should not fail", function() {
+        expect("\\underrightarrow{x}").toParse();
+        expect("\\underrightarrow{x^2}").toParse();
+        expect("\\underrightarrow{x}^2").toParse();
+        expect("\\underrightarrow x").toParse();
+    });
+
+    it("should produce accentUnder", function() {
+        const parse = getParsed("\\underrightarrow x")[0];
+
+        expect(parse.type).toEqual("accentUnder");
+    });
+
+    it("should be grouped more tightly than supsubs", function() {
+        const parse = getParsed("\\underrightarrow x^2")[0];
+
+        expect(parse.type).toEqual("supsub");
+    });
+});
+
+describe("An under-accent builder", function() {
+    it("should not fail", function() {
+        expect("\\underrightarrow{x}").toBuild();
+        expect("\\underrightarrow{x}^2").toBuild();
+        expect("\\underrightarrow{x}_2").toBuild();
+        expect("\\underrightarrow{x}_2^2").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\underrightarrow x")[0].classes).toContain("mord");
+        expect(getBuilt("\\underrightarrow +")[0].classes).toContain("mord");
+        expect(getBuilt("\\underrightarrow +")[0].classes).not.toContain("mbin");
+        expect(getBuilt("\\underrightarrow )^2")[0].classes).toContain("mord");
+        expect(getBuilt("\\underrightarrow )^2")[0].classes).not.toContain("mclose");
+    });
+});
+
+describe("An extensible arrow parser", function() {
+    it("should not fail", function() {
+        expect("\\xrightarrow{x}").toParse();
+        expect("\\xrightarrow{x^2}").toParse();
+        expect("\\xrightarrow{x}^2").toParse();
+        expect("\\xrightarrow x").toParse();
+        expect("\\xrightarrow[under]{over}").toParse();
+    });
+
+    it("should produce xArrow", function() {
+        const parse = getParsed("\\xrightarrow x")[0];
+
+        expect(parse.type).toEqual("xArrow");
+    });
+
+    it("should be grouped more tightly than supsubs", function() {
+        const parse = getParsed("\\xrightarrow x^2")[0];
+
+        expect(parse.type).toEqual("supsub");
+    });
+});
+
+describe("An extensible arrow builder", function() {
+    it("should not fail", function() {
+        expect("\\xrightarrow{x}").toBuild();
+        expect("\\xrightarrow{x}^2").toBuild();
+        expect("\\xrightarrow{x}_2").toBuild();
+        expect("\\xrightarrow{x}_2^2").toBuild();
+        expect("\\xrightarrow[under]{over}").toBuild();
+    });
+
+    it("should produce mrell", function() {
+        expect(getBuilt("\\xrightarrow x")[0].classes).toContain("mrel");
+        expect(getBuilt("\\xrightarrow [under]{over}")[0].classes).toContain("mrel");
+        expect(getBuilt("\\xrightarrow +")[0].classes).toContain("mrel");
+        expect(getBuilt("\\xrightarrow +")[0].classes).not.toContain("mbin");
+        expect(getBuilt("\\xrightarrow )^2")[0].classes).toContain("mrel");
+        expect(getBuilt("\\xrightarrow )^2")[0].classes).not.toContain("mclose");
+    });
+});
+
+describe("A horizontal brace parser", function() {
+    it("should not fail", function() {
+        expect("\\overbrace{x}").toParse();
+        expect("\\overbrace{x^2}").toParse();
+        expect("\\overbrace{x}^2").toParse();
+        expect("\\overbrace x").toParse();
+        expect("\\underbrace{x}_2").toParse();
+        expect("\\underbrace{x}_2^2").toParse();
+    });
+
+    it("should produce horizBrace", function() {
+        const parse = getParsed("\\overbrace x")[0];
+
+        expect(parse.type).toEqual("horizBrace");
+    });
+
+    it("should be grouped more tightly than supsubs", function() {
+        const parse = getParsed("\\overbrace x^2")[0];
+
+        expect(parse.type).toEqual("supsub");
+    });
+});
+
+describe("A horizontal brace builder", function() {
+    it("should not fail", function() {
+        expect("\\overbrace{x}").toBuild();
+        expect("\\overbrace{x}^2").toBuild();
+        expect("\\underbrace{x}_2").toBuild();
+        expect("\\underbrace{x}_2^2").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\overbrace x")[0].classes).toContain("mord");
+        expect(getBuilt("\\overbrace{x}^2")[0].classes).toContain("mord");
+        expect(getBuilt("\\overbrace +")[0].classes).toContain("mord");
+        expect(getBuilt("\\overbrace +")[0].classes).not.toContain("mbin");
+        expect(getBuilt("\\overbrace )^2")[0].classes).toContain("mord");
+        expect(getBuilt("\\overbrace )^2")[0].classes).not.toContain("mclose");
+    });
+});
+
+describe("A boxed parser", function() {
+    it("should not fail", function() {
+        expect("\\boxed{x}").toParse();
+        expect("\\boxed{x^2}").toParse();
+        expect("\\boxed{x}^2").toParse();
+        expect("\\boxed x").toParse();
+    });
+
+    it("should produce enclose", function() {
+        const parse = getParsed("\\boxed x")[0];
+
+        expect(parse.type).toEqual("enclose");
+    });
+});
+
+describe("A boxed builder", function() {
+    it("should not fail", function() {
+        expect("\\boxed{x}").toBuild();
+        expect("\\boxed{x}^2").toBuild();
+        expect("\\boxed{x}_2").toBuild();
+        expect("\\boxed{x}_2^2").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\boxed x")[0].classes).toContain("mord");
+        expect(getBuilt("\\boxed +")[0].classes).toContain("mord");
+        expect(getBuilt("\\boxed +")[0].classes).not.toContain("mbin");
+        expect(getBuilt("\\boxed )^2")[0].classes).toContain("mord");
+        expect(getBuilt("\\boxed )^2")[0].classes).not.toContain("mclose");
+    });
+});
+
+describe("A strike-through parser", function() {
+    it("should not fail", function() {
+        expect("\\cancel{x}").toParse();
+        expect("\\cancel{x^2}").toParse();
+        expect("\\cancel{x}^2").toParse();
+        expect("\\cancel x").toParse();
+    });
+
+    it("should produce enclose", function() {
+        const parse = getParsed("\\cancel x")[0];
+
+        expect(parse.type).toEqual("enclose");
+    });
+
+    it("should be grouped more tightly than supsubs", function() {
+        const parse = getParsed("\\cancel x^2")[0];
+
+        expect(parse.type).toEqual("supsub");
+    });
+});
+
+describe("A strike-through builder", function() {
+    it("should not fail", function() {
+        expect("\\cancel{x}").toBuild();
+        expect("\\cancel{x}^2").toBuild();
+        expect("\\cancel{x}_2").toBuild();
+        expect("\\cancel{x}_2^2").toBuild();
+        expect("\\sout{x}").toBuild();
+        expect("\\sout{x}^2").toBuild();
+        expect("\\sout{x}_2").toBuild();
+        expect("\\sout{x}_2^2").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\cancel x")[0].classes).toContain("mord");
+        expect(getBuilt("\\cancel +")[0].classes).toContain("mord");
+        expect(getBuilt("\\cancel +")[0].classes).not.toContain("mbin");
+        expect(getBuilt("\\cancel )^2")[0].classes).toContain("mord");
+        expect(getBuilt("\\cancel )^2")[0].classes).not.toContain("mclose");
+    });
+});
+
 describe("A phantom parser", function() {
    it("should not fail", function() {
        expect("\\phantom{x}").toParse();
--- a/test/screenshotter/images/Boxed-chrome.png
+++ b/test/screenshotter/images/Boxed-chrome.png
--- a/test/screenshotter/images/Boxed-firefox.png
+++ b/test/screenshotter/images/Boxed-firefox.png
--- a/test/screenshotter/images/ExtensibleArrows-chrome.png
+++ b/test/screenshotter/images/ExtensibleArrows-chrome.png
--- a/test/screenshotter/images/ExtensibleArrows-firefox.png
+++ b/test/screenshotter/images/ExtensibleArrows-firefox.png
--- a/test/screenshotter/images/HorizontalBraces-chrome.png
+++ b/test/screenshotter/images/HorizontalBraces-chrome.png
--- a/test/screenshotter/images/HorizontalBraces-firefox.png
+++ b/test/screenshotter/images/HorizontalBraces-firefox.png
--- a/test/screenshotter/images/LowerAccent-chrome.png
+++ b/test/screenshotter/images/LowerAccent-chrome.png
--- a/test/screenshotter/images/LowerAccent-firefox.png
+++ b/test/screenshotter/images/LowerAccent-firefox.png
--- a/test/screenshotter/images/StretchyAccent-chrome.png
+++ b/test/screenshotter/images/StretchyAccent-chrome.png
--- a/test/screenshotter/images/StretchyAccent-firefox.png
+++ b/test/screenshotter/images/StretchyAccent-firefox.png
--- a/test/screenshotter/images/StrikeThrough-chrome.png
+++ b/test/screenshotter/images/StrikeThrough-chrome.png
--- a/test/screenshotter/images/StrikeThrough-firefox.png
+++ b/test/screenshotter/images/StrikeThrough-firefox.png
--- a/test/screenshotter/ss_data.yaml
+++ b/test/screenshotter/ss_data.yaml
@@ -42,6 +42,7 @@ BinCancellation: |
    \end{array}
 BinomTest: \dbinom{a}{b}\tbinom{a}{b}^{\binom{a}{b}+17}
 BoldSpacing: \mathbf{A}^2+\mathbf{B}_3*\mathscr{C}'
+Boxed: \boxed{F=ma} \quad \boxed{ac}\color{magenta}{\boxed{F}}\boxed{F=mg}
 Cases: |
    f(a,b)=\begin{cases}
        a+1&\text{if }b\text{ is odd} \\
@@ -72,6 +73,12 @@ DisplayStyle: |
    {\displaystyle\sqrt{x}}{\sqrt{x}}
    {\displaystyle \frac12}{\frac12}{\displaystyle x^1_2}{x^1_2}
 Exponents: a^{a^a_a}_{a^a_a}
+ExtensibleArrows: |
+    \begin{array}{l}
+        \xrightarrow[ab]{ABC} + \xRightarrow{ABC} \\
+        \xrightleftharpoons[ab]{ABC} + \xhookrightarrow[ab]{ABC} \\
+        \xtwoheadrightarrow{ABC} + \frac{\xrightarrow[ab]{ABC}}{\xrightarrow[ab]{ABC}} + \left\lvert\xrightarrow[ab]{ABC}\right\rvert
+    \end{array}
 FractionTest: \dfrac{a}{b}\frac{a}{b}\tfrac{a}{b}\;-\dfrac12\;1\tfrac12\;{1 \atop 2}
 Functions: \sin\cos\tan\ln\log
 Gathered: |
@@ -89,6 +96,7 @@ GroupMacros:
        \startExp: e^\bgroup
        \endExp: \egroup
    tex: \startExp a+b\endExp
+HorizontalBraces: \overbrace{\displaystyle{\oint_S{\vec E\cdot\hat n\,\mathrm d a}}}^\text{emf} = \underbrace{\frac{q_{\text{enc}}}{\varepsilon_0}}_{\text{charge}}
 KaTeX: \KaTeX
 Kern:
    tex: \frac{a\kern{1em}b}{c}a\kern{1em}b\kern{1ex}c\kern{-0.25em}d
@@ -104,6 +112,13 @@ LeftRightStyleSizing: |
 LimitControls: |
    \displaystyle\int\limits_2^3 3x^2\,dx + \sum\nolimits^n_{i=1}i +
    \textstyle\int\limits_x^y z
+LowerAccent: |
+    \begin{matrix}
+        \underleftarrow{AB} \quad \underrightarrow{AB} \quad \underleftrightarrow{AB} \quad \undergroup{AB} \\
+        \underlinesegment{AB} \quad \undertilde{AB}  \quad \color{green}{\underrightarrow{AB}} \\
+        \underrightarrow{F} + \underrightarrow{AB} + \underrightarrow{AB}^2 + \underrightarrow{AB}_2 \\
+        \frac{\underrightarrow{AB}}{\underrightarrow{AB}} + \sqrt{\underrightarrow{AB}} + \left\lvert\underrightarrow{AB}\right\rvert
+    \end{matrix}
 MathAtom: a\mathrel{\mathop{=}\limits^{\blue ?}}b
 MathAtom2: \mathop{\overline{\mathrm{lim}}}\limits_{x\to\infty}f(x)
 MathDefaultFonts: Ax2k\breve{a}\omega\Omega\imath+\KaTeX
@@ -168,6 +183,21 @@ Sqrt: |
 SqrtRoot: |
    1+\sqrt[3]{2}+\sqrt[1923^234]{2^{2^{2^{2^{2^{2^{2^{2^{2^{2^{2^2}}}}}}}}}}}
 StackRel: a \stackrel{?}{=} b \stackrel{\text{def}}{=} c
+StretchyAccent: |
+    \begin{array}{l}
+        \overrightarrow{AB} \quad \overleftarrow{AB} \quad \Overrightarrow{AB} \quad \overleftrightarrow{AB} \quad \overgroup{AB} \\
+        \overlinesegment{AB} \quad \overleftharpoon{AB} \quad \overrightharpoon{AB} \quad \color{red}{\overrightarrow{AB}} \quad \widehat{\theta} \widetilde{A} \\
+        \widehat{AB} \quad \widehat{ABC} \quad \widetilde{AB} \quad \widetilde{ABC} \\
+        \overrightarrow{F} + \overrightarrow{AB} + \overrightarrow{F}^2 + \overrightarrow{F}_2 + \overrightarrow{F}_1^2 \\
+        \overrightarrow{AB}^2+\frac{\overrightarrow{AB}}{\overrightarrow{AB}} + \sqrt{\overrightarrow{AB}} + \left\lvert\overrightarrow{AB}\right\rvert
+    \end{array}
+StrikeThrough: |
+    \begin{array}{l}
+        \cancel x \quad \cancel{2B} + \bcancel 5 +\bcancel{5ay} \\
+        \sout{5ab} + \sout{5ABC} + \xcancel{\oint_S{\vec E\cdot\hat n\,\mathrm d a}} \\
+        \frac{x+\cancel B}{x+\cancel x} + \frac{x+\cancel y}{x} + \cancel{B}_1^2 + \cancel{B^2} \\
+        \left\lvert\cancel{ac}\right\rvert
+    \end{array}
 StyleSpacing: \scriptstyle ab\;cd
 StyleSwitching: a\cdot b\scriptstyle a\cdot ba\textstyle\cdot ba\scriptstyle\cdot b
 SupSubCharacterBox: a_2f_2{f}_2{aa}_2{af}_2\mathbf{y}_Ay_A
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" preserveAspectRatio="none"><path stroke="#000" d="M0 0l12 12"/></svg>`
				`@@ -0,0 +1 @@`
				`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' preserveAspectRatio='none'><path stroke="#000" d="M0 12L12 0"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-10c34-36 62.7-77 86-123 3.3-8 5-13.3 5-16 0-5.3-6.7-8-20-8-7.3 0-12.2.5-14.5 1.5-2.3 1-4.8 4.5-7.5 10.5-49.3 97.3-121.7 169.3-217 216-28 14-57.3 25-88 33-6.7 2-11 3.8-13 5.5-2 1.7-3 4.2-3 7.5s1 5.8 3 7.5c2 1.7 6.3 3.5 13 5.5 68 17.3 128.2 47.8 180.5 91.5 52.3 43.7 93.8 96.2 124.5 157.5 9.3 8 15.3 12.3 18 13h6c12-.7 18-4 18-10 0-2-1.7-7-5-15-23.3-46-52-87-86-123l-10-10h399738v-40H218c328 0 0 0 0 0l-10-8c-26.7-20-65.7-43-117-69 2.7-2 6-3.7 10-5 36.7-16 72.3-37.3 107-64l10-8h399782v-40zm8 0v40h399730v-40zm0 194v40h399730v-40z"/></svg></svg>