temml 0.10.2 → 0.10.4

package/README.md

@@ -7,11 +7,10 @@
 | KaTeX         |         280 KB            |
 | TeXZilla      |         168 KB            |
 
-As a futher advantage, Temml can use local system fonts. The minimum Temml installation serves a font file that is only 12kb.
+As a futher advantage, Temml can use local system fonts. The minimum Temml installation serves a font file that is only 12kb. Sadly, Chromium has some rendering bugs when using system fonts. It
+work better with the Latin Modern font, a 380 KB file.
 
-Chromium will support MathML in release 109 [early in 2023](https://chromiumdash.appspot.com/schedule), At that point, all the major browsers will support MathML and Temml will become the most lightweight way to render math in a browser.
-
-Temml’s coverage of LaTeX functions is as good as MathJax, slightly better than KaTeX 0.13.0 and substantially better than TeXZilla. See a [detailed coverage comparison](https://temml.org/docs/en/comparison.html).
+Temml’s coverage of LaTeX functions is as good as MathJax, slightly better than KaTeX 0.16.0 and substantially better than TeXZilla. See a [detailed coverage comparison](https://temml.org/docs/en/comparison.html).
 
 Temml's test suite includes many rendered examples, including the Temml [supported functions page](https://temml.org/docs/en/supported.html) and tests from [Mozilla](https://temml.org/tests/mozilla-tests.html), [Wikipedia](https://temml.org/tests/wiki-tests.html), [mhchem](https://temml.org/tests/mhchem-tests.html), and [LaTeXML](https://temml.org/tests/LaTeXML-tests.html).
 

package/dist/Temml-Asana.css

@@ -35,7 +35,7 @@ mtext {
 }
 
 math {
-  font-family: Asana Math;
+  font-family: Asana Math, math;
 }
 
 *.mathcal,
@@ -43,6 +43,22 @@ mo.tml-prime {
   font-feature-settings: 'salt';
 }
 
+/* flex-wrap for line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+math > mrow {
+  padding: 0.5ex 0ex;
+}
+
+/* Avoid flex-wrap in Firefox */
+@supports (-moz-appearance:meterbar) and (display:flex) {
+  math { display: inline; }
+  math > mrow { padding: 0 }
+}
+
 /* AMS environment auto-numbering via CSS counter. */
 .tml-eqn::before {
   counter-increment: tmlEqnNo;

package/dist/Temml-Latin-Modern.css

@@ -40,12 +40,8 @@ math * {
   border-color: currentColor;
 }
 
-.latin-modern math {
-  font-family: "Latin Modern Math", "Times New Roman", math;
-}
-
 math {
-  font-family: Latin Modern Math;
+  font-family: "Latin Modern Math", "Times New Roman", math;
 }
 
 *.mathscr {
@@ -56,6 +52,22 @@ mo.tml-prime {
   font-family: Temml;
 }
 
+/* flex-wrap for line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+math > mrow {
+  padding: 0.5ex 0ex;
+}
+
+/* Avoid flex-wrap in Firefox */
+@supports (-moz-appearance:meterbar) and (display:flex) {
+  math { display: inline; }
+  math > mrow { padding: 0 }
+}
+
 /* AMS environment auto-numbering via CSS counter. */
 .tml-eqn::before {
   counter-increment: tmlEqnNo;

package/dist/Temml-Libertinus.css

@@ -38,12 +38,8 @@ math * {
   border-color: currentColor;
 }
 
-.libertinus math {
-  font-family: "Libertinus Math", "Times New Roman", math;
-}
-
 math {
-  font-family: Libertinus Math;
+  font-family: Libertinus Math, math;
 }
 
 *.mathcal {
@@ -54,6 +50,22 @@ mo.tml-prime {
   font-feature-settings: 'ssty';
 }
 
+/* flex-wrap for line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+math > mrow {
+  padding: 0.5ex 0ex;
+}
+
+/* Avoid flex-wrap in Firefox */
+@supports (-moz-appearance:meterbar) and (display:flex) {
+  math { display: inline; }
+  math > mrow { padding: 0 }
+}
+
 /* AMS environment auto-numbering via CSS counter. */
 .tml-eqn::before {
   counter-increment: tmlEqnNo;

package/dist/Temml-Local.css

@@ -36,6 +36,22 @@ mo.tml-prime {
   font-family: Temml;
 }
 
+/* flex-wrap for line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+math > mrow {
+  padding: 0.5ex 0ex;
+}
+
+/* Avoid flex-wrap in Firefox */
+@supports (-moz-appearance:meterbar) and (display:flex) {
+  math { display: inline; }
+  math > mrow { padding: 0 }
+}
+
 /* AMS environment auto-numbering via CSS counter. */
 .tml-eqn::before {
   counter-increment: tmlEqnNo;

package/dist/Temml-STIX2.css

@@ -44,6 +44,22 @@ mo.tml-prime {
   font-feature-settings: 'ss04';
 }
 
+/* flex-wrap for line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+math > mrow {
+  padding: 0.5ex 0ex;
+}
+
+/* Avoid flex-wrap in Firefox */
+@supports (-moz-appearance:meterbar) and (display:flex) {
+  math { display: inline; }
+  math > mrow { padding: 0 }
+}
+
 /* AMS environment auto-numbering via CSS counter. */
 .tml-eqn::before {
   counter-increment: tmlEqnNo;

package/dist/temml.cjs

@@ -190,7 +190,7 @@ class Settings {
     this.leqno = utils.deflt(options.leqno, false);                // boolean
     this.errorColor = utils.deflt(options.errorColor, "#b22222");  // string
     this.macros = options.macros || {};
-    this.wrap = utils.deflt(options.wrap, "none");         // "none" | "tex" | "="
+    this.wrap = utils.deflt(options.wrap, "tex");                    // "tex" | "="
     this.xml = utils.deflt(options.xml, false);                     // boolean
     this.colorIsTextColor = utils.deflt(options.colorIsTextColor, false);  // booelean
     this.strict = utils.deflt(options.strict, false);    // boolean
@@ -1749,10 +1749,12 @@ for (let i = 0; i < 10; i++) {
  * Then the top level of a <math> element can be occupied by <mrow> elements, and the browser
  * will break after a <mrow> if the expression extends beyond the container limit.
  *
- * We want the expression to render with soft line breaks after each top-level binary or
+ * The default is for soft line breaks after each top-level binary or
  * relational operator, per TeXbook p. 173. So we gather the expression into <mrow>s so that
  * each <mrow> ends in a binary or relational operator.
  *
+ * An option is for soft line breaks before an "=" sign. That changes the <mrow>s.
+ *
  * Soft line breaks will not work in Chromium and Safari, only Firefox.
  *
  * Hopefully browsers will someday do their own linebreaking and we will be able to delete
@@ -1964,6 +1966,48 @@ const consolidateText = mrow => {
   return mtext
 };
 
+const numberRegEx$1 = /^[0-9]$/;
+const isCommaOrDot = node => {
+  return (node.type === "atom" && node.text === ",") ||
+         (node.type === "textord" && node.text === ".")
+};
+const consolidateNumbers = expression => {
+  // Consolidate adjacent numbers. We want to return <mn>1,506.3</mn>,
+  // not <mn>1</mn><mo>,</mo><mn>5</mn><mn>0</mn><mn>6</mn><mi>.</mi><mn>3</mn>
+  if (expression.length < 2) { return }
+  const nums = [];
+  let inNum = false;
+  // Find adjacent numerals
+  for (let i = 0; i < expression.length; i++) {
+    const node = expression[i];
+    if (node.type === "textord" && numberRegEx$1.test(node.text)) {
+      if (!inNum) { nums.push({ start: i }); }
+      inNum = true;
+    } else {
+      if (inNum) { nums[nums.length - 1].end = i - 1; }
+      inNum = false;
+    }
+  }
+  if (inNum) { nums[nums.length - 1].end = expression.length - 1; }
+
+  // Determine if numeral groups are separated by a comma or dot.
+  for (let i = nums.length - 1; i > 0; i--) {
+    if (nums[i - 1].end === nums[i].start - 2 && isCommaOrDot(expression[nums[i].start - 1])) {
+      // Merge the two groups.
+      nums[i - 1].end = nums[i].end;
+      nums.splice(i, 1);
+    }
+  }
+
+  // Consolidate the number nodes
+  for (let i = nums.length - 1; i >= 0; i--) {
+    for (let j = nums[i].start + 1; j <= nums[i].end; j++) {
+      expression[nums[i].start].text += expression[j].text;
+    }
+    expression.splice(nums[i].start + 1, nums[i].end - nums[i].start);
+  }
+};
+
 /**
  * Wrap the given array of nodes in an <mrow> node if needed, i.e.,
  * unless the array has length 1.  Always returns a single node.
@@ -1999,6 +2043,8 @@ const buildExpression = function(expression, style, isOrdgroup) {
     return [group];
   }
 
+  consolidateNumbers(expression);
+
   const groups = [];
   for (let i = 0; i < expression.length; i++) {
     const group = buildGroup$1(expression[i], style);
@@ -2098,18 +2144,6 @@ function buildMathML(tree, texExpression, style, settings) {
     wrapper = new mathMLTree.MathNode("semantics", [wrapper, annotation]);
   }
 
-  if (wrap !== "none" && wrapper.children.length > 1) {
-    const maths = [];
-    for (let i = 0; i < wrapper.children.length; i++) {
-      const math = new mathMLTree.MathNode("math", [wrapper.children[i]]);
-      if (settings.xml) {
-        math.setAttribute("xmlns", "http://www.w3.org/1998/Math/MathML");
-      }
-      maths.push(math);
-    }
-    return mathMLTree.newDocumentFragment(maths)
-  }
-
   const math = new mathMLTree.MathNode("math", [wrapper]);
 
   if (settings.xml) {
@@ -2117,6 +2151,9 @@ 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"
+      : "inline-block";
   }
   return math;
 }
@@ -7650,7 +7687,7 @@ const smallCaps = Object.freeze({
 // "mathord" and "textord" ParseNodes created in Parser.js from symbol Groups in
 // src/symbols.js.
 
-const numberRegEx$1 = /^\d(?:[\d,.]*\d)?$/;  // Keep in sync with numberRegEx in Parser.js
+const numberRegEx = /^\d(?:[\d,.]*\d)?$/;
 const latinRegEx = /[A-Ba-z]/;
 
 const italicNumber = (text, variant, tag) => {
@@ -7704,7 +7741,7 @@ defineFunctionBuilders({
     const variant = getVariant(group, style) || "normal";
 
     let node;
-    if (numberRegEx$1.test(group.text)) {
+    if (numberRegEx.test(group.text)) {
       const tag = group.mode === "text" ? "mtext" : "mn";
       if (variant === "italic" || variant === "bold-italic") {
         return italicNumber(text, variant, tag)
@@ -8017,8 +8054,7 @@ const combiningDiacriticalMarksEndRegex = new RegExp(`${combiningDiacriticalMark
 const tokenRegexString =
   `(${spaceRegexString}+)|` + // whitespace
   `${controlSpaceRegexString}|` +  // whitespace
-  "(number" +         // numbers (in non-strict mode)
-  "|[!-\\[\\]-\u2027\u202A-\uD7FF\uF900-\uFFFF]" + // single codepoint
+  "([!-\\[\\]-\u2027\u202A-\uD7FF\uF900-\uFFFF]" + // single codepoint
   `${combiningDiacriticalMarkString}*` + // ...plus accents
   "|[\uD800-\uDBFF][\uDC00-\uDFFF]" + // surrogate pair
   `${combiningDiacriticalMarkString}*` + // ...plus accents
@@ -8033,12 +8069,7 @@ class Lexer {
     // Separate accents from characters
     this.input = input;
     this.settings = settings;
-    this.tokenRegex = new RegExp(
-      // Strict Temml, like TeX, lexes one numeral at a time.
-      // Default Temml lexes contiguous numerals into a single <mn> element.
-      tokenRegexString.replace("number|", settings.strict ? "" : "\\d(?:[\\d,.]*\\d)?|"),
-      "g"
-    );
+    this.tokenRegex = new RegExp(tokenRegexString, 'g');
     // Category codes. The lexer only supports comment characters (14) for now.
     // MacroExpander additionally distinguishes active (13).
     this.catcodes = {
@@ -11806,8 +11837,6 @@ var unicodeSymbols = {
 
 /* eslint no-constant-condition:0 */
 
-const numberRegEx = /^\d(?:[\d,.]*\d)?$/;  // Keep in sync with numberRegEx in symbolsOrd.js
-
 /**
  * This file contains the parser used to parse out a TeX expression from the
  * input. Since TeX isn't context-free, standard parsers don't work particularly
@@ -12729,15 +12758,6 @@ class Parser {
         };
       }
       symbol = s;
-    } else if (!this.strict && numberRegEx.test(text)) {
-      // A number. Wrap in a <mn> if in math mode; <mtext> otherwise.
-      this.consume();
-      return {
-        type: "textord",
-        mode: this.mode,
-        loc: SourceLocation.range(nucleus),
-        text
-      }
     } else if (text.charCodeAt(0) >= 0x80) {
       // no symbol for e.g. ^
       if (this.settings.strict) {
@@ -12977,7 +12997,7 @@ class Style {
  * https://mit-license.org/
  */
 
-const version = "0.10.2";
+const version = "0.10.4";
 
 function postProcess(block) {
   const labelMap = {};

package/dist/temml.js

@@ -191,7 +191,7 @@ var temml = (function () {
       this.leqno = utils.deflt(options.leqno, false);                // boolean
       this.errorColor = utils.deflt(options.errorColor, "#b22222");  // string
       this.macros = options.macros || {};
-      this.wrap = utils.deflt(options.wrap, "none");         // "none" | "tex" | "="
+      this.wrap = utils.deflt(options.wrap, "tex");                    // "tex" | "="
       this.xml = utils.deflt(options.xml, false);                     // boolean
       this.colorIsTextColor = utils.deflt(options.colorIsTextColor, false);  // booelean
       this.strict = utils.deflt(options.strict, false);    // boolean
@@ -1750,10 +1750,12 @@ var temml = (function () {
    * Then the top level of a <math> element can be occupied by <mrow> elements, and the browser
    * will break after a <mrow> if the expression extends beyond the container limit.
    *
-   * We want the expression to render with soft line breaks after each top-level binary or
+   * The default is for soft line breaks after each top-level binary or
    * relational operator, per TeXbook p. 173. So we gather the expression into <mrow>s so that
    * each <mrow> ends in a binary or relational operator.
    *
+   * An option is for soft line breaks before an "=" sign. That changes the <mrow>s.
+   *
    * Soft line breaks will not work in Chromium and Safari, only Firefox.
    *
    * Hopefully browsers will someday do their own linebreaking and we will be able to delete
@@ -1965,6 +1967,48 @@ var temml = (function () {
     return mtext
   };
 
+  const numberRegEx$1 = /^[0-9]$/;
+  const isCommaOrDot = node => {
+    return (node.type === "atom" && node.text === ",") ||
+           (node.type === "textord" && node.text === ".")
+  };
+  const consolidateNumbers = expression => {
+    // Consolidate adjacent numbers. We want to return <mn>1,506.3</mn>,
+    // not <mn>1</mn><mo>,</mo><mn>5</mn><mn>0</mn><mn>6</mn><mi>.</mi><mn>3</mn>
+    if (expression.length < 2) { return }
+    const nums = [];
+    let inNum = false;
+    // Find adjacent numerals
+    for (let i = 0; i < expression.length; i++) {
+      const node = expression[i];
+      if (node.type === "textord" && numberRegEx$1.test(node.text)) {
+        if (!inNum) { nums.push({ start: i }); }
+        inNum = true;
+      } else {
+        if (inNum) { nums[nums.length - 1].end = i - 1; }
+        inNum = false;
+      }
+    }
+    if (inNum) { nums[nums.length - 1].end = expression.length - 1; }
+
+    // Determine if numeral groups are separated by a comma or dot.
+    for (let i = nums.length - 1; i > 0; i--) {
+      if (nums[i - 1].end === nums[i].start - 2 && isCommaOrDot(expression[nums[i].start - 1])) {
+        // Merge the two groups.
+        nums[i - 1].end = nums[i].end;
+        nums.splice(i, 1);
+      }
+    }
+
+    // Consolidate the number nodes
+    for (let i = nums.length - 1; i >= 0; i--) {
+      for (let j = nums[i].start + 1; j <= nums[i].end; j++) {
+        expression[nums[i].start].text += expression[j].text;
+      }
+      expression.splice(nums[i].start + 1, nums[i].end - nums[i].start);
+    }
+  };
+
   /**
    * Wrap the given array of nodes in an <mrow> node if needed, i.e.,
    * unless the array has length 1.  Always returns a single node.
@@ -2000,6 +2044,8 @@ var temml = (function () {
       return [group];
     }
 
+    consolidateNumbers(expression);
+
     const groups = [];
     for (let i = 0; i < expression.length; i++) {
       const group = buildGroup$1(expression[i], style);
@@ -2099,18 +2145,6 @@ var temml = (function () {
       wrapper = new mathMLTree.MathNode("semantics", [wrapper, annotation]);
     }
 
-    if (wrap !== "none" && wrapper.children.length > 1) {
-      const maths = [];
-      for (let i = 0; i < wrapper.children.length; i++) {
-        const math = new mathMLTree.MathNode("math", [wrapper.children[i]]);
-        if (settings.xml) {
-          math.setAttribute("xmlns", "http://www.w3.org/1998/Math/MathML");
-        }
-        maths.push(math);
-      }
-      return mathMLTree.newDocumentFragment(maths)
-    }
-
     const math = new mathMLTree.MathNode("math", [wrapper]);
 
     if (settings.xml) {
@@ -2118,6 +2152,9 @@ var temml = (function () {
     }
     if (settings.displayMode) {
       math.setAttribute("display", "block");
+      math.style.display = math.children.length === 1 && math.children[0].type === "mtable"
+        ? "inline"
+        : "inline-block";
     }
     return math;
   }
@@ -7651,7 +7688,7 @@ var temml = (function () {
   // "mathord" and "textord" ParseNodes created in Parser.js from symbol Groups in
   // src/symbols.js.
 
-  const numberRegEx$1 = /^\d(?:[\d,.]*\d)?$/;  // Keep in sync with numberRegEx in Parser.js
+  const numberRegEx = /^\d(?:[\d,.]*\d)?$/;
   const latinRegEx = /[A-Ba-z]/;
 
   const italicNumber = (text, variant, tag) => {
@@ -7705,7 +7742,7 @@ var temml = (function () {
       const variant = getVariant(group, style) || "normal";
 
       let node;
-      if (numberRegEx$1.test(group.text)) {
+      if (numberRegEx.test(group.text)) {
         const tag = group.mode === "text" ? "mtext" : "mn";
         if (variant === "italic" || variant === "bold-italic") {
           return italicNumber(text, variant, tag)
@@ -8018,8 +8055,7 @@ var temml = (function () {
   const tokenRegexString =
     `(${spaceRegexString}+)|` + // whitespace
     `${controlSpaceRegexString}|` +  // whitespace
-    "(number" +         // numbers (in non-strict mode)
-    "|[!-\\[\\]-\u2027\u202A-\uD7FF\uF900-\uFFFF]" + // single codepoint
+    "([!-\\[\\]-\u2027\u202A-\uD7FF\uF900-\uFFFF]" + // single codepoint
     `${combiningDiacriticalMarkString}*` + // ...plus accents
     "|[\uD800-\uDBFF][\uDC00-\uDFFF]" + // surrogate pair
     `${combiningDiacriticalMarkString}*` + // ...plus accents
@@ -8034,12 +8070,7 @@ var temml = (function () {
       // Separate accents from characters
       this.input = input;
       this.settings = settings;
-      this.tokenRegex = new RegExp(
-        // Strict Temml, like TeX, lexes one numeral at a time.
-        // Default Temml lexes contiguous numerals into a single <mn> element.
-        tokenRegexString.replace("number|", settings.strict ? "" : "\\d(?:[\\d,.]*\\d)?|"),
-        "g"
-      );
+      this.tokenRegex = new RegExp(tokenRegexString, 'g');
       // Category codes. The lexer only supports comment characters (14) for now.
       // MacroExpander additionally distinguishes active (13).
       this.catcodes = {
@@ -9907,8 +9938,6 @@ var temml = (function () {
 
   /* eslint no-constant-condition:0 */
 
-  const numberRegEx = /^\d(?:[\d,.]*\d)?$/;  // Keep in sync with numberRegEx in symbolsOrd.js
-
   /**
    * This file contains the parser used to parse out a TeX expression from the
    * input. Since TeX isn't context-free, standard parsers don't work particularly
@@ -10830,15 +10859,6 @@ var temml = (function () {
           };
         }
         symbol = s;
-      } else if (!this.strict && numberRegEx.test(text)) {
-        // A number. Wrap in a <mn> if in math mode; <mtext> otherwise.
-        this.consume();
-        return {
-          type: "textord",
-          mode: this.mode,
-          loc: SourceLocation.range(nucleus),
-          text
-        }
       } else if (text.charCodeAt(0) >= 0x80) {
         // no symbol for e.g. ^
         if (this.settings.strict) {
@@ -11078,7 +11098,7 @@ var temml = (function () {
    * https://mit-license.org/
    */
 
-  const version = "0.10.2";
+  const version = "0.10.4";
 
   function postProcess(block) {
     const labelMap = {};