Shorten space widths

**Output changes** - Spaces are significantly shorter. 2 and 3 subsequent spaces are now 0.35ex and 0.7ex respectively, 4 and 5 are 1.5ex and 3ex, and anything larger is (n - 3)ex Resolves: #102
runarberg · Nov 28, 2023 · 28a750b · 28a750b
1 parent 8af250a
commit 28a750b
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 31 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1416,37 +1416,33 @@ <h3>Spaces</h3>
           <p>
             MathML has an element called <code>&lt;mspace&gt;</code>. Two or
             more spaces in a row will be translated into that element where it
-            makes sense. The width of the element will be
-            <math>
-              <mrow>
-                <mo fence="true">(</mo>
-                <mrow>
-                  <mi>n</mi>
-                  <mo>−</mo>
-                  <mn>1</mn>
-                </mrow>
-                <mo fence="true">)</mo>
-              </mrow>
-              <mi>ex</mi>
-            </math>
-            where <math><mi>n</mi></math> is the number of subsequent spaces and
-            <math><mi>ex</mi></math> is the height of the <i>‘x’</i>
-            character in your font.
+            makes sense. The width of the space will be:
+          </p>
+          <!-- prettier-ignore -->
+          <math-up display="block"><!--
+         -->"width" = { 0.35(n - 1)\,, if n = 2 or n = 3
+                        0.5(n - 1)\,,  if n = 4 or n = 5
+                        n - 3\,,       if n > 5
+          </math-up>
+          <p>
+            Where <math><mi>n</mi></math> is the number of subsequent spaces and
+            <i>width</i> is in units of <span class="unit">ex</span> which is
+            the height of the <i>‘x’</i> character in your font.
           </p>
 
           <aside class="examples">
             <ul>
               <li>
                 <!-- prettier-ignore -->
                 <use-example>
-                  bb P(x) = 1   \for 0 &leq; x &leq; 1
+                  bb P(x) = 1,     \for 0 &leq; x &leq; 1
                 </use-example>
               </li>
 
               <li>
                 <!-- prettier-ignore -->
                 <use-example>
-                  QQ = {p, q in ZZ :  p/q}
+                  QQ = {p, q in ZZ:   p/q}
                 </use-example>
               </li>
 
@@ -1571,7 +1567,7 @@ <h3>Sub and superscripts</h3>
               <li>
                 <!-- prettier-ignore -->
                 <use-example>
-                  (X^T)_ ij = X_ ji ,  X._(n xx m) &lt;=&gt; (X^T)._(m xx n)
+                  (X^T)_(ij) = X_(ji),    X._(n xx m) &lt;=&gt; (X^T)._(m xx n)
                 </use-example>
               </li>
 
@@ -1585,7 +1581,7 @@ <h3>Sub and superscripts</h3>
               <li>
                 <!-- prettier-ignore -->
                 <use-example>
-                  obrace(x + ... + x).^(k  "times")
+                  obrace(x + ... + x).^(k   "times")
                 </use-example>
               </li>
             </ul>

diff --git a/src/compiler/parser/handlers/space.js b/src/compiler/parser/handlers/space.js
@@ -2,6 +2,23 @@
  * @typedef {import("../parse.js").State} State
  * @typedef {import("../index.js").SpaceLiteral} SpaceLiteral
  */
+
+/**
+ * @param {number} n - Number of space literals
+ * @returns {number} - The width in units of ex
+ */
+function spaceWidth(n) {
+  if (n <= 3) {
+    return 0.35 * (n - 1);
+  }
+
+  if (n <= 5) {
+    return 0.5 * (n - 1);
+  }
+
+  return n - 3;
+}
+
 /**
  * @param {State} state
  * @returns {{ node: SpaceLiteral, end: number }}
@@ -13,7 +30,7 @@ export default function space({ start, tokens }) {
   const { length } = token.value;
   const attrs = blockSpace
     ? { depth: `${length}em` }
-    : { width: `${length - 1}ex` };
+    : { width: `${spaceWidth(length)}ex` };
 
   return {
     node: {

diff --git a/src/compiler/parser/handlers/space.test.js b/src/compiler/parser/handlers/space.test.js
@@ -15,9 +15,26 @@ test("SpaceLiteral", (t) => {
 test("width", (t) => {
   const node2 = space({ start: 0, tokens: [{ type: "space", value: "  " }] });
   const node3 = space({ start: 0, tokens: [{ type: "space", value: "   " }] });
+  const node4 = space({ start: 0, tokens: [{ type: "space", value: "    " }] });
+  const node5 = space({
+    start: 0,
+    tokens: [{ type: "space", value: "     " }],
+  });
+  const node6 = space({
+    start: 0,
+    tokens: [{ type: "space", value: "      " }],
+  });
+  const node7 = space({
+    start: 0,
+    tokens: [{ type: "space", value: "       " }],
+  });
 
-  t.deepEqual(node2.node.attrs, { width: "1ex" });
-  t.deepEqual(node3.node.attrs, { width: "2ex" });
+  t.deepEqual(node2.node.attrs, { width: "0.35ex" });
+  t.deepEqual(node3.node.attrs, { width: "0.7ex" });
+  t.deepEqual(node4.node.attrs, { width: "1.5ex" });
+  t.deepEqual(node5.node.attrs, { width: "2ex" });
+  t.deepEqual(node6.node.attrs, { width: "3ex" });
+  t.deepEqual(node7.node.attrs, { width: "4ex" });
 });
 
 test("depth", (t) => {

diff --git a/test/snapshots/operators.js.md b/test/snapshots/operators.js.md
@@ -46,7 +46,7 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 1
 
-    '<math><mi>𝐅</mi><mo>∘</mo><mi>𝐆</mi><mspace width="1ex" /><mo>:</mo><mspace width="1ex" /><mi>U</mi><mo>⊆</mo><msup><mi>ℝ</mi><mn>3</mn></msup><mo>→</mo><msup><mi>ℝ</mi><mn>2</mn></msup></math>'
+    '<math><mi>𝐅</mi><mo>∘</mo><mi>𝐆</mi><mspace width="0.35ex" /><mo>:</mo><mspace width="0.35ex" /><mi>U</mi><mo>⊆</mo><msup><mi>ℝ</mi><mn>3</mn></msup><mo>→</mo><msup><mi>ℝ</mi><mn>2</mn></msup></math>'
 
 ## Eulers number
 

diff --git a/test/snapshots/operators.js.snap b/test/snapshots/operators.js.snap
diff --git a/test/snapshots/standard-functions.js.md b/test/snapshots/standard-functions.js.md
@@ -44,4 +44,4 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 1
 
-    '<math><msup><mi>a</mi><mrow><mi>p</mi><mo>−</mo><mn>1</mn></mrow></msup><mo>≡</mo><mn>1</mn><mspace width="2ex" /><mrow><mo fence="true">(</mo><mrow><mo>mod</mo><mi>p</mi></mrow><mo fence="true">)</mo></mrow></math>'
+    '<math><msup><mi>a</mi><mrow><mi>p</mi><mo>−</mo><mn>1</mn></mrow></msup><mo>≡</mo><mn>1</mn><mspace width="0.7ex" /><mrow><mo fence="true">(</mo><mrow><mo>mod</mo><mi>p</mi></mrow><mo fence="true">)</mo></mrow></math>'
diff --git a/test/snapshots/standard-functions.js.snap b/test/snapshots/standard-functions.js.snap
diff --git a/test/snapshots/under-overscrips.js.md b/test/snapshots/under-overscrips.js.md
@@ -74,8 +74,8 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 1
 
-    '<math><mover><mrow><mrow><mi>x</mi><mo>+</mo><mo>…</mo><mo>+</mo><mi>x</mi></mrow></mrow><mover><mo>⏞</mo><mrow><mi>k</mi><mspace width="1ex" /><mtext>times</mtext></mrow></mover></mover></math>'
+    '<math><mover><mrow><mrow><mi>x</mi><mo>+</mo><mo>…</mo><mo>+</mo><mi>x</mi></mrow></mrow><mover><mo>⏞</mo><mrow><mi>k</mi><mspace width="0.35ex" /><mtext>times</mtext></mrow></mover></mover></math>'
 
 > Snapshot 2
 
-    '<math><mover><mover accent="true"><mrow><mi>x</mi><mo>+</mo><mo>…</mo><mo>+</mo><mi>x</mi></mrow><mo>⏞</mo></mover><mrow><mi>k</mi><mspace width="1ex" /><mtext>times</mtext></mrow></mover></math>'
+    '<math><mover><mover accent="true"><mrow><mi>x</mi><mo>+</mo><mo>…</mo><mo>+</mo><mi>x</mi></mrow><mo>⏞</mo></mover><mrow><mi>k</mi><mspace width="0.35ex" /><mtext>times</mtext></mrow></mover></math>'
diff --git a/test/snapshots/under-overscrips.js.snap b/test/snapshots/under-overscrips.js.snap
diff --git a/test/snapshots/whitespace.js.md b/test/snapshots/whitespace.js.md
@@ -8,7 +8,7 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 1
 
-    '<math><mi>a</mi><mspace width="1ex" /><mi>b</mi></math>'
+    '<math><mi>a</mi><mspace width="0.35ex" /><mi>b</mi></math>'
 
 > Snapshot 2
 
@@ -24,15 +24,15 @@ Generated by [AVA](https://avajs.dev).
 
 > Snapshot 1
 
-    '<math><mi>a</mi><mspace width="1ex" /><mi>b</mi></math>'
+    '<math><mi>a</mi><mspace width="0.35ex" /><mi>b</mi></math>'
 
 > Snapshot 2
 
-    '<math><mi>a</mi><mspace width="2ex" /><mi>b</mi></math>'
+    '<math><mi>a</mi><mspace width="0.7ex" /><mi>b</mi></math>'
 
 > Snapshot 3
 
-    '<math><mi>a</mi><mspace width="19ex" /><mi>b</mi></math>'
+    '<math><mi>a</mi><mspace width="17ex" /><mi>b</mi></math>'
 
 ## Adjacent symbols on either side of whitespace gets wrapped in an <mrow>
 

diff --git a/test/snapshots/whitespace.js.snap b/test/snapshots/whitespace.js.snap