temml 0.13.1 → 0.13.3

package/dist/temmlPostProcess.js

@@ -11,7 +11,7 @@
    * https://mit-license.org/
    */
 
-  const version = "0.13.01";
+  const version = "0.13.3";
 
   function postProcess(block) {
     const labelMap = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "temml",
-  "version": "0.13.01",
+  "version": "0.13.3",
   "description": "TeX to MathML conversion in JavaScript.",
   "main": "dist/temml.js",
   "engines": {
@@ -33,8 +33,9 @@
     "eslint": "^9.11.1",
     "esm": "^3.2.25",
     "globals": "^15.9.0",
-    "rollup": "^4.22.4",
-    "terser": "^5.34.0"
+    "rollup": "^4.59.0",
+    "terser": "^5.34.0",
+    "ws": "^8.20.0"
   },
   "scripts": {
     "lint": "eslint temml.js src",
@@ -44,6 +45,7 @@
     "minify": "terser test/temml.js -o site/assets/temml.min.js -c -m && terser contrib/mhchem/mhchem.js -o site/assets/mhchem.min.js -c -m",
     "build": "rollup --config ./utils/rollupConfig.mjs && yarn minify && node utils/insertPlugins.js",
     "docs": "node utils/buildDocs.js",
-    "dist": "yarn build && node ./utils/copyfiles.js"
+    "dist": "yarn build && node ./utils/copyfiles.js",
+    "serve": "node utils/server.cjs site/docs/en/mathml-status.html 8000"
   }
 }

package/src/MacroExpander.js

@@ -9,6 +9,7 @@ import Lexer from "./Lexer";
 import { Token } from "./Token";
 
 import ParseError from "./ParseError";
+import SourceLocation from "./SourceLocation";
 import Namespace from "./Namespace";
 import macros from "./macros";
 
@@ -118,7 +119,7 @@ export default class MacroExpander {
     this.pushToken(new Token("EOF", end.loc));
 
     this.pushTokens(tokens);
-    return start.range(end, "");
+    return new Token("", SourceLocation.range(start, end));
   }
 
   /**

package/src/Parser.js

@@ -9,7 +9,7 @@ import { uSubsAndSups, unicodeSubRegEx } from "./unicodeSupOrSub"
 import { asciiFromScript } from "./asciiFromScript"
 import SourceLocation from "./SourceLocation";
 import { Token } from "./Token";
-import { isDelimiter } from "./functions/delimsizing"
+import { isDelimiter } from "./functions/delimiter"
 
 // Pre-evaluate both modules as unicodeSymbols require String.normalize()
 import unicodeAccents from /*preval*/ "./unicodeAccents";
