katex 0.13.22 → 0.14.1

package/katex.js

@@ -9,7 +9,7 @@
  */
 
 import ParseError from "./src/ParseError";
-import Settings from "./src/Settings";
+import Settings, {SETTINGS_SCHEMA} from "./src/Settings";
 
 import {buildTree, buildHTMLTree} from "./src/buildTree";
 import parseTree from "./src/parseTree";
@@ -156,6 +156,10 @@ export default {
      * KaTeX error, usually during parsing.
      */
     ParseError,
+    /**
+     * The shema of Settings
+     */
+    SETTINGS_SCHEMA,
     /**
      * Parses the given LaTeX into KaTeX's internal parse tree structure,
      * without rendering to HTML or MathML.

package/package.json

@@ -1,13 +1,44 @@
 {
   "name": "katex",
-  "version": "0.13.22",
+  "version": "0.14.1",
   "description": "Fast math typesetting for the web.",
   "main": "dist/katex.js",
+  "exports": {
+    ".": {
+      "require": "./dist/katex.js",
+      "import": "./dist/katex.mjs"
+    },
+    "./contrib/auto-render": {
+      "require": "./dist/contrib/auto-render.js",
+      "import": "./dist/contrib/auto-render.mjs"
+    },
+    "./contrib/mhchem": {
+      "require": "./dist/contrib/mhchem.js",
+      "import": "./dist/contrib/mhchem.mjs"
+    },
+    "./contrib/copy-tex": {
+      "require": "./dist/contrib/copy-tex.js",
+      "import": "./dist/contrib/copy-tex.mjs"
+    },
+    "./contrib/mathtex-script-type": {
+      "require": "./dist/contrib/mathtex-script-type.js",
+      "import": "./dist/contrib/mathtex-script-type.mjs"
+    },
+    "./contrib/render-a11y-string": {
+      "require": "./dist/contrib/render-a11y-string.js",
+      "import": "./dist/contrib/render-a11y-string.mjs"
+    },
+    "./*": "./*"
+  },
   "homepage": "https://katex.org",
   "repository": {
     "type": "git",
     "url": "https://github.com/KaTeX/KaTeX.git"
   },
+  "funding": [
+    "https://opencollective.com/katex",
+    "https://github.com/sponsors/katex"
+  ],
   "files": [
     "katex.js",
     "cli.js",
@@ -45,8 +76,10 @@
     "css-loader": "^6.0.0",
     "cssnano": "^5.0.0-rc.1",
     "eslint": "^8.0.0",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-actions": "^2.0.0",
     "eslint-plugin-flowtype": "^8.0.0",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-react": "^7.20.3",
     "flow-bin": "^0.135.0",
     "fs-extra": "^10.0.0",

package/src/Settings.js

@@ -52,23 +52,180 @@ export type TrustContextTypes = {
 export type AnyTrustContext = $Values<TrustContextTypes>;
 export type TrustFunction = (context: AnyTrustContext) => ?boolean;
 
-export type SettingsOptions = {
-    displayMode?: boolean;
-    output?: "html" | "mathml" | "htmlAndMathml";
-    leqno?: boolean;
-    fleqn?: boolean;
-    throwOnError?: boolean;
-    errorColor?: string;
-    macros?: MacroMap;
-    minRuleThickness?: number;
-    colorIsTextColor?: boolean;
-    strict?: boolean | "ignore" | "warn" | "error" | StrictFunction;
-    trust?: boolean | TrustFunction;
-    maxSize?: number;
-    maxExpand?: number;
-    globalGroup?: boolean;
+export type SettingsOptions = $Shape<Settings>;
+
+type EnumType = {| enum: string[] |};
+type Type = "boolean" | "string" | "number" | "object" | "function" | EnumType;
+type Schema = {
+    [$Keys<SettingsOptions>]: {
+        /**
+         * Allowed type(s) of the value.
+         */
+        type: Type | Type[];
+        /**
+         * The default value. If not specified, false for boolean, an empty string
+         * for string, 0 for number, an empty object for object, or the first item
+         * for enum will be used. If multiple types are allowed, the first allowed
+         * type will be used for determining the default value.
+         */
+        default?: any;
+        /**
+         * The description.
+         */
+        description?: string;
+        /**
+         * The function to process the option.
+         */
+        processor?: (any) => any,
+        /**
+         * The command line argument. See Commander.js docs for more information.
+         * If not specified, the name prefixed with -- will be used. Set false not
+         * to add to the CLI.
+         */
+        cli?: string | false;
+        /**
+         * The default value for the CLI.
+         */
+        cliDefault?: any;
+        /**
+         * The description for the CLI. If not specified, the description for the
+         * option will be used.
+         */
+        cliDescription?: string;
+        /**
+         * The custom argument processor for the CLI. See Commander.js docs for
+         * more information.
+         */
+        cliProcessor?: (any, any) => any;
+    };
+};
+
+// TODO: automatically generate documentation
+// TODO: check all properties on Settings exist
+// TODO: check the type of a property on Settings matches
+export const SETTINGS_SCHEMA: Schema = {
+    displayMode: {
+        type: "boolean",
+        description: "Render math in display mode, which puts the math in " +
+            "display style (so \\int and \\sum are large, for example), and " +
+            "centers the math on the page on its own line.",
+        cli: "-d, --display-mode",
+    },
+    output: {
+        type: {enum: ["htmlAndMathml", "html", "mathml"]},
+        description: "Determines the markup language of the output.",
+        cli: "-F, --format <type>",
+    },
+    leqno: {
+        type: "boolean",
+        description: "Render display math in leqno style (left-justified tags).",
+    },
+    fleqn: {
+        type: "boolean",
+        description: "Render display math flush left.",
+    },
+    throwOnError: {
+        type: "boolean",
+        default: true,
+        cli: "-t, --no-throw-on-error",
+        cliDescription: "Render errors (in the color given by --error-color) ins" +
+            "tead of throwing a ParseError exception when encountering an error.",
+    },
+    errorColor: {
+        type: "string",
+        default: "#cc0000",
+        cli: "-c, --error-color <color>",
+        cliDescription: "A color string given in the format 'rgb' or 'rrggbb' " +
+            "(no #). This option determines the color of errors rendered by the " +
+            "-t option.",
+        cliProcessor: (color) => "#" + color,
+    },
+    macros: {
+        type: "object",
+        cli: "-m, --macro <def>",
+        cliDescription: "Define custom macro of the form '\\foo:expansion' (use " +
+            "multiple -m arguments for multiple macros).",
+        cliDefault: [],
+        cliProcessor: (def, defs) => {
+            defs.push(def);
+            return defs;
+        },
+    },
+    minRuleThickness: {
+        type: "number",
+        description: "Specifies a minimum thickness, in ems, for fraction lines," +
+            " `\\sqrt` top lines, `{array}` vertical lines, `\\hline`, " +
+            "`\\hdashline`, `\\underline`, `\\overline`, and the borders of " +
+            "`\\fbox`, `\\boxed`, and `\\fcolorbox`.",
+        processor: (t) => Math.max(0, t),
+        cli: "--min-rule-thickness <size>",
+        cliProcessor: parseFloat,
+    },
+    colorIsTextColor: {
+        type: "boolean",
+        description: "Makes \\color behave like LaTeX's 2-argument \\textcolor, " +
+            "instead of LaTeX's one-argument \\color mode change.",
+        cli: "-b, --color-is-text-color",
+    },
+    strict: {
+        type: [{enum: ["warn", "ignore", "error"]}, "boolean", "function"],
+        description: "Turn on strict / LaTeX faithfulness mode, which throws an " +
+            "error if the input uses features that are not supported by LaTeX.",
+        cli: "-S, --strict",
+        cliDefault: false,
+    },
+    trust: {
+        type: ["boolean", "function"],
+        description: "Trust the input, enabling all HTML features such as \\url.",
+        cli: "-T, --trust",
+    },
+    maxSize: {
+        type: "number",
+        default: Infinity,
+        description: "If non-zero, all user-specified sizes, e.g. in " +
+            "\\rule{500em}{500em}, will be capped to maxSize ems. Otherwise, " +
+            "elements and spaces can be arbitrarily large",
+        processor: (s) => Math.max(0, s),
+        cli: "-s, --max-size <n>",
+        cliProcessor: parseInt,
+    },
+    maxExpand: {
+        type: "number",
+        default: 1000,
+        description: "Limit the number of macro expansions to the specified " +
+            "number, to prevent e.g. infinite macro loops. If set to Infinity, " +
+            "the macro expander will try to fully expand as in LaTeX.",
+        processor: (n) => Math.max(0, n),
+        cli: "-e, --max-expand <n>",
+        cliProcessor: (n) => (n === "Infinity" ? Infinity : parseInt(n)),
+    },
+    globalGroup: {
+        type: "boolean",
+        cli: false,
+    },
 };
 
