Updated measure text internals

src/Textbox.ts

@@ -2,7 +2,7 @@
 import { linebreak } from './linebreak.js';
 import { renderSVG } from './renderSVG.js';
 import { renderCanvas } from './renderCanvas.ts';
-import { measureText, setMeasureCanvas } from './measureText.js';
+import { measureText, setMeasureCanvas } from './measureText/measureText.ts';
 import { createElement } from './createElement.ts';
 import { textparser } from './parser/textparser.ts';
 import { htmlparser } from './parser/htmlparser.ts';

src/index.ts

@@ -2,8 +2,8 @@ import { Textbox } from './Textbox.ts';
 
 export { Textbox } from './Textbox.ts';
 export { Rotator } from './Rotator.ts';
-export { measureText } from './measureText.ts';
-export { setMeasureCanvas } from './measureText.ts';
+export { measureText } from './measureText/measureText.ts';
+export { setMeasureCanvas } from './measureText/measureText.ts';
 
 export { textparser } from './parser/textparser.ts';
 export { htmlparser } from './parser/htmlparser.ts';

src/linebreak.ts

@@ -1,6 +1,6 @@
 import { WHITESPACE } from './constants.ts';
 import { fontStringParser } from './fontStringParser.ts';
-import { measureText } from './measureText.ts';
+import { measureText } from './measureText/measureText.ts';
 import { Token, Break, LineBreak, SoftHyphen } from './parser/tokens.ts';
 import type { FontProps, LayoutOptions, Line, Lines, NumberFunc, NumberLineFunc } from './types.ts';
 

src/measureText/getBrowserCanvas.ts

@@ -0,0 +1,11 @@
+/* globals document OffscreenCanvas */
+import type { MinimalCanvas } from '../types.ts';
+
+export function getBrowserCanvas (): MinimalCanvas | undefined {
+  const doc = typeof document !== 'undefined' ? document : null;
+  return (
+    (typeof OffscreenCanvas !== 'undefined' && new OffscreenCanvas(100, 100)) ||
+    (doc && doc.createElement && doc.createElement('canvas')) ||
+    undefined
+  );
+}

src/measureText/getDummyCanvas.ts

@@ -0,0 +1,79 @@
+import { WHITESPACE } from '../constants.ts';
+import { fontStringParser } from '../fontStringParser.ts';
+import type { MinimalCanvas, MinimalCanvasContext } from '../types.ts';
+
+// This is just guesswork but works surprisingly well.
+// Intended to be used to renderer for tests, or as a last resort in a server env.
+
+// Character width multipliers for Excel formula-based calculation
+const CHAR_WIDTH_MULTIPLIERS: Record<string, number> = {
+  ...WHITESPACE,
+  // Wide characters
+  'W': 1.5,
+  'M': 1.4,
+  '@': 1.4,
+  'm': 1.2,
+  'w': 1.2,
+  // Narrow characters
+  'i': 0.4,
+  'l': 0.5,
+  'I': 0.4,
+  'j': 0.4,
+  // Punctuation
+  ' ': 0.5,
+  '.': 0.5,
+  ',': 0.5,
+  ':': 0.5,
+  ';': 0.5
+  // Default for unmapped characters: 1.0
+};
+
+function isUppercase (str: string) {
+  return /^\p{Lu}+$/u.test(str);
+}
+
+export function measureText (text: string, font: string): number {
+  if (!text) {
+    return 0;
+  }
+
+  const f = fontStringParser(font);
+  const isMonospace = /\bmonospace\b/.test(f.family ?? font);
+  const isNarrow = /\b(narrow|condensed|compressed)\b/i.test(f.family ?? font);
+
+  // approximate the font size
+  let size = f.size ?? 12;
+  if (isMonospace) {
+    size *= 0.6;
+  }
+  else {
+    size *= 0.45;
+    if (f.weight && f.weight > 400) {
+      size *= 1.18;
+    }
+  }
+
+  let totalWidth = 0;
+  for (const char of text) {
+    const multiplier = CHAR_WIDTH_MULTIPLIERS[char] || (isUppercase(char) ? 1.2 : 1);
+    totalWidth += multiplier;
+  }
+
+  // Generally, we overestimate condensed fonts like "Aptos Narrow" by ~25-30%. Scaling down by 0.88 for
+  // known narrow/condensed fonts brings the estimate back in line with actual rendered widths.
+  const condensedFactor = isNarrow ? 0.88 : 1;
+
+  return totalWidth * size * condensedFactor;
+}
+
+const ctx: MinimalCanvasContext = {
+  font: '',
+  measureText: (text: string) => {
+    const width = measureText(text, ctx.font);
+    return { width };
+  }
+};
+
+export function getDummyCanvas (): MinimalCanvas {
+  return { getContext: () => ctx };
+}

src/measureText.spec.ts → src/measureText/measureText.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
-import { measureText, setMeasureCanvas, getDumbHandler } from './measureText.ts';
-import { Token } from './parser/tokens.ts';
+import { measureText, setMeasureCanvas } from './measureText.ts';
+import { Token } from '../parser/tokens.ts';
 
 describe('setMeasureCanvas()', () => {
   afterEach(() => {
@@ -11,31 +11,19 @@ describe('setMeasureCanvas()', () => {
     // faking the canvas interface
     const mockCanvas = {
       getContext: () => {
-        return { font: '', measureText: () => ({ width: 36 }) };
+        return { font: '', measureText: () => ({ width: 0.36 }) };
       }
     };
     setMeasureCanvas(mockCanvas);
-    expect(measureText('TEST', '20px sans-serif')).toBe(36);
-  });
-});
-
-describe('measureText.getDumbHandler()', () => {
-  it('returns function', () => {
-    const c = getDumbHandler();
-    expect(typeof c).toBe('function');
-  });
-
-  it('measures text', () => {
-    const c = getDumbHandler();
-    expect(c('TEST', '20px sans-serif')).toBe(36);
+    expect(measureText('TEST', '20px sans-serif')).toBe(0.36);
   });
 });
 
 describe('measureText()', () => {
   it('measures given token', () => {
     const token = new Token('TEST');
     const font = '20px sans-serif';
-    expect(measureText(token, font)).toBe(36);
+    expect(measureText(token, font)).toBe(43.199999999999996);
   });
 
   it('measures given string', () => {
@@ -58,9 +46,9 @@ describe('measureText() without whitespace trimming', () => {
     const token = 'TEST';
     const tokenWithWhitespace = '   TEST ';
     const font = '20px sans-serif';
-    expect(measureText(token, font)).toBeLessThan(
-      measureText(tokenWithWhitespace, font, { trim: false })
-    );
+    const measureBasic = measureText(token, font);
+    const measureNoTrim = measureText(tokenWithWhitespace, font, { trim: false });
+    expect(measureBasic).toBeLessThan(measureNoTrim);
   });
 });