katex 0.13.20 → 0.13.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "katex",
-  "version": "0.13.20",
+  "version": "0.13.24",
   "description": "Fast math typesetting for the web.",
   "main": "dist/katex.js",
   "homepage": "https://katex.org",
@@ -8,6 +8,10 @@
     "type": "git",
     "url": "https://github.com/KaTeX/KaTeX.git"
   },
+  "funding": [
+    "https://opencollective.com/katex",
+    "https://github.com/sponsors/katex"
+  ],
   "files": [
     "katex.js",
     "cli.js",
@@ -21,6 +25,8 @@
     "@babel/core": "^7.10.4",
     "@babel/eslint-parser": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-flow": "^7.10.4",
@@ -42,9 +48,11 @@
     "caniuse-lite": "^1.0.30001102",
     "css-loader": "^6.0.0",
     "cssnano": "^5.0.0-rc.1",
-    "eslint": "^7.4.0",
-    "eslint-plugin-actions": "^1.0.1",
-    "eslint-plugin-flowtype": "^6.0.0",
+    "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",
@@ -68,6 +76,7 @@
     "p-retry": "^4.6.1",
     "pako": "^2.0.0",
     "postcss": "^8.0.0",
+    "postcss-less": "^5.0.0",
     "postcss-loader": "^6.0.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.5",
@@ -78,8 +87,8 @@
     "semantic-release": "^18.0.0",
     "sri-toolbox": "^0.2.0",
     "style-loader": "^3.0.0",
-    "stylelint": "^13.6.1",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint": "^14.0.0",
+    "stylelint-config-standard": "^23.0.0",
     "terser-webpack-plugin": "^5.0.3",
     "webpack": "^5.51.1",
     "webpack-bundle-analyzer": "^4.0.0",
@@ -114,7 +123,7 @@
     "dist:zip": "rimraf katex/ katex.tar.gz katex.zip && cp -R dist katex && tar czf katex.tar.gz katex && zip -rq katex.zip katex && rimraf katex/"
   },
   "dependencies": {
-    "commander": "^6.0.0"
+    "commander": "^8.0.0"
   },
   "husky": {
     "hooks": {

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/generate_fonts.py

@@ -15,13 +15,12 @@ if len(sys.argv) < 2:
 font_file = sys.argv[1]
 font_name = os.path.splitext(os.path.basename(font_file))[0]
 
-# now or SOURCE_DATE_EPOCH, if present
-timestamp = timestampNow()
 
 font = TTFont(font_file, recalcBBoxes=False, recalcTimestamp=False)
 
-font['head'].created = timestamp
-font['head'].modified = timestamp
+# fix timestamp to the epoch
+font['head'].created = 0
+font['head'].modified = 0
 
 # remove fontforge timestamps
 if 'FFTM' in font:
@@ -36,8 +35,6 @@ if 'GDEF' in font:
 font['name'].names = [record for record in font['name'].names if record.platformID != 1]
 font['cmap'].tables = [table for table in font['cmap'].tables if table.platformID != 1]
 
-font['name'].setName('Version ' + str(timestamp), 5, 3, 1, 1033)
-
 # fix OS/2 and hhea metrics
 glyf = font['glyf']
 ascent = int(max(glyf[c].yMax for c in font.getGlyphOrder() if hasattr(glyf[c], "yMax")))

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,
                 },

package/src/functions/cr.js

@@ -4,7 +4,7 @@
 import defineFunction from "../defineFunction";
 import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
-import {calculateSize} from "../units";
+import {calculateSize, makeEm} from "../units";
 import {assertNodeType} from "../parseNode";
 
 // \DeclareRobustCommand\\{...\@xnewline}
@@ -41,7 +41,7 @@ defineFunction({
             span.classes.push("newline");
             if (group.size) {
                 span.style.marginTop =
-                    calculateSize(group.size, options) + "em";
+                    makeEm(calculateSize(group.size, options));
             }
         }
         return span;
@@ -53,7 +53,7 @@ defineFunction({
             node.setAttribute("linebreak", "newline");
             if (group.size) {
                 node.setAttribute("height",
-                    calculateSize(group.size, options) + "em");
+                    makeEm(calculateSize(group.size, options)));
             }
         }
         return node;

package/src/functions/delimsizing.js

@@ -6,6 +6,7 @@ import mathMLTree from "../mathMLTree";
 import ParseError from "../ParseError";
 import utils from "../utils";
 import {assertNodeType, checkSymbolNodeType} from "../parseNode";
+import {makeEm} from "../units";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -126,8 +127,9 @@ defineFunction({
         }
 
         node.setAttribute("stretchy", "true");
-        node.setAttribute("minsize", delimiter.sizeToMaxHeight[group.size] + "em");
-        node.setAttribute("maxsize", delimiter.sizeToMaxHeight[group.size] + "em");
+        const size = makeEm(delimiter.sizeToMaxHeight[group.size]);
+        node.setAttribute("minsize", size);
+        node.setAttribute("maxsize", size);
 
         return node;
     },

package/src/functions/enclose.js

@@ -6,7 +6,7 @@ import utils from "../utils";
 import stretchy from "../stretchy";
 import {phasePath} from "../svgGeometry";
 import {PathNode, SvgNode} from "../domTree";
-import {calculateSize} from "../units";
+import {calculateSize, makeEm} from "../units";
 import {assertNodeType} from "../parseNode";
 
 import * as html from "../buildHTML";
@@ -48,20 +48,20 @@ const htmlBuilder = (group, options) => {
 
         const angleHeight = inner.height + inner.depth + lineWeight + clearance;
         // Reserve a left pad for the angle.
-        inner.style.paddingLeft = (angleHeight / 2 + lineWeight) + "em";
+        inner.style.paddingLeft = makeEm(angleHeight / 2 + lineWeight);
 
         // Create an SVG
         const viewBoxHeight = Math.floor(1000 * angleHeight * scale);
         const path = phasePath(viewBoxHeight);
         const svgNode = new SvgNode([new PathNode("phase", path)], {
             "width": "400em",
-            "height": `${viewBoxHeight / 1000}em`,
+            "height": makeEm(viewBoxHeight / 1000),
             "viewBox": `0 0 400000 ${viewBoxHeight}`,
             "preserveAspectRatio": "xMinYMin slice",
         });
         // Wrap it in a span with overflow: hidden.
         img = buildCommon.makeSvgSpan(["hide-tail"], [svgNode], options);
-        img.style.height = angleHeight + "em";
+        img.style.height = makeEm(angleHeight);
         imgShift = inner.depth + lineWeight + clearance;
 
     } else {
@@ -104,10 +104,10 @@ const htmlBuilder = (group, options) => {
         img = stretchy.encloseSpan(inner, label, topPad, bottomPad, options);
         if (/fbox|boxed|fcolorbox/.test(label)) {
             img.style.borderStyle = "solid";
-            img.style.borderWidth = `${ruleThickness}em`;
+            img.style.borderWidth = makeEm(ruleThickness);
         } else if (label === "angl" && ruleThickness !== 0.049) {
-            img.style.borderTopWidth = `${ruleThickness}em`;
-            img.style.borderRightWidth = `${ruleThickness}em`;
+            img.style.borderTopWidth = makeEm(ruleThickness);
+            img.style.borderRightWidth = makeEm(ruleThickness);
         }
         imgShift = inner.depth + bottomPad;
 

package/src/functions/genfrac.js

@@ -9,7 +9,7 @@ import {assert} from "../utils";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
-import {calculateSize} from "../units";
+import {calculateSize, makeEm} from "../units";
 
 const adjustStyle = (size, originalStyle) => {
     // Figure out what style this fraction should be in based on the
@@ -196,7 +196,7 @@ const mathmlBuilder = (group, options) => {
         node.setAttribute("linethickness", "0px");
     } else if (group.barSize) {
         const ruleWidth = calculateSize(group.barSize, options);
-        node.setAttribute("linethickness", ruleWidth + "em");
+        node.setAttribute("linethickness", makeEm(ruleWidth));
     }
 
     const style = adjustStyle(group.size, options.style);

package/src/functions/includegraphics.js

@@ -1,7 +1,7 @@
 // @flow
 import defineFunction from "../defineFunction";
 import type {Measurement} from "../units";
-import {calculateSize, validUnit} from "../units";
+import {calculateSize, validUnit, makeEm} from "../units";
 import ParseError from "../ParseError";
 import {Img} from "../domTree";
 import mathMLTree from "../mathMLTree";
@@ -108,7 +108,6 @@ defineFunction({
 
         if (group.totalheight.number > 0) {
             depth = calculateSize(group.totalheight, options) - height;
-            depth = Number(depth.toFixed(2));
         }
 
         let width = 0;
@@ -116,12 +115,12 @@ defineFunction({
             width = calculateSize(group.width, options);
         }
 
-        const style: CssStyle = {height: height + depth + "em"};
+        const style: CssStyle = {height: makeEm(height + depth)};
         if (width > 0) {
-            style.width = width + "em";
+            style.width = makeEm(width);
         }
         if (depth > 0) {
-            style.verticalAlign = -depth + "em";
+            style.verticalAlign = makeEm(-depth);
         }
 
         const node = new Img(group.src, group.alt, style);
@@ -138,14 +137,13 @@ defineFunction({
         let depth = 0;
         if (group.totalheight.number > 0) {
             depth = calculateSize(group.totalheight, options) - height;
-            depth = depth.toFixed(2);
-            node.setAttribute("valign", "-" + depth + "em");
+            node.setAttribute("valign", makeEm(-depth));
         }
-        node.setAttribute("height", height + depth + "em");
+        node.setAttribute("height", makeEm(height + depth));
 
         if (group.width.number > 0) {
             const width = calculateSize(group.width, options);
-            node.setAttribute("width", width + "em");
+            node.setAttribute("width", makeEm(width));
         }
         node.setAttribute("src", group.src);
         return node;

package/src/functions/lap.js

@@ -3,6 +3,7 @@
 import defineFunction from "../defineFunction";
 import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
+import {makeEm} from "../units";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -46,9 +47,9 @@ defineFunction({
         // Otherwise, a tall argument may be misplaced.
         // This code resolved issue #1153
         const strut = buildCommon.makeSpan(["strut"]);
-        strut.style.height = (node.height + node.depth) + "em";
+        strut.style.height = makeEm(node.height + node.depth);
         if (node.depth) {
-            strut.style.verticalAlign = -node.depth + "em";
+            strut.style.verticalAlign = makeEm(-node.depth);
         }
         node.children.unshift(strut);
 

package/src/functions/op.js

@@ -8,6 +8,7 @@ import utils from "../utils";
 import Style from "../Style";
 import {assembleSupSub} from "./utils/assembleSupSub";
 import {assertNodeType} from "../parseNode";
+import {makeEm} from "../units";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -132,7 +133,7 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
     } else {
         if (baseShift) {
             base.style.position = "relative";
-            base.style.top = baseShift + "em";
+            base.style.top = makeEm(baseShift);
         }
 
         return base;