+function getDefaultValue(schema): any {
+    if (schema.default) {
+        return schema.default;
+    }
+    const type = schema.type;
+    const defaultType = Array.isArray(type) ? type[0] : type;
+    if (typeof defaultType !== 'string') {
+        return defaultType.enum[0];
+    }
+    switch (defaultType) {
+        case 'boolean':
+            return false;
+        case 'string':
+            return '';
+        case 'number':
+            return 0;
+        case 'object':
+            return {};
+    }
+}
+
 /**
  * The main Settings object
  *
@@ -98,23 +255,17 @@ export default class Settings {
     constructor(options: SettingsOptions) {
         // allow null options
         options = options || {};
-        this.displayMode = utils.deflt(options.displayMode, false);
-        this.output = utils.deflt(options.output, "htmlAndMathml");
-        this.leqno = utils.deflt(options.leqno, false);
-        this.fleqn = utils.deflt(options.fleqn, false);
-        this.throwOnError = utils.deflt(options.throwOnError, true);
-        this.errorColor = utils.deflt(options.errorColor, "#cc0000");
-        this.macros = options.macros || {};
-        this.minRuleThickness = Math.max(
-            0,
-            utils.deflt(options.minRuleThickness, 0)
-        );
-        this.colorIsTextColor = utils.deflt(options.colorIsTextColor, false);
-        this.strict = utils.deflt(options.strict, "warn");
-        this.trust = utils.deflt(options.trust, false);
-        this.maxSize = Math.max(0, utils.deflt(options.maxSize, Infinity));
-        this.maxExpand = Math.max(0, utils.deflt(options.maxExpand, 1000));
-        this.globalGroup = utils.deflt(options.globalGroup, false);
+        for (const prop in SETTINGS_SCHEMA) {
+            if (SETTINGS_SCHEMA.hasOwnProperty(prop)) {
+                // $FlowFixMe
+                const schema = SETTINGS_SCHEMA[prop];
+                // TODO: validate options
+                // $FlowFixMe
+                this[prop] = options[prop] !== undefined ? (schema.processor
+                        ? schema.processor(options[prop]) : options[prop])
+                    : getDefaultValue(schema);
+            }
+        }
     }
 
     /**

package/src/buildCommon.js

@@ -9,7 +9,7 @@ import {SymbolNode, Anchor, Span, PathNode, SvgNode, createClass} from "./domTre
 import {getCharacterMetrics} from "./fontMetrics";
 import symbols, {ligatures} from "./symbols";
 import {wideCharacterFont} from "./wide-character";
-import {calculateSize} from "./units";
+import {calculateSize, makeEm} from "./units";
 import {DocumentFragment} from "./tree";
 
 import type Options from "./Options";
@@ -364,7 +364,7 @@ const makeLineSpan = function(
         thickness || options.fontMetrics().defaultRuleThickness,
         options.minRuleThickness,
     );
-    line.style.borderBottomWidth = line.height + "em";
+    line.style.borderBottomWidth = makeEm(line.height);
     line.maxFontSize = 1.0;
     return line;
 };
@@ -550,7 +550,7 @@ const makeVList = function(params: VListParam, options: Options): DomSpan {
     }
     pstrutSize += 2;
     const pstrut = makeSpan(["pstrut"], []);
-    pstrut.style.height = pstrutSize + "em";
+    pstrut.style.height = makeEm(pstrutSize);
 
     // Create a new list of actual children at the correct offsets
     const realChildren = [];
@@ -567,7 +567,7 @@ const makeVList = function(params: VListParam, options: Options): DomSpan {
             const style = child.wrapperStyle || {};
 
             const childWrap = makeSpan(classes, [pstrut, elem], undefined, style);
-            childWrap.style.top = (-pstrutSize - currPos - elem.depth) + "em";
+            childWrap.style.top = makeEm(-pstrutSize - currPos - elem.depth);
             if (child.marginLeft) {
                 childWrap.style.marginLeft = child.marginLeft;
             }
@@ -586,7 +586,7 @@ const makeVList = function(params: VListParam, options: Options): DomSpan {
     // This cell's bottom edge will determine the containing table's baseline
     // without overly expanding the containing line-box.
     const vlist = makeSpan(["vlist"], realChildren);
-    vlist.style.height = maxPos + "em";
+    vlist.style.height = makeEm(maxPos);
 
     // A second row is used if necessary to represent the vlist's depth.
     let rows;
@@ -598,7 +598,7 @@ const makeVList = function(params: VListParam, options: Options): DomSpan {
         // So we put another empty span inside the depth strut span.
         const emptySpan = makeSpan([], []);
         const depthStrut = makeSpan(["vlist"], [emptySpan]);
-        depthStrut.style.height = -minPos + "em";
+        depthStrut.style.height = makeEm(-minPos);
 
         // Safari wants the first row to have inline content; otherwise it
         // puts the bottom of the *second* row on the baseline.
@@ -626,7 +626,7 @@ const makeGlue = (measurement: Measurement, options: Options): DomSpan => {
     // Make an empty span for the space
     const rule = makeSpan(["mspace"], [], options);
     const size = calculateSize(measurement, options);
-    rule.style.marginRight = `${size}em`;
+    rule.style.marginRight = makeEm(size);
     return rule;
 };
 
@@ -744,17 +744,17 @@ const staticSvg = function(value: string, options: Options): SvgSpan {
     const [pathName, width, height] = svgData[value];
     const path = new PathNode(pathName);
     const svgNode = new SvgNode([path], {
-        "width": width + "em",
-        "height": height + "em",
+        "width": makeEm(width),
+        "height": makeEm(height),
         // Override CSS rule `.katex svg { width: 100% }`
-        "style": "width:" + width + "em",
+        "style": "width:" + makeEm(width),
         "viewBox": "0 0 " + 1000 * width + " " + 1000 * height,
         "preserveAspectRatio": "xMinYMin",
     });
     const span = makeSvgSpan(["overlay"], [svgNode], options);
     span.height = height;
-    span.style.height = height + "em";
-    span.style.width = width + "em";
+    span.style.height = makeEm(height);
+    span.style.width = makeEm(width);
     return span;
 };
 

package/src/buildHTML.js

@@ -11,6 +11,7 @@ import Style from "./Style";
 import buildCommon from "./buildCommon";
 import {Span, Anchor} from "./domTree";
 import utils from "./utils";
+import {makeEm} from "./units";
 import {spacings, tightSpacings} from "./spacingData";
 import {_htmlGroupBuilders as groupBuilders} from "./defineFunction";
 import {DocumentFragment} from "./tree";
@@ -299,9 +300,9 @@ function buildHTMLUnbreakable(children, options) {
     // the height of the expression, and the bottom of the HTML element
     // falls at the depth of the expression.
     const strut = makeSpan(["strut"]);
-    strut.style.height = (body.height + body.depth) + "em";
+    strut.style.height = makeEm(body.height + body.depth);
     if (body.depth) {
-        strut.style.verticalAlign = -body.depth + "em";
+        strut.style.verticalAlign = makeEm(-body.depth);
     }
     body.children.unshift(strut);
 
@@ -395,9 +396,9 @@ export default function buildHTML(tree: AnyParseNode[], options: Options): DomSp
     // (the height of the enclosing htmlNode) for proper vertical alignment.
     if (tagChild) {
         const strut = tagChild.children[0];
-        strut.style.height = (htmlNode.height + htmlNode.depth) + "em";
+        strut.style.height = makeEm(htmlNode.height + htmlNode.depth);
         if (htmlNode.depth) {
-            strut.style.verticalAlign = (-htmlNode.depth) + "em";
+            strut.style.verticalAlign = makeEm(-htmlNode.depth);
         }
     }
 

package/src/delimiter.js

@@ -30,6 +30,7 @@ import buildCommon from "./buildCommon";
 import {getCharacterMetrics} from "./fontMetrics";
 import symbols from "./symbols";
 import utils from "./utils";
+import {makeEm} from "./units";
 import fontMetricsData from "./fontMetricsData";
 
 import type Options from "./Options";
@@ -93,7 +94,7 @@ const centerSpan = function(
         options.fontMetrics().axisHeight;
 
     span.classes.push("delimcenter");
-    span.style.top = shift + "em";
+    span.style.top = makeEm(shift);
     span.height -= shift;
     span.depth += shift;
 };
@@ -186,21 +187,21 @@ const makeInner = function(
 ): VListElem {
     // Create a span with inline SVG for the inner part of a tall stacked delimiter.
     const width = fontMetricsData['Size4-Regular'][ch.charCodeAt(0)]
-        ? fontMetricsData['Size4-Regular'][ch.charCodeAt(0)][4].toFixed(3)
-        : fontMetricsData['Size1-Regular'][ch.charCodeAt(0)][4].toFixed(3);
+        ? fontMetricsData['Size4-Regular'][ch.charCodeAt(0)][4]
+        : fontMetricsData['Size1-Regular'][ch.charCodeAt(0)][4];
     const path = new PathNode("inner", innerPath(ch,  Math.round(1000 * height)));
     const svgNode = new SvgNode([path], {
-        "width": width + "em",
-        "height": height + "em",
+        "width": makeEm(width),
+        "height": makeEm(height),
         // Override CSS rule `.katex svg { width: 100% }`
-        "style": "width:" + width + "em",
+        "style": "width:" + makeEm(width),
         "viewBox": "0 0 " + 1000 * width + " " + Math.round(1000 * height),
         "preserveAspectRatio": "xMinYMin",
     });
     const span = buildCommon.makeSvgSpan([], [svgNode], options);
     span.height = height;
-    span.style.height = height + "em";
-    span.style.width = width + "em";
+    span.style.height = makeEm(height);
+    span.style.width = makeEm(width);
     return {type: "elem", elem: span};
 };
 
@@ -427,7 +428,7 @@ const sqrtSvg = function(
     const svg =  new SvgNode([pathNode], {
         // Note: 1000:1 ratio of viewBox to document em width.
         "width": "400em",
-        "height": height + "em",
+        "height": makeEm(height),
         "viewBox": "0 0 400000 " + viewBoxHeight,
         "preserveAspectRatio": "xMinYMin slice",
     });
@@ -514,7 +515,7 @@ const makeSqrtImage = function(
     }
 
     span.height = texHeight;
-    span.style.height = spanHeight + "em";
+    span.style.height = makeEm(spanHeight);
 
     return {
         span,

package/src/domTree.js

@@ -16,6 +16,7 @@ import utils from "./utils";
 import {path} from "./svgGeometry";
 import type Options from "./Options";
 import {DocumentFragment} from "./tree";
+import {makeEm} from "./units";
 
 import type {VirtualNode} from "./tree";
 
@@ -406,7 +407,7 @@ export class SymbolNode implements HtmlDomNode {
 
         if (this.italic > 0) {
             span = document.createElement("span");
-            span.style.marginRight = this.italic + "em";
+            span.style.marginRight = makeEm(this.italic);
         }
 
         if (this.classes.length > 0) {

package/src/environments/array.js

@@ -8,7 +8,7 @@ import mathMLTree from "../mathMLTree";
 import ParseError from "../ParseError";
 import {assertNodeType, assertSymbolNodeType} from "../parseNode";
 import {checkSymbolNodeType} from "../parseNode";
-import {calculateSize} from "../units";
+import {calculateSize, makeEm} from "../units";
 import utils from "../utils";
 
 import * as html from "../buildHTML";
@@ -368,7 +368,7 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
             if (!firstSeparator) {
                 colSep = buildCommon.makeSpan(["arraycolsep"], []);
                 colSep.style.width =
-                    options.fontMetrics().doubleRuleSep + "em";
+                    makeEm(options.fontMetrics().doubleRuleSep);
                 cols.push(colSep);
             }
 
@@ -377,13 +377,13 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
                 const separator = buildCommon.makeSpan(
                     ["vertical-separator"], [], options
                 );
-                separator.style.height = totalHeight + "em";
-                separator.style.borderRightWidth = `${ruleThickness}em`;
+                separator.style.height = makeEm(totalHeight);
+                separator.style.borderRightWidth = makeEm(ruleThickness);
                 separator.style.borderRightStyle = lineType;
-                separator.style.margin = `0 -${ruleThickness / 2}em`;
+                separator.style.margin = `0 ${makeEm(-ruleThickness / 2)}`;
                 const shift = totalHeight - offset;
                 if (shift) {
-                    separator.style.verticalAlign = -shift + "em";
+                    separator.style.verticalAlign = makeEm(-shift);
                 }
 
                 cols.push(separator);
@@ -406,7 +406,7 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
             sepwidth = utils.deflt(colDescr.pregap, arraycolsep);
             if (sepwidth !== 0) {
                 colSep = buildCommon.makeSpan(["arraycolsep"], []);
-                colSep.style.width = sepwidth + "em";
+                colSep.style.width = makeEm(sepwidth);
                 cols.push(colSep);
             }
         }
@@ -437,7 +437,7 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
             sepwidth = utils.deflt(colDescr.postgap, arraycolsep);
             if (sepwidth !== 0) {
                 colSep = buildCommon.makeSpan(["arraycolsep"], []);
-                colSep.style.width = sepwidth + "em";
+                colSep.style.width = makeEm(sepwidth);
                 cols.push(colSep);
             }
         }
@@ -523,7 +523,7 @@ const mathmlBuilder: MathMLBuilder<"array"> = function(group, options) {
     const gap = (group.arraystretch === 0.5)
         ? 0.1  // {smallmatrix}, {subarray}
         : 0.16 + group.arraystretch - 1 + (group.addJot ? 0.09 : 0);
-    table.setAttribute("rowspacing", gap.toFixed(4) + "em");
+    table.setAttribute("rowspacing", makeEm(gap));
 
     // MathML table lines go only between cells.
     // To place a line on an edge we'll use <menclose>, if necessary.

package/src/environments/cd.js

@@ -6,6 +6,7 @@ import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
 import {assertSymbolNodeType} from "../parseNode";
 import ParseError from "../ParseError";
+import {makeEm} from "../units";
 
 import type Parser from "../Parser";
 import type {ParseNode, AnyParseNode} from "../parseNode";
@@ -257,7 +258,7 @@ defineFunction({
         const label = buildCommon.wrapFragment(
             html.buildGroup(group.label, newOptions, options), options);
         label.classes.push("cd-label-" + group.side);
-        label.style.bottom = (0.8 - label.depth) + "em";
+        label.style.bottom = makeEm(0.8 - label.depth);
         // Zero out label height & depth, so vertical align of arrow is set
         // by the arrow height, not by the label.
         label.height = 0;

package/src/fontMetricsData.js

@@ -582,6 +582,7 @@ export default {
         "8764": [-0.10889, 0.39111, 0, 0, 0.89444],
         "8768": [0.19444, 0.69444, 0, 0, 0.31944],
         "8771": [0.00222, 0.50222, 0, 0, 0.89444],
+        "8773": [0.027, 0.638, 0, 0, 0.894],
         "8776": [0.02444, 0.52444, 0, 0, 0.89444],
         "8781": [0.00222, 0.50222, 0, 0, 0.89444],
         "8801": [0.00222, 0.50222, 0, 0, 0.89444],
@@ -1099,7 +1100,7 @@ export default {
         "8764": [-0.13313, 0.36687, 0, 0, 0.77778],
         "8768": [0.19444, 0.69444, 0, 0, 0.27778],
         "8771": [-0.03625, 0.46375, 0, 0, 0.77778],
-        "8773": [-0.022, 0.589, 0, 0, 1.0],
+        "8773": [-0.022, 0.589, 0, 0, 0.778],
         "8776": [-0.01688, 0.48312, 0, 0, 0.77778],
         "8781": [-0.03625, 0.46375, 0, 0, 0.77778],
         "8784": [-0.133, 0.673, 0, 0, 0.778],

package/src/fonts/makeFF

@@ -1311,6 +1311,7 @@ $extra{'Main-Regular'} = {
     'Select(0u3D)','Copy()',
     'Select(0u2245)',
     'PasteWithOffset(0,-111)',
+    'SetWidth(778)',
   ],
 
   bowtie => [
@@ -1607,6 +1608,7 @@ $extra{'Main-Bold'} = {
     'Select(0u3D)','Copy()',
     'Select(0u2245)',
     'PasteWithOffset(0,-136)',
+    'SetWidth(894)',
   ],
 
   bowtie => [

package/src/functions/accent.js

@@ -6,6 +6,7 @@ import utils from "../utils";
 import stretchy from "../stretchy";
 import {assertNodeType} from "../parseNode";
 import {assertSpan, assertSymbolDomNode} from "../domTree";
+import {makeEm} from "../units";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -131,7 +132,7 @@ export const htmlBuilder: HtmlBuilderSupSub<"accent"> = (grp, options) => {
             left -= width / 2;
         }
 
-        accentBody.style.left = left + "em";
+        accentBody.style.left = makeEm(left);
 
         // \textcircled uses the \bigcirc glyph, so it needs some
         // vertical adjustment to match LaTeX.
@@ -161,8 +162,8 @@ export const htmlBuilder: HtmlBuilderSupSub<"accent"> = (grp, options) => {
                     wrapperClasses: ["svg-align"],
                     wrapperStyle: skew > 0
                         ? {
-                            width: `calc(100% - ${2 * skew}em)`,
-                            marginLeft: `${(2 * skew)}em`,
+                            width: `calc(100% - ${makeEm(2 * skew)})`,
+                            marginLeft: makeEm(2 * skew),
                         }
                         : undefined,
                 },