@@ -175,7 +175,7 @@ export default class Parser {
    * Parses an "expression", which is a list of atoms.
    *
    * `breakOnInfix`: Should the parsing stop when we hit infix nodes? This
-   *                 happens when functions have higher precedence han infix
+   *                 happens when functions have higher precedence than infix
    *                 nodes in implicit parses.
    *
    * `breakOnTokenText`: The text of the token that the expression should end
@@ -783,7 +783,7 @@ export default class Parser {
   ) {
     const firstToken = this.fetch();
     const text = firstToken.text;
-
+    if (name === "argument to '\\left'") { return this.parseSymbol() }
     let result;
     // Try to parse an open brace or \begingroup
     if (text === "{" || text === "\\begingroup" || text === "\\toggle") {
@@ -930,7 +930,8 @@ export default class Parser {
     let symbol;
     if (symbols[this.mode][text]) {
       let group = symbols[this.mode][text].group;
-      if (group === "bin" && binLeftCancellers.includes(this.prevAtomType)) {
+      if (group === "bin" &&
+        (binLeftCancellers.includes(this.prevAtomType) || this.prevAtomType === "")) {
         // Change from a binary operator to a unary (prefix) operator
         group = "open"
       }

package/src/Settings.js

@@ -30,6 +30,7 @@ export default class Settings {
       : [Infinity, Infinity]
     )
     this.maxExpand = Math.max(0, utils.deflt(options.maxExpand, 1000)); // number
+    this.wrapDelimiterPairs = true; // boolean
   }
 
   /**

package/src/environments/array.js

@@ -358,9 +358,9 @@ const mathmlBuilder = function(group, style) {
     }
     if (mustSquashRow) {
       // All the cell contents are \hphantom. Squash the cell.
+      // TODO: Remove the next line when Firefox no longer needs it.
+      mtr.classes.push("ff-squash") // necessary in Firefox only.
       for (let j = 0; j < mtr.children.length; j++) {
-        mtr.children[j].style.display = "block"  // necessary in Firefox only
-        mtr.children[j].style.height = "0"       // necessary in Firefox only
         mtr.children[j].style.paddingTop = "0"
         mtr.children[j].style.paddingBottom = "0"
       }

package/src/functions/bordermatrix.js

@@ -14,13 +14,11 @@ defineFunction({
   },
   handler: ({ parser, funcName }, args, optArgs) => {
     // Find out if the author has defined custom delimiters
-    let delimiters = ["(", ")"]
+    let delimiters = ["(", ")"]; // default
     if (funcName === "\\bordermatrix" && optArgs[0] && optArgs[0].body) {
       const body = optArgs[0].body
-      if (body.length === 2 && body[0].type === "atom" && body[1].type === "atom") {
-        if (body[0].family === "open" && body[1].family === "close") {
-          delimiters = [body[0].text, body[1].text]
-        }
+      if (body.length === 1 && body[0].type === "delimiter") {
+        delimiters = [body[0].left, body[0].right]
       }
     }
     // consume the opening brace

package/src/functions/cancelto.js

@@ -30,6 +30,7 @@ defineFunction({
     // That way, the arrow will be an overlay on the content.
     const phantom = new mathMLTree.MathNode("mphantom", [mml.buildGroup(group.body, style)])
     const arrow = new mathMLTree.MathNode("mrow", [phantom], ["tml-cancelto"])
+    arrow.style.color = style.color
     if (group.isCharacterBox && smalls.indexOf(group.body.body[0].text) > -1) {
       arrow.style.left = "0.1em"
       arrow.style.width = "90%"
@@ -61,6 +62,7 @@ defineFunction({
       dummyNode = new mathMLTree.MathNode("mphantom", [zeroWidthNode]) // Hide it.
     }
     const toNode = mml.buildGroup(group.to, style)
+    toNode.style.color = style.color
     const zeroWidthToNode = new mathMLTree.MathNode("mpadded", [toNode])
     if (!group.isCharacterBox || /[f∫∑]/.test(group.body.body[0].text)) {
       const w = new mathMLTree.MathNode("mspace", [])

package/src/functions/color.js

@@ -18,7 +18,7 @@ const toHex = num => {
 
 // Colors from Tables 4.1 and 4.2 of the xcolor package.
 // Table 4.1 (lower case) RGB values are taken from chroma and xcolor.dtx.
-// Table 4.2 (Capitalizzed) values were sampled, because Chroma contains a unreliable
+// Table 4.2 (Capitalized) values were sampled, because Chroma contains a unreliable
 // conversion from cmyk to RGB. See https://tex.stackexchange.com/a/537274.
 const xcolors = JSON.parse(`{
   "Apricot": "#ffb484",

package/src/functions/{delimsizing.js → delimiter.js}

@@ -26,7 +26,41 @@ export const delimiterSizes = {
   "\\Bigg": { mclass: "mord", size: 4 }
 };
 
-export const delimiters = [
+export const leftToRight = {
+  "(": ")",
+  "\\lparen": "\\rparen",
+  "[": "]",
+  "\\lbrack": "\\rbrack",
+  "\\{": "\\}",
+  "\\lbrace": "\\rbrace",
+  "⦇": "⦈",
+  "\\llparenthesis": "\\rrparenthesis",
+  "\\lfloor": "\\rfloor",
+  "\u230a": "\u230b",
+  "\\lceil": "\\rceil",
+  "\u2308": "\u2309",
+  "\\langle": "\\rangle",
+  "\u27e8": "\u27e9",
+  "\\lAngle": "\\rAngle",
+  "\u27ea": "\u27eb",
+  "\\llangle": "\\rrangle",
+  "⦉": "⦊",
+  "\\lvert": "\\rvert",
+  "\\lVert": "\\rVert",
+  "\\lgroup": "\\rgroup",
+  "\u27ee": "\u27ef",
+  "\\lmoustache": "\\rmoustache",
+  "\u23b0": "\u23b1",
+  "\\llbracket": "\\rrbracket",
+  "\u27e6": "\u27e7",
+  "\\lBrace": "\\rBrace",
+  "\u2983": "\u2984"
+};
+
+export const leftDelimiterNames = new Set(Object.keys(leftToRight));
+export const rightDelimiterNames = new Set(Object.values(leftToRight));
+
+const delimiters = new Set([
   "(",
   "\\lparen",
   ")",
@@ -82,7 +116,7 @@ export const delimiters = [
   "\\llbracket",
   "\\rrbracket",
   "\u27e6",
-  "\u27e6",
+  "\u27e7",
   "\\lBrace",
   "\\rBrace",
   "\u2983",
@@ -101,12 +135,12 @@ export const delimiters = [
   "\\updownarrow",
   "\\Updownarrow",
   "."
-];
+]);
 
 // Export isDelimiter for benefit of parser.
-const dels = ["}", "\\left", "\\middle", "\\right"]
+const dels = new Set(["}", "\\left", "\\middle", "\\right"]);
 export const isDelimiter = str => str.length > 0 &&
-  (delimiters.includes(str) || delimiterSizes[str] || dels.includes(str))
+  (delimiters.has(str) || delimiterSizes[str] || dels.has(str));
 
 // Metrics of the different sizes. Found by looking at TeX's output of
 // $\bigl| // \Bigl| \biggl| \Biggl| \showlists$
@@ -119,11 +153,11 @@ function checkDelimiter(delim, context) {
     delim = delim.body[0]; // Unwrap the braces
   }
   const symDelim = checkSymbolNodeType(delim)
-  if (symDelim && delimiters.includes(symDelim.text)) {
+  if (symDelim && delimiters.has(symDelim.text)) {
     // If a character is not in the MathML operator dictionary, it will not stretch.
     // Replace such characters w/characters that will stretch.
-    if (["<", "\\lt"].includes(symDelim.text)) { symDelim.text = "⟨" }
-    if ([">", "\\gt"].includes(symDelim.text)) { symDelim.text = "⟩" }
+    if (symDelim.text === "<" || symDelim.text === "\\lt") { symDelim.text = "⟨" }
+    if (symDelim.text === ">" || symDelim.text === "\\gt") { symDelim.text = "⟩" }
     return symDelim;
   } else if (symDelim) {
     throw new ParseError(`Invalid delimiter '${symDelim.text}' after '${context.funcName}'`, delim);
@@ -133,7 +167,16 @@ function checkDelimiter(delim, context) {
 }
 
 //                               /         \
-const needExplicitStretch = ["\u002F", "\u005C", "\\backslash", "\\vert", "|"];
+const needExplicitStretch = new Set(["\u002F", "\u005C", "\\backslash", "\u2216", "\\vert", "|"]);
+
+const makeFenceMo = (delim, mode, form, isStretchy) => {
+  const text = delim === "." ? "" : delim;
+  const node = new mathMLTree.MathNode("mo", [mml.makeText(text, mode)]);
+  node.setAttribute("fence", "true");
+  node.setAttribute("form", form);
+  node.setAttribute("stretchy", isStretchy ? "true" : "false");
+  return node;
+};
 
 defineFunction({
   type: "delimsizing",
@@ -184,9 +227,9 @@ defineFunction({
   },
   mathmlBuilder: (group) => {
     const children = [];
+    const delim = group.delim === "." ? "" : group.delim;
 
-    if (group.delim === ".") { group.delim = "" }
-    children.push(mml.makeText(group.delim, group.mode));
+    children.push(mml.makeText(delim, group.mode));
 
     const node = new mathMLTree.MathNode("mo", children);
 
@@ -199,7 +242,7 @@ defineFunction({
       // defaults.
       node.setAttribute("fence", "false");
     }
-    if (needExplicitStretch.includes(group.delim) || group.delim.indexOf("arrow") > -1) {
+    if (needExplicitStretch.has(delim) || delim.indexOf("arrow") > -1) {
       // We have to explicitly set stretchy to true.
       node.setAttribute("stretchy", "true")
     }
@@ -212,7 +255,7 @@ defineFunction({
 
 function assertParsed(group) {
   if (!group.body) {
-    throw new Error("Bug: The leftright ParseNode wasn't fully parsed.");
+    throw new Error("Bug: The delim ParseNode wasn't fully parsed.");
   }
 }
 
@@ -243,17 +286,10 @@ defineFunction({
     const delim = checkDelimiter(args[0], context);
 
     const parser = context.parser;
-    // Parse out the implicit body
     ++parser.leftrightDepth;
-    // parseExpression stops before '\\right' or `\\middle`
-    let body = parser.parseExpression(false, null, true)
+    let body = parser.parseExpression(false, "\\right", true)
     let nextToken = parser.fetch()
     while (nextToken.text === "\\middle") {
-      // `\middle`, from the ε-TeX package, ends one group and starts another group.
-      // We had to parse this expression with `breakOnMiddle` enabled in order
-      // to get TeX-compliant parsing of \over.
-      // But we do not want, at this point, to end on \middle, so continue
-      // to parse until we fetch a `\right`.
       parser.consume()
       const middle = parser.fetch().text
       if (!symbols.math[middle]) {
@@ -262,11 +298,10 @@ defineFunction({
       checkDelimiter({ type: "atom", mode: "math", text: middle }, { funcName: "\\middle" })
       body.push({ type: "middle", mode: "math", delim: middle })
       parser.consume()
-      body = body.concat(parser.parseExpression(false, null, true))
+      body = body.concat(parser.parseExpression(false, "\\right", true))
       nextToken = parser.fetch()
     }
     --parser.leftrightDepth;
-    // Check the next token
     parser.expect("\\right", false);
     const right = assertNodeType(parser.parseFunction(), "leftright-right");
     return {
@@ -274,39 +309,94 @@ defineFunction({
       mode: parser.mode,
       body,
       left: delim.text,
-      right: right.delim
+      right: right.delim,
+      isStretchy: true
     };
   },
   mathmlBuilder: (group, style) => {
     assertParsed(group);
     const inner = mml.buildExpression(group.body, style);
 
-    if (group.left === ".") { group.left = "" }
-    const leftNode = new mathMLTree.MathNode("mo", [mml.makeText(group.left, group.mode)]);
-    leftNode.setAttribute("fence", "true")
-    leftNode.setAttribute("form", "prefix")
-    if (group.left === "/" || group.left === "\u005C" || group.left.indexOf("arrow") > -1) {
-      leftNode.setAttribute("stretchy", "true")
+    const leftNode = makeFenceMo(group.left, group.mode, "prefix", true);
+    inner.unshift(leftNode);
+
+    const rightNode = makeFenceMo(group.right, group.mode, "postfix", true);
+    if (group.body.length > 0) {
+      const lastElement = group.body[group.body.length - 1];
+      if (lastElement.type === "color" && !lastElement.isTextColor) {
+        rightNode.setAttribute("mathcolor", lastElement.color);
+      }
+    }
+    inner.push(rightNode);
+
+    return mml.makeRow(inner);
+  }
+});
+
+defineFunction({
+  type: "delimiter",
+  names: Array.from(leftDelimiterNames),
+  props: {
+    numArgs: 0,
+    allowedInText: true,
+    allowedInMath: true,
+    allowedInArgument: true
+  },
+  handler: ({ parser, funcName, token }) => {
+    if (parser.mode === "text") {
+      return {
+        type: "textord",
+        mode: "text",
+        text: funcName,
+        loc: token.loc
+      }
+    } else if (!parser.settings.wrapDelimiterPairs) {
+      // Treat this token as an ordinary symbol.
+      return {
+        type: "atom",
+        mode: "math",
+        family: "open",
+        loc: token.loc,
+        text: funcName
+      };
     }
-    inner.unshift(leftNode)
+    // Otherwise, try to wrap a pair of delimiters with an <mrow>.
+    const rightDelim = leftToRight[funcName];
+    // Parse the inner expression, looking for the corresponding right delimiter.
+    const body = parser.parseExpression(false, rightDelim, false);
+    const nextToken = parser.fetch().text;
 
-    if (group.right === ".") { group.right = "" }
-    const rightNode = new mathMLTree.MathNode("mo", [mml.makeText(group.right, group.mode)]);
-    rightNode.setAttribute("fence", "true")
-    rightNode.setAttribute("form", "postfix")
-    if (group.right === "\u2216" || group.right.indexOf("arrow") > -1) {
-      rightNode.setAttribute("stretchy", "true")
+    if (nextToken !== rightDelim) {
+      // We were unable to find a matching right delimiter.
+      // Throw control back to renderToMathMLTree.
+      // It will reparse the entire expression with wrapDelimiterPairs set to false.
+      throw new ParseError("Unmatched delimiter");
     }
+    parser.consume();
+
+    return {
+      type: "delimiter",
+      mode: parser.mode,
+      body,
+      left: funcName,
+      right: rightDelim
+    };
+  },
+  mathmlBuilder: (group, style) => {
+    assertParsed(group);
+    const inner = mml.buildExpression(group.body, style);
+
+    const leftNode = makeFenceMo(group.left, group.mode, "prefix", false);
+    inner.unshift(leftNode);
+
+    const rightNode = makeFenceMo(group.right, group.mode, "postfix", false);
     if (group.body.length > 0) {
       const lastElement = group.body[group.body.length - 1];
       if (lastElement.type === "color" && !lastElement.isTextColor) {
-        // \color is a switch. If the last element is of type "color" then
-        // the user set the \color switch and left it on.
-        // A \right delimiter turns the switch off, but the delimiter itself gets the color.
         rightNode.setAttribute("mathcolor", lastElement.color);
       }
     }
-    inner.push(rightNode)
+    inner.push(rightNode);
 
     return mml.makeRow(inner);
   }
@@ -331,20 +421,17 @@ defineFunction({
       delim: delim.text
     };
   },
-  mathmlBuilder: (group, style) => {
+  mathmlBuilder: (group) => {
     const textNode = mml.makeText(group.delim, group.mode);
     const middleNode = new mathMLTree.MathNode("mo", [textNode]);
-    middleNode.setAttribute("fence", "true");
-    if (group.delim.indexOf("arrow") > -1) {
-      middleNode.setAttribute("stretchy", "true")
+    middleNode.setAttribute("stretchy", "true")
+    middleNode.setAttribute("form", "infix")
+    if (textNode.text !== "/") {
+      // MathML gives 5/18em spacing to each <mo> element.
+      // \middle should get delimiter spacing instead.
+      middleNode.setAttribute("lspace", "0.05em");
+      middleNode.setAttribute("rspace", "0.05em");
     }
-    // The next line is not semantically correct, but
-    // Chromium fails to stretch if it is not there.
-    middleNode.setAttribute("form", "prefix")
-    // MathML gives 5/18em spacing to each <mo> element.
-    // \middle should get delimiter spacing instead.
-    middleNode.setAttribute("lspace", "0.05em");
-    middleNode.setAttribute("rspace", "0.05em");
     return middleNode;
   }
 });

package/src/functions/enclose.js

@@ -32,7 +32,7 @@ const mathmlBuilder = (group, style) => {
       break
     case "\\xcancel":
       node.setAttribute("notation", "updiagonalstrike downdiagonalstrike")
-      node.classes.push("tml-xcancel")
+      node.children.push(new mathMLTree.MathNode("mrow", [], ["tml-cancel", "tml-xcancel"]))
       break
     // cancelto is handled in cancelto.js
     case "\\longdiv":
@@ -166,7 +166,7 @@ defineFunction({
 
 defineFunction({
   type: "enclose",
-  names: ["\\angl", "\\cancel", "\\bcancel", "\\xcancel", "\\sout", "\\overline",
+  names: ["\\angl", "\\cancel", "\\bcancel", "\\xcancel", "\\overline",
     "\\boxed", "\\longdiv", "\\phase"],
   props: {
     numArgs: 1
@@ -183,6 +183,25 @@ defineFunction({
   mathmlBuilder
 });
 
+defineFunction({
+  type: "enclose",
+  names: ["\\sout"],
+  props: {
+    numArgs: 1,
+    allowedInText: true
+  },
+  handler({ parser, funcName }, args) {
+    const body = args[0];
+    return {
+      type: "enclose",
+      mode: parser.mode,
+      label: funcName,
+      body
+    };
+  },
+  mathmlBuilder
+});
+
 defineFunction({
   type: "enclose",
   names: ["\\underline"],

package/src/functions/font.js

@@ -1,9 +1,13 @@
 import defineFunction, { normalizeArgument } from "../defineFunction"
 import * as mml from "../buildMathML"
 import * as mathMLTree from "../mathMLTree"
+import { variantChar } from "../replace"
+
+const varNameFonts = ["mathrm", "mathit"];
 
 const isLongVariableName = (group, font) => {
-  if (font !== "mathrm" || group.body.type !== "ordgroup" || group.body.body.length === 1) {
+  if (!varNameFonts.includes(font) || !group.body || group.body.type !== "ordgroup" ||
+      group.body.body.length === 1) {
     return false
   }
   if (group.body.body[0].type !== "mathord") { return false }
@@ -29,8 +33,7 @@ const mathmlBuilder = (group, style) => {
   }
   // Check if it is possible to consolidate elements into a single <mi> element.
   if (isLongVariableName(group, font)) {
-    // This is a \mathrm{…} group. It gets special treatment because symbolsOrd.js
-    // wraps <mi> elements with <mpadded>s to work around a Firefox bug.
+    // This is a \mathrm{…} or \mathit{…} group. It gets special treatment.
     const mi = mathGroup.children[0].children[0].children
       ? mathGroup.children[0].children[0]
       : mathGroup.children[0];
@@ -40,7 +43,14 @@ const mathmlBuilder = (group, style) => {
         ? mathGroup.children[i].children[0].children[0].text
         : mathGroup.children[i].children[0].text
     }
-    // Wrap in a <mpadded> to prevent the same Firefox bug.
+    if (font === "mathit") {
+      // Long <mi> elements are normally rendered in upright font.
+      // To get italic, we need to convert each character to the corresponding italic character.
+      mi.children[0].text = mi.children[0].text.split("")
+        .map(c => variantChar(c, "italic")).join("")
+      return mi
+    }
+    // Otherwise, font is "mathrm". Wrap in a <mpadded> to prevent a Firefox spacing bug.
     const mpadded = new mathMLTree.MathNode("mpadded", [mi])
     mpadded.setAttribute("lspace", "0")
     return mpadded

package/src/functions/genfrac.js

@@ -9,22 +9,37 @@ import { calculateSize } from "../units";
 const stylArray = ["display", "text", "script", "scriptscript"];
 const scriptLevel = { auto: -1, display: 0, text: 0, script: 1, scriptscript: 2 };
 
+const adjustStyle = (functionSize, originalStyle) => {
+  // Figure out what style this fraction should be in based on the
+  // function used
+  let style = originalStyle;
+  if (functionSize === "display") {  //\tfrac or \cfrac
+    // Get display style as a default.
+    // If incoming style is sub/sup, use style.text() to get correct size.
+    const newSize = style.level >= StyleLevel.SCRIPT ? StyleLevel.TEXT : StyleLevel.DISPLAY;
+    style = style.withLevel(newSize)
+  } else if (functionSize === "text" &&
+    style.level === StyleLevel.DISPLAY) {
+    // We're in a \tfrac but incoming style is displaystyle, so:
+    style = style.withLevel(StyleLevel.TEXT);
+  } else if (functionSize === "auto") {
+    style = style.incrementLevel()
+  } else if (functionSize === "script") {
+    style = style.withLevel(StyleLevel.SCRIPT);
+  } else if (functionSize === "scriptscript") {
+    style = style.withLevel(StyleLevel.SCRIPTSCRIPT)
+  }
+  return style;
+};
+
 const mathmlBuilder = (group, style) => {
-  // Track the scriptLevel of the numerator and denominator.
-  // We may need that info for \mathchoice or for adjusting em dimensions.
-  const childOptions = group.scriptLevel === "auto"
-    ? style.incrementLevel()
-    : group.scriptLevel === "display"
-    ? style.withLevel(StyleLevel.TEXT)
-    : group.scriptLevel === "text"
-    ? style.withLevel(StyleLevel.SCRIPT)
-    : style.withLevel(StyleLevel.SCRIPTSCRIPT);
+  style = adjustStyle(group.scriptLevel, style)
 
   // Chromium (wrongly) continues to shrink fractions beyond scriptscriptlevel.
   // So we check for levels that Chromium shrinks too small.
   // If necessary, set an explicit fraction depth.
-  const numer = mml.buildGroup(group.numer, childOptions)
-  const denom = mml.buildGroup(group.denom, childOptions)
+  const numer = mml.buildGroup(group.numer, style)
+  const denom = mml.buildGroup(group.denom, style)
   if (style.level === 3) {
     numer.style.mathDepth = "2"
     numer.setAttribute("scriptlevel", "2")
@@ -77,6 +92,7 @@ const mathmlBuilder = (group, style) => {
 defineFunction({
   type: "genfrac",
   names: [
+    "\\cfrac",
     "\\dfrac",
     "\\frac",
     "\\tfrac",
@@ -100,6 +116,7 @@ defineFunction({
     let scriptLevel = "auto";
 
     switch (funcName) {
+      case "\\cfrac":
       case "\\dfrac":
       case "\\frac":
       case "\\tfrac":
@@ -126,15 +143,10 @@ defineFunction({
         throw new Error("Unrecognized genfrac command");
     }
 
-    switch (funcName) {
-      case "\\dfrac":
-      case "\\dbinom":
-        scriptLevel = "display";
-        break;
-      case "\\tfrac":
-      case "\\tbinom":
-        scriptLevel = "text";
-        break;
+    if (funcName === "\\cfrac" || funcName.startsWith("\\d")) {
+      scriptLevel = "display";
+    } else if (funcName.startsWith("\\t")) {
+      scriptLevel = "text";
     }
 
     return {
@@ -153,31 +165,6 @@ defineFunction({
   mathmlBuilder
 });
 
-defineFunction({
-  type: "genfrac",
-  names: ["\\cfrac"],
-  props: {
-    numArgs: 2
-  },
-  handler: ({ parser, funcName }, args) => {
-    const numer = args[0];
-    const denom = args[1];
-
-    return {
-      type: "genfrac",
-      mode: parser.mode,
-      continued: true,
-      numer,
-      denom,
-      hasBarLine: true,
-      leftDelim: null,
-      rightDelim: null,
-      scriptLevel: "display",
-      barSize: null
-    };
-  }
-});
-
 // Infix generalized fractions -- these are not rendered directly, but replaced
 // immediately by one of the variants above.
 defineFunction({