sci2-ts 0.14.0 → 0.15.0

package/packages/sci/src/text/font.ts

@@ -3,8 +3,19 @@ export interface Glyph {
   height: number;
   /** 1 byte per pixel, 1 = ink. */
   pixels: Uint8Array;
+  /** Where the bitmap starts from the pen (default 0); it can be left of it, an italic j's tail. */
+  bearingX?: number;
+  /** How far the pen moves on (default the width); ink can reach past it. */
+  advance?: number;
 }
 
+/** How far the pen moves on after a glyph. */
+export const advanceOf = (g: Glyph) => g.advance ?? g.width;
+
+/** The extension at the end of a font resource with bearings and advances: see writeFont. */
+const METRICS_TAG = [0x58, 0x4d, 0x54, 0x31]; // "XMT1"
+const hasOwnMetrics = (g: Glyph | undefined) => !!g && ((g.bearingX ?? 0) !== 0 || (g.advance ?? g.width) !== g.width);
+
 export interface Font {
   /** Line height in pixels. */
   height: number;
@@ -22,6 +33,11 @@ export interface Font {
  *
  * Each glyph: u8 width, u8 height, then rows of 1bpp pixels, MSB first,
  * each row padded to a whole byte.
+ *
+ * A font can also carry each glyph's bearing and advance (writeFont adds them when any glyph
+ * has its own): after the glyphs, i8 bearing and u8 advance per character, then "XMT1". SCI
+ * reads glyphs by their offsets and never gets there; without it, bearings are 0 and
+ * advances the widths, as fonts always were.
  */
 export function parseFont(data: Uint8Array): Font {
   const v = new DataView(data.buffer, data.byteOffset, data.byteLength);
@@ -43,6 +59,16 @@ export function parseFont(data: Uint8Array): Font {
     }
     glyphs[c] = { width, height: h, pixels };
   }
+  const tagAt = data.length - 4;
+  if (tagAt - count * 2 >= 6 + count * 2 && METRICS_TAG.every((b, i) => data[tagAt + i] === b)) {
+    const at = tagAt - count * 2;
+    glyphs.forEach((g, c) => {
+      if (!g) return;
+      const bearing = (data[at + c * 2]! << 24) >> 24, advance = data[at + c * 2 + 1]!;
+      if (bearing) g.bearingX = bearing;
+      if (advance !== g.width) g.advance = advance;
+    });
+  }
   return { height, glyphs };
 }
 
@@ -61,7 +87,9 @@ export function writeFont(font: Font): Uint8Array {
     }
     return out;
   });
-  const out = new Uint8Array(6 + count * 2 + bodies.reduce((n, b) => n + b.length, 0));
+  const metrics = font.glyphs.some(hasOwnMetrics);
+  const bodySize = bodies.reduce((n, b) => n + b.length, 0);
+  const out = new Uint8Array(6 + count * 2 + bodySize + (metrics ? count * 2 + 4 : 0));
   const v = new DataView(out.buffer);
   v.setUint16(2, count, true);
   v.setUint16(4, font.height, true);
@@ -72,11 +100,20 @@ export function writeFont(font: Font): Uint8Array {
     out.set(b, at);
     at += b.length;
   });
+  if (metrics) {
+    font.glyphs.forEach((g, c) => {
+      const bearing = g?.bearingX ?? 0, advance = g ? advanceOf(g) : 0;
+      if (bearing < -128 || bearing > 127 || advance < 0 || advance > 255) throw new Error(`glyph ${c}: bearing ${bearing}, advance ${advance}`);
+      out[at + c * 2] = bearing & 0xff;
+      out[at + c * 2 + 1] = advance;
+    });
+    out.set(METRICS_TAG, at + count * 2);
+  }
   return out;
 }
 
 export const textWidth = (font: Font, text: string): number =>
