temml 0.10.14 → 0.10.16

package/dist/temml.js

@@ -479,7 +479,7 @@ var temml = (function () {
     }
   }
 
-  /**
+  /*
    * This node represents an image embed (<img>) element.
    */
   class Img {
@@ -524,7 +524,7 @@ var temml = (function () {
         markup += ` style="${utils.escape(styles)}"`;
       }
 
-      markup += "/>";
+      markup += ">";
       return markup;
     }
   }
@@ -700,6 +700,34 @@ var temml = (function () {
    * 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: "ˇ",
@@ -757,8 +785,27 @@ var temml = (function () {
     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
   };
 
   /**
@@ -974,6 +1021,10 @@ var temml = (function () {
   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);
@@ -1052,6 +1103,8 @@ var temml = (function () {
   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");
@@ -1255,6 +1308,9 @@ var temml = (function () {
   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);
@@ -1434,7 +1490,8 @@ var temml = (function () {
   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);
@@ -1665,6 +1722,8 @@ var temml = (function () {
     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 = "ÇÐÞçþℂℍℕℙℚℝℤℎℏℊℋℌℐℑℒℓ℘ℛℜℬℰℱℳℭℨ";
@@ -2132,9 +2191,7 @@ var temml = (function () {
     }
     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"];
@@ -2144,7 +2201,7 @@ var temml = (function () {
 
   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") {
@@ -2164,25 +2221,21 @@ var temml = (function () {
     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({
@@ -2220,7 +2273,7 @@ var temml = (function () {
     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",
@@ -2258,7 +2311,6 @@ var temml = (function () {
         mode: mode,
         label: context.funcName,
         isStretchy: false,
-        isShifty: true,
         base: base
       };
     },
@@ -2288,7 +2340,7 @@ var temml = (function () {
       };
     },
     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),
@@ -3825,10 +3877,20 @@ var temml = (function () {
         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":
@@ -3872,7 +3934,18 @@ var temml = (function () {
         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) {
@@ -4303,24 +4376,98 @@ var temml = (function () {
       // 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")) {
@@ -4400,6 +4547,8 @@ var temml = (function () {
       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());
     }
 
@@ -4424,7 +4573,7 @@ var temml = (function () {
         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
       },
@@ -4442,18 +4591,22 @@ var temml = (function () {
     // 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) {
@@ -4481,14 +4634,10 @@ var temml = (function () {
         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;
   };
@@ -4738,7 +4887,7 @@ var temml = (function () {
       }
       const res = {
         cols: [],
-        envClasses: ["jot", "abut"],
+        envClasses: ["abut", "jot"],
         addEqnNum: context.envName === "gather",
         emptySingleRow: true,
         leqno: context.parser.settings.leqno
@@ -7237,7 +7386,14 @@ var temml = (function () {
       }
 
       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;
@@ -7703,6 +7859,8 @@ var temml = (function () {
 
   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]);
@@ -7770,7 +7928,7 @@ var temml = (function () {
           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");
@@ -8424,6 +8582,9 @@ var temml = (function () {
   // 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.
@@ -10804,7 +10965,6 @@ var temml = (function () {
             loc: SourceLocation.range(nucleus),
             label: command,
             isStretchy: false,
-            isShifty: true,
             base: symbol
           };
         }
@@ -11002,7 +11162,7 @@ var temml = (function () {
    * https://mit-license.org/
    */
 
-  const version = "0.10.14";
+  const version = "0.10.16";
 
   function postProcess(block) {
     const labelMap = {};
@@ -11053,6 +11213,7 @@ var temml = (function () {
   /* eslint no-console:0 */
 
   /**
+   * @type {import('./temml').render}
    * Parse and build an expression, and place that expression in the DOM node
    * given.
    */
@@ -11090,6 +11251,7 @@ var temml = (function () {
   }
 
   /**
+   * @type {import('./temml').renderToString}
    * Parse and build an expression, and return the markup for that.
    */
   const renderToString = function(expression, options) {
@@ -11098,6 +11260,7 @@ var temml = (function () {
   };
 
   /**
+   * @type {import('./temml').generateParseTree}
    * Parse an expression and return the parse tree.
    */
   const generateParseTree = function(expression, options) {
@@ -11106,6 +11269,7 @@ var temml = (function () {
   };
 
   /**
+   * @type {import('./temml').definePreamble}
    * Take an expression which contains a preamble.
    * Parse it and return the macros.
    */
@@ -11138,6 +11302,7 @@ var temml = (function () {
   };
 
   /**
+   * @type {import('./temml').renderToMathMLTree}
    * Generates and returns the Temml build tree. This is used for advanced
    * use cases (like rendering to custom output).
    */
@@ -11155,6 +11320,7 @@ var temml = (function () {
     }
   };
 
+  /** @type {import('./temml').default} */
   var temml = {
     /**
      * Current Temml version