temml 0.10.14 → 0.10.16

package/dist/temml.mjs

@@ -476,7 +476,7 @@ class TextNode$1 {
   }
 }
 
-/**
+/*
  * This node represents an image embed (<img>) element.
  */
 class Img {
@@ -521,7 +521,7 @@ class Img {
       markup += ` style="${utils.escape(styles)}"`;
     }
 
-    markup += "/>";
+    markup += ">";
     return markup;
   }
 }
@@ -697,6 +697,34 @@ var mathMLTree = {
  * This file provides support for building horizontal stretchy elements.
  */
 
+// TODO: Remove when Chromium stretches \widetilde & \widehat
+const estimatedWidth = node => {
+  let width = 0;
+  if (node.body) {
+    for (const item of node.body) {
+      width += estimatedWidth(item);
+    }
+  } else if (node.type === "supsub") {
+    width += estimatedWidth(node.base);
+    if (node.sub) { width += 0.7 * estimatedWidth(node.sub); }
+    if (node.sup) { width += 0.7 * estimatedWidth(node.sup); }
+  } else if (node.type === "mathord" || node.type === "textord") {
+    for (const ch of node.text.split('')) {
+      const codePoint = ch.codePointAt(0);
+      if ((0x60 < codePoint && codePoint < 0x7B) || (0x03B0 < codePoint && codePoint < 0x3CA)) {
+        width += 0.56; // lower case latin or greek. Use advance width of letter n
+      } else if (0x2F < codePoint && codePoint < 0x3A) {
+        width += 0.50; // numerals.
+      } else {
+        width += 0.92; // advance width of letter M
+      }
+    }
+  } else {
+    width += 1.0;
+  }
+  return width
+};
+
 const stretchyCodePoint = {
   widehat: "^",
   widecheck: "ˇ",
@@ -754,8 +782,27 @@ const mathMLnode = function(label) {
   return node
 };
 
+const crookedWides = ["\\widetilde", "\\widehat", "\\widecheck", "\\utilde"];
+
+// TODO: Remove when Chromium stretches \widetilde & \widehat
+const accentNode = (group) => {
+  const mo = mathMLnode(group.label);
+  if (crookedWides.includes(group.label)) {
+    const width = estimatedWidth(group.base);
+    if (1 < width && width < 1.6) {
+      mo.classes.push("tml-crooked-2");
+    } else if (1.6 <= width && width < 2.5) {
+      mo.classes.push("tml-crooked-3");
+    } else if (2.5 <= width) {
+      mo.classes.push("tml-crooked-4");
+    }
+  }
+  return mo
+};
+
 var stretchy = {
-  mathMLnode
+  mathMLnode,
+  accentNode
 };
 
 /**
@@ -971,6 +1018,10 @@ defineSymbol(math, mathord, "\u21af", "\\lightning", true);
 defineSymbol(math, mathord, "\u220E", "\\QED", true);
 defineSymbol(math, mathord, "\u2030", "\\permil", true);
 defineSymbol(text, textord, "\u2030", "\\permil");
+defineSymbol(math, mathord, "\u2609", "\\astrosun", true);
+defineSymbol(math, mathord, "\u263c", "\\sun", true);
+defineSymbol(math, mathord, "\u263e", "\\leftmoon", true);
+defineSymbol(math, mathord, "\u263d", "\\rightmoon", true);
 
 // AMS Negated Binary Relations
 defineSymbol(math, rel, "\u226e", "\\nless", true);
@@ -1049,6 +1100,8 @@ defineSymbol(math, textord, "\u2127", "\\mho");
 defineSymbol(math, textord, "\u2132", "\\Finv", true);
 defineSymbol(math, textord, "\u2141", "\\Game", true);
 defineSymbol(math, textord, "\u2035", "\\backprime");
+defineSymbol(math, textord, "\u2036", "\\backdprime");
+defineSymbol(math, textord, "\u2037", "\\backtrprime");
 defineSymbol(math, textord, "\u25b2", "\\blacktriangle");
 defineSymbol(math, textord, "\u25bc", "\\blacktriangledown");
 defineSymbol(math, textord, "\u25a0", "\\blacksquare");
@@ -1252,6 +1305,9 @@ defineSymbol(text, textord, "\u2423", "\\textvisiblespace", true);
 defineSymbol(math, textord, "\u2220", "\\angle", true);
 defineSymbol(math, textord, "\u221e", "\\infty", true);
 defineSymbol(math, textord, "\u2032", "\\prime");
+defineSymbol(math, textord, "\u2033", "\\dprime");
+defineSymbol(math, textord, "\u2034", "\\trprime");
+defineSymbol(math, textord, "\u2057", "\\qprime");
 defineSymbol(math, textord, "\u25b3", "\\triangle");
 defineSymbol(text, textord, "\u0391", "\\Alpha", true);
 defineSymbol(text, textord, "\u0392", "\\Beta", true);
@@ -1431,7 +1487,8 @@ defineSymbol(math, punct, ";", ";");
 defineSymbol(math, bin, "\u22bc", "\\barwedge", true);
 defineSymbol(math, bin, "\u22bb", "\\veebar", true);
 defineSymbol(math, bin, "\u2299", "\\odot", true);
-defineSymbol(math, bin, "\u2295", "\\oplus", true);
+// Firefox turns ⊕ into an emoji. So append \uFE0E. Define Unicode character in macros, not here.
+defineSymbol(math, bin, "\u2295\uFE0E", "\\oplus");
 defineSymbol(math, bin, "\u2297", "\\otimes", true);
 defineSymbol(math, textord, "\u2202", "\\partial", true);
 defineSymbol(math, bin, "\u2298", "\\oslash", true);
@@ -1662,6 +1719,8 @@ for (let i = 0; i < letters.length; i++) {
   defineSymbol(math, mathord, ch, ch);
   defineSymbol(text, textord, ch, ch);
 }
+// Prevent Firefox from using a dotless i.
+defineSymbol(text, textord, "i\uFE0E", "i");
 
 // Some more letters in Unicode Basic Multilingual Plane.
 const narrow = "ÇÐÞçþℂℍℕℙℚℝℤℎℏℊℋℌℐℑℒℓ℘ℛℜℬℰℱℳℭℨ";
@@ -2129,9 +2188,7 @@ function buildMathML(tree, texExpression, style, settings) {
   }
   if (settings.displayMode) {
     math.setAttribute("display", "block");
-    math.style.display = math.children.length === 1 && math.children[0].type === "mtable"
-      ? "inline"
-      : "block math"; // necessary in Chromium.
+    math.style.display = "block math"; // necessary in Chromium.
     // Firefox and Safari do not recognize display: "block math".
     // Set a class so that the CSS file can set display: block.
     math.classes = ["tml-display"];
@@ -2141,7 +2198,7 @@ function buildMathML(tree, texExpression, style, settings) {
 
 const mathmlBuilder$a = (group, style) => {
   const accentNode = group.isStretchy
-    ? stretchy.mathMLnode(group.label)
+    ? stretchy.accentNode(group)
     : new mathMLTree.MathNode("mo", [makeText(group.label, group.mode)]);
 
   if (group.label === "\\vec") {
@@ -2161,25 +2218,21 @@ const mathmlBuilder$a = (group, style) => {
   return node;
 };
 
-const NON_STRETCHY_ACCENT_REGEX = new RegExp(
-  [
-    "\\acute",
-    "\\grave",
-    "\\ddot",
-    "\\dddot",
-    "\\ddddot",
-    "\\tilde",
-    "\\bar",
-    "\\breve",
-    "\\check",
-    "\\hat",
-    "\\vec",
-    "\\dot",
-    "\\mathring"
-  ]
-    .map((accent) => `\\${accent}`)
-    .join("|")
-);
+const nonStretchyAccents = new Set([
+  "\\acute",
+  "\\grave",
+  "\\ddot",
+  "\\dddot",
+  "\\ddddot",
+  "\\tilde",
+  "\\bar",
+  "\\breve",
+  "\\check",
+  "\\hat",
+  "\\vec",
+  "\\dot",
+  "\\mathring"
+]);
 
 // Accents
 defineFunction({
@@ -2217,7 +2270,7 @@ defineFunction({
   handler: (context, args) => {
     const base = normalizeArgument(args[0]);
 
-    const isStretchy = !NON_STRETCHY_ACCENT_REGEX.test(context.funcName);
+    const isStretchy = !nonStretchyAccents.has(context.funcName);
 
     return {
       type: "accent",
@@ -2255,7 +2308,6 @@ defineFunction({
       mode: mode,
       label: context.funcName,
       isStretchy: false,
-      isShifty: true,
       base: base
     };
   },
@@ -2285,7 +2337,7 @@ defineFunction({
     };
   },
   mathmlBuilder: (group, style) => {
-    const accentNode = stretchy.mathMLnode(group.label);
+    const accentNode = stretchy.accentNode(group);
     accentNode.style["math-depth"] = 0;
     const node = new mathMLTree.MathNode("munder", [
       buildGroup$1(group.base, style),
@@ -3822,10 +3874,20 @@ const mathmlBuilder$8 = (group, style) => {
       node.style.borderBottom = "0.065em solid";
       break
     case "\\cancel":
-      node.classes.push("cancel");
+      node.style.background = `linear-gradient(to top left,
+rgba(0,0,0,0) 0%,
+rgba(0,0,0,0) calc(50% - 0.06em),
+rgba(0,0,0,1) 50%,
+rgba(0,0,0,0) calc(50% + 0.06em),
+rgba(0,0,0,0) 100%);`;
       break
     case "\\bcancel":
-      node.classes.push("bcancel");
+      node.style.background = `linear-gradient(to top right,
+rgba(0,0,0,0) 0%,
+rgba(0,0,0,0) calc(50% - 0.06em),
+rgba(0,0,0,1) 50%,
+rgba(0,0,0,0) calc(50% + 0.06em),
+rgba(0,0,0,0) 100%);`;
       break
     /*
     case "\\longdiv":
@@ -3869,7 +3931,18 @@ const mathmlBuilder$8 = (group, style) => {
       break
     }
     case "\\xcancel":
-      node.classes.push("xcancel");
+      node.style.background = `linear-gradient(to top left,
+rgba(0,0,0,0) 0%,
+rgba(0,0,0,0) calc(50% - 0.06em),
+rgba(0,0,0,1) 50%,
+rgba(0,0,0,0) calc(50% + 0.06em),
+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.06em),
+rgba(0,0,0,1) 50%,
+rgba(0,0,0,0) calc(50% + 0.06em),
+rgba(0,0,0,0) 100%);`;
       break
   }
   if (group.backgroundColor) {
@@ -4300,24 +4373,98 @@ const mathmlBuilder$7 = function(group, style) {
     // Write horizontal rules
     if (i === 0 && hlines[0].length > 0) {
       if (hlines[0].length === 2) {
-        mtr.classes.push("tml-top-double");
+        mtr.children.forEach(cell => { cell.style.borderTop = "0.15em double"; });
       } else {
-        mtr.classes.push(hlines[0][0] ? "tml-top-dashed" : "tml-top-solid");
+        mtr.children.forEach(cell => {
+          cell.style.borderTop = hlines[0][0] ? "0.06em dashed" : "0.06em solid";
+        });
       }
     }
     if (hlines[i + 1].length > 0) {
       if (hlines[i + 1].length === 2) {
-        mtr.classes.push("tml-hline-double");
+        mtr.children.forEach(cell => { cell.style.borderBottom = "0.15em double"; });
       } else {
-        mtr.classes.push(hlines[i + 1][0] ? "tml-hline-dashed" : "tml-hline-solid");
+        mtr.children.forEach(cell => {
+          cell.style.borderBottom = hlines[i + 1][0] ? "0.06em dashed" : "0.06em solid";
+        });
       }
     }
     tbl.push(mtr);
   }
-  let table = new mathMLTree.MathNode("mtable", tbl);
+
   if (group.envClasses.length > 0) {
-    table.classes = group.envClasses.map(e => "tml-" + e);
+    const pad = group.envClasses.includes("jot")
+      ? "0.7" // 0.5ex + 0.09em top & bot padding
+      : group.envClasses.includes("small")
+      ? "0.35"
+      : "0.5"; // 0.5ex default top & bot padding
+    const sidePadding = group.envClasses.includes("abut")
+      ? "0"
+      : group.envClasses.includes("cases")
+      ? "0"
+      : group.envClasses.includes("small")
+      ? "0.1389"
+      : group.envClasses.includes("cd")
+      ? "0.25"
+      : "0.4"; // default side padding
+
+    const numCols = tbl.length === 0 ? 0 : tbl[0].children.length;
+
+    const sidePad = (j, hand) => {
+      if (j === 0 && hand === 0) { return "0" }
+      if (j === numCols - 1 && hand === 1) { return "0" }
+      if (group.envClasses[0] !== "align") { return sidePadding }
+      if (hand === 1) { return "0" }
+      if (group.addEqnNum) {
+        return (j % 2) ? "1" : "0"
+      } else {
+        return (j % 2) ? "0" : "1"
+      }
+    };
+
+    // Padding
+    for (let i = 0; i < tbl.length; i++) {
+      for (let j = 0; j < tbl[i].children.length; j++) {
+        tbl[i].children[j].style.padding = `${pad}ex ${sidePad(j, 1)}em ${pad}ex ${sidePad(j, 0)}em`;
+      }
+    }
+
+    // Justification
+    const align = group.envClasses.includes("align") || group.envClasses.includes("alignat");
+    for (let i = 0; i < tbl.length; i++) {
+      const row = tbl[i];
+      if (align) {
+        for (let j = 0; j < row.children.length; j++) {
+          // Chromium does not recognize text-align: left. Use -webkit-
+          // TODO: Remove -webkit- when Chromium no longer needs it.
+          row.children[j].style.textAlign = "-webkit-" + (j % 2 ? "left" : "right");
+        }
+        if (group.addEqnNum) {
+          const k = group.leqno ? 0 : row.children.length - 1;
+          row.children[k].style.textAlign = "-webkit-" + (group.leqno ? "left" : "right");
+        }
+      }
+      if (row.children.length > 1 && group.envClasses.includes("cases")) {
+        row.children[1].style.padding = row.children[1].style.padding.replace(/0em$/, "1em");
+      }
+
+      if (group.envClasses.includes("cases") || group.envClasses.includes("subarray")) {
+        for (const cell of row.children) {
+          cell.style.textAlign = "-webkit-" + "left";
+        }
+      }
+    }
+  } else {
+    // Set zero padding on side of the matrix
+    for (let i = 0; i < tbl.length; i++) {
+      tbl[i].children[0].style.paddingLeft = "0em";
+      if (tbl[i].children.length === tbl[0].children.length) {
+        tbl[i].children[tbl[i].children.length - 1].style.paddingRight = "0em";
+      }
+    }
   }
+
+  let table = new mathMLTree.MathNode("mtable", tbl);
   if (group.scriptLevel === "display") { table.setAttribute("displaystyle", "true"); }
 
   if (group.addEqnNum || group.envClasses.includes("multline")) {
@@ -4397,6 +4544,8 @@ const mathmlBuilder$7 = function(group, style) {
     align = "left " + (align.length > 0 ? align : "center ") + "right ";
   }
   if (align) {
+    // Firefox reads this attribute, not the -webkit-left|right written above.
+    // TODO: When Chrome no longer needs "-webkit-", use CSS and delete the next line.
     table.setAttribute("columnalign", align.trim());
   }
 
@@ -4421,7 +4570,7 @@ const alignedHandler = function(context, args) {
       cols,
       addEqnNum: context.envName === "align" || context.envName === "alignat",
       emptySingleRow: true,
-      envClasses: ["jot", "abut"], // set row spacing & provisional column spacing
+      envClasses: ["abut", "jot"], // set row spacing & provisional column spacing
       maxNumCols: context.envName === "split" ? 2 : undefined,
       leqno: context.parser.settings.leqno
     },
@@ -4439,18 +4588,22 @@ const alignedHandler = function(context, args) {
   // binary.  This behavior is implemented in amsmath's \start@aligned.
   let numMaths;
   let numCols = 0;
-  if (args[0] && args[0].type === "ordgroup") {
+  const isAlignedAt = context.envName.indexOf("at") > -1;
+  if (args[0] && isAlignedAt) {
+    // alignat environment takes an argument w/ number of columns
     let arg0 = "";
     for (let i = 0; i < args[0].body.length; i++) {
       const textord = assertNodeType(args[0].body[i], "textord");
       arg0 += textord.text;
     }
+    if (isNaN(arg0)) {
+      throw new ParseError("The alignat enviroment requires a numeric first argument.")
+    }
     numMaths = Number(arg0);
     numCols = numMaths * 2;
   }
-  const isAligned = !numCols;
   res.body.forEach(function(row) {
-    if (!isAligned) {
+    if (isAlignedAt) {
       // Case 1
       const curMaths = row.length / 2;
       if (numMaths < curMaths) {
@@ -4478,14 +4631,10 @@ const alignedHandler = function(context, args) {
       align: align
     };
   }
-  if (context.envName === "split") ; else if (context.envName.indexOf("ed") > -1) {
-    res.envClasses.push("aligned"); // Sets justification
-  } else if (isAligned) {
-    res.envClasses[1] = context.envName === "align*"
-      ? "align-star"
-      : "align"; // Sets column spacing & justification
+  if (context.envName === "split") ; else if (isAlignedAt) {
+    res.envClasses.push("alignat"); // Sets justification
   } else {
-    res.envClasses.push("aligned"); // Sets justification
+    res.envClasses[0] = "align"; // Sets column spacing & justification
   }
   return res;
 };
@@ -4735,7 +4884,7 @@ defineEnvironment({
     }
     const res = {
       cols: [],
-      envClasses: ["jot", "abut"],
+      envClasses: ["abut", "jot"],
       addEqnNum: context.envName === "gather",
       emptySingleRow: true,
       leqno: context.parser.settings.leqno
@@ -7234,7 +7383,14 @@ defineFunctionBuilders({
     }
 
     if (group.sup) {
-      children.push(buildGroup$1(group.sup, childStyle));
+      const sup = buildGroup$1(group.sup, childStyle);
+      const testNode = sup.type === "mrow" ? sup.children[0] : sup;
+      if ((testNode.type === "mo" && testNode.classes.includes("tml-prime"))
+        && group.base && group.base.text && group.base.text === "f") {
+        // Chromium does not address italic correction on prime. Prevent f′ from overlapping.
+        testNode.classes.push("prime-pad");
+      }
+      children.push(sup);
     }
 
     let nodeType;
@@ -7700,6 +7856,8 @@ const smallCaps = Object.freeze({
 
 const numberRegEx = /^\d(?:[\d,.]*\d)?$/;
 const latinRegEx = /[A-Ba-z]/;
+const primes = new Set(["\\prime", "\\dprime", "\\trprime", "\\qprime",
+  "\\backprime", "\\backdprime", "\\backtrprime"]);
 
 const italicNumber = (text, variant, tag) => {
   const mn = new mathMLTree.MathNode(tag, [text]);
@@ -7767,7 +7925,7 @@ defineFunctionBuilders({
         text.text = variantChar(text.text, variant);
       }
       node = new mathMLTree.MathNode("mtext", [text]);
-    } else if (group.text === "\\prime") {
+    } else if (primes.has(group.text)) {
       node = new mathMLTree.MathNode("mo", [text]);
       // TODO: If/when Chromium uses ssty variant for prime, remove the next line.
       node.classes.push("tml-prime");
@@ -8421,6 +8579,9 @@ defineMacro("\\char", function(context) {
 // This macro provides a better rendering.
 defineMacro("\\surd", '\\sqrt{\\vphantom{|}}');
 
+// See comment for \oplus in symbols.js.
+defineMacro("\u2295", "\\oplus");
+
 defineMacro("\\hbox", "\\text{#1}");
 
 // Per TeXbook p.122, "/" gets zero operator spacing.
@@ -12701,7 +12862,6 @@ class Parser {
           loc: SourceLocation.range(nucleus),
           label: command,
           isStretchy: false,
-          isShifty: true,
           base: symbol
         };
       }
@@ -12899,7 +13059,7 @@ class Style {
  * https://mit-license.org/
  */
 
-const version = "0.10.14";
+const version = "0.10.16";
 
 function postProcess(block) {
   const labelMap = {};
@@ -12950,6 +13110,7 @@ function postProcess(block) {
 /* eslint no-console:0 */
 
 /**
+ * @type {import('./temml').render}
  * Parse and build an expression, and place that expression in the DOM node
  * given.
  */
@@ -12987,6 +13148,7 @@ if (typeof document !== "undefined") {
 }
 
 /**
+ * @type {import('./temml').renderToString}
  * Parse and build an expression, and return the markup for that.
  */
 const renderToString = function(expression, options) {
@@ -12995,6 +13157,7 @@ const renderToString = function(expression, options) {
 };
 
 /**
+ * @type {import('./temml').generateParseTree}
  * Parse an expression and return the parse tree.
  */
 const generateParseTree = function(expression, options) {
@@ -13003,6 +13166,7 @@ const generateParseTree = function(expression, options) {
 };
 
 /**
+ * @type {import('./temml').definePreamble}
  * Take an expression which contains a preamble.
  * Parse it and return the macros.
  */
@@ -13035,6 +13199,7 @@ const renderError = function(error, expression, options) {
 };
 
 /**
+ * @type {import('./temml').renderToMathMLTree}
  * Generates and returns the Temml build tree. This is used for advanced
  * use cases (like rendering to custom output).
  */
@@ -13052,6 +13217,7 @@ const renderToMathMLTree = function(expression, options) {
   }
 };
 
+/** @type {import('./temml').default} */
 var temml = {
   /**
    * Current Temml version

package/dist/temmlPostProcess.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "temml",
-  "version": "0.10.14",
+  "version": "0.10.16",
   "description": "TeX to MathML conversion in JavaScript.",
   "main": "dist/temml.js",
   "engines": {
@@ -8,7 +8,9 @@
   },
   "exports": {
     ".": {
-      "require": "./dist/temml.cjs"
+      "require": "./dist/temml.cjs",
+      "import": "./dist/temml.mjs",
+      "types": "./dist/temml.d.ts"
     },
     "./*": "./*"
   },

package/src/Parser.js

@@ -972,7 +972,6 @@ export default class Parser {
           loc: SourceLocation.range(nucleus),
           label: command,
           isStretchy: false,
-          isShifty: true,
           base: symbol
         };
       }

package/src/buildMathML.js

@@ -260,9 +260,7 @@ export default function buildMathML(tree, texExpression, style, settings) {
   }
   if (settings.displayMode) {
     math.setAttribute("display", "block");
-    math.style.display = math.children.length === 1 && math.children[0].type === "mtable"
-      ? "inline"
-      : "block math" // necessary in Chromium.
+    math.style.display = "block math" // necessary in Chromium.
     // Firefox and Safari do not recognize display: "block math".
     // Set a class so that the CSS file can set display: block.
     math.classes = ["tml-display"]

package/src/domTree.js

@@ -134,7 +134,7 @@ export class TextNode {
   }
 }
 
-/**
+/*
  * This node represents an image embed (<img>) element.
  */
 export class Img {
@@ -179,7 +179,7 @@ export class Img {
       markup += ` style="${utils.escape(styles)}"`;
     }
 
-    markup += "/>";
+    markup += ">";
     return markup;
   }
 }