-  [...text].reduce((w, ch) => w + (font.glyphs[ch.charCodeAt(0)]?.width ?? 0), 0);
+  [...text].reduce((w, ch) => { const g = font.glyphs[ch.charCodeAt(0)]; return w + (g ? advanceOf(g) : 0); }, 0);
 
 /** Splits text into lines no wider than `maxWidth`, breaking at spaces and honouring CR/LF. */
 export function wrapText(font: Font, text: string, maxWidth: number): string[] {
@@ -102,24 +139,36 @@ export interface TextBitmap {
   pixels: Uint8Array;
 }
 
-/** Renders already-wrapped lines, each aligned within the bitmap width. */
-export function renderText(font: Font, lines: string[], align: "left" | "center" = "left"): TextBitmap {
-  const width = Math.max(1, ...lines.map((l) => textWidth(font, l)));
+/**
+ * Renders already-wrapped lines, each aligned within the line width. Ink that starts left of
+ * the pen or runs past the last advance (an italic's first and last letters) is kept: the
+ * bitmap grows to hold it, and `originX` says where the pen started.
+ */
+export function renderText(font: Font, lines: string[], align: "left" | "center" = "left"): TextBitmap & { originX: number } {
+  const lineWidth = Math.max(1, ...lines.map((l) => textWidth(font, l)));
+  const pens = lines.map((line) => {
+    let x = align === "center" ? Math.floor((lineWidth - textWidth(font, line)) / 2) : 0;
+    return [...line].flatMap((ch) => {
+      const g = font.glyphs[ch.charCodeAt(0)];
+      if (!g) return [];
+      const at = { g, x: x + (g.bearingX ?? 0) };
+      x += advanceOf(g);
+      return [at];
+    });
+  });
+  const inks = pens.flat();
+  const left = Math.min(0, ...inks.map((p) => p.x)), right = Math.max(lineWidth, ...inks.map((p) => p.x + p.g.width));
+  const width = right - left;
   const height = Math.max(1, lines.length * font.height);
   const pixels = new Uint8Array(width * height);
-
-  lines.forEach((line, row) => {
-    let x = align === "center" ? Math.floor((width - textWidth(font, line)) / 2) : 0;
-    for (const ch of line) {
-      const g = font.glyphs[ch.charCodeAt(0)];
-      if (!g) continue;
-      for (let gy = 0; gy < g.height; gy++) {
+  pens.forEach((row, r) => {
+    for (const { g, x } of row) {
+      for (let gy = 0; gy < g.height && r * font.height + gy < height; gy++) {
         for (let gx = 0; gx < g.width; gx++) {
-          if (g.pixels[gy * g.width + gx]) pixels[(row * font.height + gy) * width + x + gx] = 1;
+          if (g.pixels[gy * g.width + gx]) pixels[(r * font.height + gy) * width + x - left + gx] = 1;
         }
       }
-      x += g.width;
     }
   });
-  return { width, height, pixels };
+  return { width, height, pixels, originX: -left };
 }

package/packages/sci/src/text/styled.d.ts

@@ -0,0 +1,40 @@
+import { type Font, type Glyph } from "./font.ts";
+/**
+ * Text with styles in it, as SCI32 writes them: `|f3|` switches to font 3 and `|f|` back to
+ * the text's own; `|c5|` and `|c|` do the same for the colour. A word whose style changes
+ * part-way through is still one word, and the codes take no room.
+ */
+export interface StyledChar {
+    ch: string;
+    font: number;
+    /** A colour of its own, or undefined for the text's. */
+    color?: number;
+}
+export declare function parseStyled(text: string, font: number): StyledChar[];
+/** The text without its codes. */
+export declare const plainOf: (text: string) => string;
+type FontOf = (n: number) => Font;
+/** The pen's travel over some characters: the sum of their advances. */
+export declare function styledWidth(fontOf: FontOf, chars: StyledChar[]): number;
+export interface StyledLine {
+    chars: StyledChar[];
+    /** The pen's travel: what wrapping and alignment go by. */
+    width: number;
+    /** The tallest font in it (the text's own if it's empty). */
+    height: number;
+}
+/**
+ * Lines no wider than maxWidth, breaking after spaces and at CR/LF, each character measured
+ * in its own font. A word too long for a line gets a line of its own.
+ */
+export declare function wrapStyled(fontOf: FontOf, chars: StyledChar[], font: number, maxWidth: number): StyledLine[];
+/**
+ * Where each character's ink goes: the pen starts at x (moved by alignment), and each glyph
+ * is drawn at the pen plus its bearing, then the pen moves on by its advance.
+ */
+export declare function placeLine(fontOf: FontOf, line: StyledLine, x: number): {
+    glyph: Glyph;
+    x: number;
+    color?: number;
+}[];
+export {};

package/packages/sci/src/text/styled.js

@@ -0,0 +1,92 @@
+import { advanceOf } from "./font.js";
+const CODE = /\|([fc])(\d*)\|/y;
+export function parseStyled(text, font) {
+    const out = [];
+    let f = font, color;
+    for (let i = 0; i < text.length;) {
+        CODE.lastIndex = i;
+        const m = text[i] === "|" ? CODE.exec(text) : null;
+        if (m) {
+            if (m[1] === "f")
+                f = m[2] ? Number(m[2]) : font;
+            else
+                color = m[2] ? Number(m[2]) : undefined;
+            i = CODE.lastIndex;
+            continue;
+        }
+        out.push({ ch: text[i], font: f, ...(color === undefined ? {} : { color }) });
+        i++;
+    }
+    return out;
+}
+/** The text without its codes. */
+export const plainOf = (text) => text.replace(/\|[fc]\d*\|/g, "");
+const glyphOf = (fontOf, c) => fontOf(c.font).glyphs[c.ch.charCodeAt(0)];
+/** The pen's travel over some characters: the sum of their advances. */
+export function styledWidth(fontOf, chars) {
+    return chars.reduce((w, c) => { const g = glyphOf(fontOf, c); return w + (g ? advanceOf(g) : 0); }, 0);
+}
+/**
+ * Lines no wider than maxWidth, breaking after spaces and at CR/LF, each character measured
+ * in its own font. A word too long for a line gets a line of its own.
+ */
+export function wrapStyled(fontOf, chars, font, maxWidth) {
+    const lines = [];
+    const finish = (line) => {
+        while (line.length && line[line.length - 1].ch === " ")
+            line.pop();
+        lines.push({ chars: line, width: styledWidth(fontOf, line), height: Math.max(fontOf(font).height, ...line.map((c) => fontOf(c.font).height)) });
+    };
+    // Paragraphs, then words: a word is its letters and the spaces after them.
+    const paragraphs = [[]];
+    for (let i = 0; i < chars.length; i++) {
+        const c = chars[i];
+        if (c.ch === "\r" || c.ch === "\n") {
+            if (c.ch === "\r" && chars[i + 1]?.ch === "\n")
+                i++;
+            paragraphs.push([]);
+        }
+        else
+            paragraphs[paragraphs.length - 1].push(c);
+    }
+    for (const paragraph of paragraphs) {
+        const words = [];
+        let word = [];
+        paragraph.forEach((c, i) => {
+            word.push(c);
+            if (c.ch === " " && paragraph[i + 1]?.ch !== " ")
+                (words.push(word), (word = []));
+        });
+        if (word.length)
+            words.push(word);
+        let line = [];
+        for (const w of words) {
+            const trimmed = [...line, ...w];
+            while (trimmed.length && trimmed[trimmed.length - 1].ch === " ")
+                trimmed.pop();
+            if (line.length && styledWidth(fontOf, trimmed) > maxWidth) {
+                finish(line);
+                line = [];
+            }
+            line.push(...w);
+        }
+        finish(line);
+    }
+    return lines;
+}
+/**
+ * Where each character's ink goes: the pen starts at x (moved by alignment), and each glyph
+ * is drawn at the pen plus its bearing, then the pen moves on by its advance.
+ */
+export function placeLine(fontOf, line, x) {
+    const out = [];
+    let pen = x;
+    for (const c of line.chars) {
+        const glyph = glyphOf(fontOf, c);
+        if (!glyph)
+            continue;
+        out.push({ glyph, x: pen + (glyph.bearingX ?? 0), ...(c.color === undefined ? {} : { color: c.color }) });
+        pen += advanceOf(glyph);
+    }
+    return out;
+}

package/packages/sci/src/text/styled.ts

@@ -0,0 +1,110 @@
+import { advanceOf, type Font, type Glyph } from "./font.ts";
+
+/**
+ * Text with styles in it, as SCI32 writes them: `|f3|` switches to font 3 and `|f|` back to
+ * the text's own; `|c5|` and `|c|` do the same for the colour. A word whose style changes
+ * part-way through is still one word, and the codes take no room.
+ */
+export interface StyledChar {
+  ch: string;
+  font: number;
+  /** A colour of its own, or undefined for the text's. */
+  color?: number;
+}
+
+const CODE = /\|([fc])(\d*)\|/y;
+
+export function parseStyled(text: string, font: number): StyledChar[] {
+  const out: StyledChar[] = [];
+  let f = font, color: number | undefined;
+  for (let i = 0; i < text.length; ) {
+    CODE.lastIndex = i;
+    const m = text[i] === "|" ? CODE.exec(text) : null;
+    if (m) {
+      if (m[1] === "f") f = m[2] ? Number(m[2]) : font;
+      else color = m[2] ? Number(m[2]) : undefined;
+      i = CODE.lastIndex;
+      continue;
+    }
+    out.push({ ch: text[i]!, font: f, ...(color === undefined ? {} : { color }) });
+    i++;
+  }
+  return out;
+}
+
+/** The text without its codes. */
+export const plainOf = (text: string) => text.replace(/\|[fc]\d*\|/g, "");
+
+type FontOf = (n: number) => Font;
+const glyphOf = (fontOf: FontOf, c: StyledChar): Glyph | undefined => fontOf(c.font).glyphs[c.ch.charCodeAt(0)];
+
+/** The pen's travel over some characters: the sum of their advances. */
+export function styledWidth(fontOf: FontOf, chars: StyledChar[]): number {
+  return chars.reduce((w, c) => { const g = glyphOf(fontOf, c); return w + (g ? advanceOf(g) : 0); }, 0);
+}
+
+export interface StyledLine {
+  chars: StyledChar[];
+  /** The pen's travel: what wrapping and alignment go by. */
+  width: number;
+  /** The tallest font in it (the text's own if it's empty). */
+  height: number;
+}
+
+/**
+ * Lines no wider than maxWidth, breaking after spaces and at CR/LF, each character measured
+ * in its own font. A word too long for a line gets a line of its own.
+ */
+export function wrapStyled(fontOf: FontOf, chars: StyledChar[], font: number, maxWidth: number): StyledLine[] {
+  const lines: StyledLine[] = [];
+  const finish = (line: StyledChar[]) => {
+    while (line.length && line[line.length - 1]!.ch === " ") line.pop();
+    lines.push({ chars: line, width: styledWidth(fontOf, line), height: Math.max(fontOf(font).height, ...line.map((c) => fontOf(c.font).height)) });
+  };
+  // Paragraphs, then words: a word is its letters and the spaces after them.
+  const paragraphs: StyledChar[][] = [[]];
+  for (let i = 0; i < chars.length; i++) {
+    const c = chars[i]!;
+    if (c.ch === "\r" || c.ch === "\n") {
+      if (c.ch === "\r" && chars[i + 1]?.ch === "\n") i++;
+      paragraphs.push([]);
+    } else paragraphs[paragraphs.length - 1]!.push(c);
+  }
+  for (const paragraph of paragraphs) {
+    const words: StyledChar[][] = [];
+    let word: StyledChar[] = [];
+    paragraph.forEach((c, i) => {
+      word.push(c);
+      if (c.ch === " " && paragraph[i + 1]?.ch !== " ") (words.push(word), (word = []));
+    });
+    if (word.length) words.push(word);
+    let line: StyledChar[] = [];
+    for (const w of words) {
+      const trimmed = [...line, ...w];
+      while (trimmed.length && trimmed[trimmed.length - 1]!.ch === " ") trimmed.pop();
+      if (line.length && styledWidth(fontOf, trimmed) > maxWidth) {
+        finish(line);
+        line = [];
+      }
+      line.push(...w);
+    }
+    finish(line);
+  }
+  return lines;
+}
+
+/**
+ * Where each character's ink goes: the pen starts at x (moved by alignment), and each glyph
+ * is drawn at the pen plus its bearing, then the pen moves on by its advance.
+ */
+export function placeLine(fontOf: FontOf, line: StyledLine, x: number): { glyph: Glyph; x: number; color?: number }[] {
+  const out: { glyph: Glyph; x: number; color?: number }[] = [];
+  let pen = x;
+  for (const c of line.chars) {
+    const glyph = glyphOf(fontOf, c);
+    if (!glyph) continue;
+    out.push({ glyph, x: pen + (glyph.bearingX ?? 0), ...(c.color === undefined ? {} : { color: c.color }) });
+    pen += advanceOf(glyph);
+  }
+  return out;
+}

package/packages/sci/src/vm/kernels/text.js

@@ -1,5 +1,6 @@
 import { ResourceType } from "../../resource/types.js";
-import { parseFont, textWidth, wrapText } from "../../text/font.js";
+import { parseFont } from "../../text/font.js";
+import { parseStyled, placeLine, styledWidth, wrapStyled } from "../../text/styled.js";
 import { hasRef, parseMessages } from "../../text/message.js";
 import { NULL, fromInt, segmentOf, toSigned } from "../value.js";
 import { stringHelpers } from "./arrays.js";
@@ -95,31 +96,38 @@ const DEFAULT_MAX_WIDTH = (320 * 3) / 5;
  * arrow glyphs on dialog scroll buttons.
  */
 export const unescapeText = (s) => s.replace(/\\([0-9a-fA-F]{2})/g, (_m, hex) => String.fromCharCode(parseInt(hex, 16)));
-/** Draws wrapped text into a bitmap, inside `rect`, with alignment. */
-function drawText(bmp, font, str, rect, color, align) {
+/**
+ * Draws wrapped text into a bitmap, inside `rect`, with alignment. The text can change font
+ * and colour (`|f3|`, `|c5|`). Ink can start left of the pen or run past it (an italic's
+ * tail) into the box's margin; only the bitmap's edges stop it.
+ */
+function drawText(vm, bmp, fontNo, str, rect, color, align) {
+    const fontOf = (n) => text(vm).font(n);
     const width = rect.right - rect.left;
-    const lines = wrapText(font, str, width);
-    lines.forEach((line, row) => {
-        const w = textWidth(font, line);
-        let x = rect.left + (align === TextAlign.Center ? Math.floor((width - w) / 2) : align === TextAlign.Right ? width - w : 0);
-        const y0 = rect.top + row * font.height;
-        for (const ch of line) {
-            const g = font.glyphs[ch.charCodeAt(0)];
-            if (!g)
-                continue;
+    let y0 = rect.top;
+    for (const line of wrapStyled(fontOf, parseStyled(str, fontNo), fontNo, width)) {
+        const x = rect.left + (align === TextAlign.Center ? Math.floor((width - line.width) / 2) : align === TextAlign.Right ? width - line.width : 0);
+        for (const { glyph: g, x: gx0, color: c } of placeLine(fontOf, line, x)) {
+            const ink = c ?? color;
             for (let gy = 0; gy < g.height; gy++) {
                 const y = y0 + gy;
                 if (y < rect.top || y >= rect.bottom || y >= bmp.height)
                     continue;
                 for (let gx = 0; gx < g.width; gx++) {
-                    const px = x + gx;
+                    const px = gx0 + gx;
                     if (g.pixels[gy * g.width + gx] && px >= 0 && px < bmp.width)
-                        bmp.pixels[y * bmp.width + px] = color;
+                        bmp.pixels[y * bmp.width + px] = ink;
                 }
             }
-            x += g.width;
         }
-    });
+        y0 += line.height;
+    }
+}
+/** The size text takes in a font, wrapped to maxWidth: the widest line's advance, and the lines' heights. */
+function measure(vm, fontNo, str, maxWidth) {
+    const fontOf = (n) => text(vm).font(n);
+    const lines = wrapStyled(fontOf, parseStyled(str, fontNo), fontNo, maxWidth);
+    return { width: Math.max(0, ...lines.map((l) => l.width)), height: lines.reduce((h, l) => h + l.height, 0) };
 }
 function drawBorder(bmp, color) {
     for (let x = 0; x < bmp.width; x++)
@@ -186,33 +194,36 @@ export const textKernels = {
     },
     // TextSize(rectArray, text, font, maxWidth): writes [left, top, right, bottom] (inclusive).
     TextSize: (vm, [rect = 0, str = 0, fontNo = 0, maxWidth = 0]) => {
-        const font = text(vm).font(fontNo);
         const s = stringHelpers.str(vm, str);
+        const fontOf = (n) => text(vm).font(n);
+        const oneLine = () => {
+            const chars = parseStyled(s, fontNo);
+            return { width: styledWidth(fontOf, chars), height: Math.max(fontOf(fontNo).height, ...chars.map((c) => fontOf(c.font).height)) };
+        };
         let w, h;
         const max = toSigned(maxWidth);
         if (max >= 0) {
             const limit = max || DEFAULT_MAX_WIDTH;
-            if (!/[\r\n]/.test(s) && textWidth(font, s) <= limit) {
+            const one = oneLine();
+            if (!/[\r\n]/.test(s) && one.width <= limit) {
                 // Fits on one line: measured as-is, spaces included (a lone " " has a width).
-                w = textWidth(font, s);
-                h = font.height;
+                ({ width: w, height: h } = one);
             }
             else {
-                const lines = wrapText(font, s, limit);
-                w = Math.min(limit, Math.max(0, ...lines.map((l) => textWidth(font, l))));
-                h = lines.length * font.height;
+                const m = measure(vm, fontNo, s, limit);
+                w = Math.min(limit, m.width);
+                h = m.height;
             }
         }
         else {
-            w = textWidth(font, s);
-            h = font.height;
+            ({ width: w, height: h } = oneLine());
         }
         const a = stringHelpers.resolve(vm, rect);
         if (a)
             a.data.splice(0, 4, 0, 0, fromInt(w - 1), fromInt(h - 1));
         return 0;
     },
-    TextWidth: (vm, [str = 0, fontNo = 0]) => textWidth(text(vm).font(fontNo), stringHelpers.str(vm, str)),
+    TextWidth: (vm, [str = 0, fontNo = 0]) => styledWidth((n) => text(vm).font(n), parseStyled(stringHelpers.str(vm, str), fontNo)),
     PointSize: (vm, [fontNo = 0]) => text(vm).font(fontNo).height,
     TextFonts: () => 0,
     TextColors: () => 0,
@@ -225,7 +236,7 @@ export const textKernels = {
             return NULL;
         const w = Math.max(1, toSigned(width)), h = Math.max(1, toSigned(height));
         const str = unescapeText(stringHelpers.str(vm, vm.getProp(obj, "text") ?? 0));
-        const font = text(vm).font(prop(vm, obj, "font"));
+        const fontNo = prop(vm, obj, "font");
         const fore = prop(vm, obj, "fore") & 0xff;
         const align = prop(vm, obj, "mode");
         const rect = {
@@ -255,7 +266,7 @@ export const textKernels = {
             if (found)
                 vm.memory.bitmap(ref).pixels.set(found.cel.pixels);
         }
-        drawText(vm.memory.bitmap(ref), font, str, rect, fore, align);
+        drawText(vm, vm.memory.bitmap(ref), fontNo, str, rect, fore, align);
         return ref;
     },
     /**
@@ -304,7 +315,7 @@ export const textKernels = {
             if (border >= 0)
                 drawBorder(bmp, border & 0xff);
             const cursor = (frame >> 4) & 1 ? "" : "_"; // blink
-            drawText(bmp, font, text + cursor, rect, fore, TextAlign.Left);
+            drawText(vm, bmp, prop(vm, obj, "font"), text + cursor, rect, fore, TextAlign.Left);
             vm.setProp(obj, "bitmap", bitmap);
             graphicsKernels.FrameOut(vm, []);
             yield { frame: true };

package/packages/sci/src/vm/kernels/text.ts

@@ -1,5 +1,6 @@
 import { ResourceType } from "../../resource/types.ts";
-import { parseFont, textWidth, wrapText, type Font } from "../../text/font.ts";
+import { parseFont, type Font } from "../../text/font.ts";
+import { parseStyled, placeLine, styledWidth, wrapStyled } from "../../text/styled.ts";
 import { hasRef, parseMessages, type MessageFile, type MessageTuple } from "../../text/message.ts";
 import type { SciBitmap } from "../memory.ts";
 import type { FrameRequest, KernelFn, SendRequest, Vm } from "../vm.ts";
@@ -106,28 +107,37 @@ const DEFAULT_MAX_WIDTH = (320 * 3) / 5;
  */
 export const unescapeText = (s: string) => s.replace(/\\([0-9a-fA-F]{2})/g, (_m, hex: string) => String.fromCharCode(parseInt(hex, 16)));
 
-/** Draws wrapped text into a bitmap, inside `rect`, with alignment. */
-function drawText(bmp: SciBitmap, font: Font, str: string, rect: { left: number; top: number; right: number; bottom: number }, color: number, align: number) {
+/**
+ * Draws wrapped text into a bitmap, inside `rect`, with alignment. The text can change font
+ * and colour (`|f3|`, `|c5|`). Ink can start left of the pen or run past it (an italic's
+ * tail) into the box's margin; only the bitmap's edges stop it.
+ */
+function drawText(vm: Vm, bmp: SciBitmap, fontNo: number, str: string, rect: { left: number; top: number; right: number; bottom: number }, color: number, align: number) {
+  const fontOf = (n: number) => text(vm).font(n);
   const width = rect.right - rect.left;
-  const lines = wrapText(font, str, width);
-  lines.forEach((line, row) => {
-    const w = textWidth(font, line);
-    let x = rect.left + (align === TextAlign.Center ? Math.floor((width - w) / 2) : align === TextAlign.Right ? width - w : 0);
-    const y0 = rect.top + row * font.height;
-    for (const ch of line) {
-      const g = font.glyphs[ch.charCodeAt(0)];
-      if (!g) continue;
+  let y0 = rect.top;
+  for (const line of wrapStyled(fontOf, parseStyled(str, fontNo), fontNo, width)) {
+    const x = rect.left + (align === TextAlign.Center ? Math.floor((width - line.width) / 2) : align === TextAlign.Right ? width - line.width : 0);
+    for (const { glyph: g, x: gx0, color: c } of placeLine(fontOf, line, x)) {
+      const ink = c ?? color;
       for (let gy = 0; gy < g.height; gy++) {
         const y = y0 + gy;
         if (y < rect.top || y >= rect.bottom || y >= bmp.height) continue;
         for (let gx = 0; gx < g.width; gx++) {
-          const px = x + gx;
-          if (g.pixels[gy * g.width + gx] && px >= 0 && px < bmp.width) bmp.pixels[y * bmp.width + px] = color;
+          const px = gx0 + gx;
+          if (g.pixels[gy * g.width + gx] && px >= 0 && px < bmp.width) bmp.pixels[y * bmp.width + px] = ink;
         }
       }
-      x += g.width;
     }
-  });
+    y0 += line.height;
+  }
+}
+
+/** The size text takes in a font, wrapped to maxWidth: the widest line's advance, and the lines' heights. */
+function measure(vm: Vm, fontNo: number, str: string, maxWidth: number): { width: number; height: number } {
+  const fontOf = (n: number) => text(vm).font(n);
+  const lines = wrapStyled(fontOf, parseStyled(str, fontNo), fontNo, maxWidth);
+  return { width: Math.max(0, ...lines.map((l) => l.width)), height: lines.reduce((h, l) => h + l.height, 0) };
 }
 
 function drawBorder(bmp: SciBitmap, color: number) {
@@ -185,30 +195,33 @@ export const textKernels: Record<string, KernelFn> = {
 
   // TextSize(rectArray, text, font, maxWidth): writes [left, top, right, bottom] (inclusive).
   TextSize: (vm, [rect = 0, str = 0, fontNo = 0, maxWidth = 0]) => {
-    const font = text(vm).font(fontNo);
     const s = stringHelpers.str(vm, str);
+    const fontOf = (n: number) => text(vm).font(n);
+    const oneLine = () => {
+      const chars = parseStyled(s, fontNo);
+      return { width: styledWidth(fontOf, chars), height: Math.max(fontOf(fontNo).height, ...chars.map((c) => fontOf(c.font).height)) };
+    };
     let w: number, h: number;
     const max = toSigned(maxWidth);
     if (max >= 0) {
       const limit = max || DEFAULT_MAX_WIDTH;
-      if (!/[\r\n]/.test(s) && textWidth(font, s) <= limit) {
+      const one = oneLine();
+      if (!/[\r\n]/.test(s) && one.width <= limit) {
         // Fits on one line: measured as-is, spaces included (a lone " " has a width).
-        w = textWidth(font, s);
-        h = font.height;
+        ({ width: w, height: h } = one);
       } else {
-        const lines = wrapText(font, s, limit);
-        w = Math.min(limit, Math.max(0, ...lines.map((l) => textWidth(font, l))));
-        h = lines.length * font.height;
+        const m = measure(vm, fontNo, s, limit);
+        w = Math.min(limit, m.width);
+        h = m.height;
       }
     } else {
-      w = textWidth(font, s);
-      h = font.height;
+      ({ width: w, height: h } = oneLine());
     }
     const a = stringHelpers.resolve(vm, rect);
     if (a) a.data.splice(0, 4, 0, 0, fromInt(w - 1), fromInt(h - 1));
     return 0;
   },
-  TextWidth: (vm, [str = 0, fontNo = 0]) => textWidth(text(vm).font(fontNo), stringHelpers.str(vm, str)),
+  TextWidth: (vm, [str = 0, fontNo = 0]) => styledWidth((n) => text(vm).font(n), parseStyled(stringHelpers.str(vm, str), fontNo)),
   PointSize: (vm, [fontNo = 0]) => text(vm).font(fontNo).height,
   TextFonts: () => 0,
   TextColors: () => 0,
@@ -221,7 +234,7 @@ export const textKernels: Record<string, KernelFn> = {
     if (!vm.memory.object(obj)) return NULL;
     const w = Math.max(1, toSigned(width)), h = Math.max(1, toSigned(height));
     const str = unescapeText(stringHelpers.str(vm, vm.getProp(obj, "text") ?? 0));
-    const font = text(vm).font(prop(vm, obj, "font"));
+    const fontNo = prop(vm, obj, "font");
     const fore = prop(vm, obj, "fore") & 0xff;
     const align = prop(vm, obj, "mode");
     const rect = {
@@ -247,7 +260,7 @@ export const textKernels: Record<string, KernelFn> = {
       ref = vm.memory.newBitmap(cw, ch, found?.cel.skipColor ?? 0, found?.cel.skipColor ?? 0);
       if (found) vm.memory.bitmap(ref)!.pixels.set(found.cel.pixels);
     }
-    drawText(vm.memory.bitmap(ref)!, font, str, rect, fore, align);
+    drawText(vm, vm.memory.bitmap(ref)!, fontNo, str, rect, fore, align);
     return ref;
   },
 
@@ -295,7 +308,7 @@ export const textKernels: Record<string, KernelFn> = {
       const bmp = vm.memory.bitmap(bitmap)!;
       if (border >= 0) drawBorder(bmp, border & 0xff);
       const cursor = (frame >> 4) & 1 ? "" : "_"; // blink
-      drawText(bmp, font, text + cursor, rect, fore, TextAlign.Left);
+      drawText(vm, bmp, prop(vm, obj, "font"), text + cursor, rect, fore, TextAlign.Left);
       vm.setProp(obj, "bitmap", bitmap);
       graphicsKernels.FrameOut!(vm, []);
       yield { frame: true };

package/tools/art/build.d.ts

@@ -24,8 +24,11 @@ export interface ArtManifest {
             mirror: boolean;
         })[];
     }[];
-    /** Fonts drawn as sheets of glyphs (tools/art/font.ts). */
-    fonts?: {
+    /**
+     * Fonts (tools/art/font.ts): drawn as sheets of glyphs, or a bitmap font with its own
+     * metrics, a JSON file (bearings, advances, its atlas) exported from the font's source.
+     */
+    fonts?: ({
         number: number;
         png: string;
         cell: [number, number];
@@ -33,7 +36,10 @@ export interface ArtManifest {
         spacing?: number;
         space?: number;
         lineHeight?: number;
-    }[];
+    } | {
+        number: number;
+        metrics: string;
+    })[];
 }
 export declare class ArtError extends Error {
 }