sci2-ts 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project. Versions follow [Semantic Versioning](https
 and the entries are generated from commit messages
 ([Conventional Commits](https://www.conventionalcommits.org/)) when a release is made.
 
+## [0.15.0](https://github.com/rlueder/sci-ts/compare/v0.14.0...v0.15.0) (2026-10-02)
+
+### Added
+
+* bitmap fonts with bearings and advances, styled text, and skinned icon bar and inventory ([#17](https://github.com/rlueder/sci-ts/issues/17)) ([0cec83b](https://github.com/rlueder/sci-ts/commit/0cec83be7211ee532c6846a08826a2b09f462ee1))
+
 ## [0.14.0](https://github.com/rlueder/sci-ts/compare/v0.13.0...v0.14.0) (2026-10-02)
 
 ### Added

package/lib/991.sc

@@ -13,50 +13,63 @@
     (return (and (>= theX x) (< theX (+ x size)) (>= theY y) (< theY (+ y size))))))
 
 ;; Slides down when the pointer reaches the top edge of the screen, or on a tap there. Its
-;; icons are the cels of `view`, loop 0 as they are and loop 1 picked, each ICON_SIZE
+;; icons are the cels of `view`, loop 0 as they are and loop 1 picked, each `size`
 ;; square and anchored at the top-left corner: walk, look, do, talk, the inventory, the
 ;; game menu (the item in use shows its own icon). A game with its own sets view in its
 ;; init: (iconBar view: 266). Picking one, or a click below the bar, closes it.
+;; With `skin`, a view drawn across the top of the screen (loop 0, cel 0, anchored at its top
+;; left) instead of the box, the icons `size` square at `left`, `left` + `spacing` and on, at
+;; `top`; the item in use goes in the fifth place, between the verbs and the inventory.
+;;   (iconBar view: 266 skin: 267 size: 32 left: 16 spacing: 42 top: 8)
 (class IconBar of Obj
   (properties
     view ICON_BAR_VIEW
+    skin -1
+    size ICON_SIZE
+    left -1         ; -1 here and below: laid out inside the box
+    spacing -1
+    top -1
     box 0
     icons 0
     height 0)
 
-  (method (show &tmp x)
+  (method (show &tmp x y step)
     (if box (return))
-    (= box
-      ((TextItem new:)
-        text: ""
-        width: SCREEN_WIDTH
-        height: (+ ICON_SIZE (* 2 ICON_GAP) (* 2 (textStyle margin?)))
-        x: 0 y: 0
-        yourself:))
-    (if (!= (textStyle frame?) -1)
-      (box height: (+ (box height?) (CelHigh (textStyle frame?) 0 4) (CelHigh (textStyle frame?) 0 5))))
-    (box init:)
-    (= height (box height?))
+    (if (!= skin -1)
+      (= box ((View new:) view: skin loop: 0 cel: 0 x: 0 y: 0 yourself:))
+      (box init:)
+      (box plane: uiPlane setPri: 100)
+      (= height (CelHigh skin 0 0))
+      (= x (if (!= left -1) left else ICON_GAP))
+      (= y (if (!= top -1) top else ICON_GAP))
+     else
+      (= box
+        ((TextItem new:)
+          text: ""
+          width: SCREEN_WIDTH
+          height: (+ size (* 2 ICON_GAP) (* 2 (textStyle margin?)))
+          x: 0 y: 0
+          yourself:))
+      (if (!= (textStyle frame?) -1)
+        (box height: (+ (box height?) (CelHigh (textStyle frame?) 0 4) (CelHigh (textStyle frame?) 0 5))))
+      (box init:)
+      (= height (box height?))
+      (= x (if (!= left -1) left else (+ (box textLeft?) ICON_GAP)))
+      (= y (if (!= top -1) top else (+ (box textTop?) ICON_GAP))))
+    (= step (if (!= spacing -1) spacing else (+ size ICON_GAP)))
     (= icons (List new:))
-    (= x (+ (box textLeft?) ICON_GAP))
     ;; The verbs, then the item, the inventory and the menu.
-    (self addIcon: x 0 V_WALK)
-    (+= x (+ ICON_SIZE ICON_GAP))
-    (self addIcon: x 1 V_LOOK)
-    (+= x (+ ICON_SIZE ICON_GAP))
-    (self addIcon: x 2 V_DO)
-    (+= x (+ ICON_SIZE ICON_GAP))
-    (self addIcon: x 3 V_TALK)
-    (+= x (+ ICON_SIZE ICON_GAP))
-    (self addIcon: x -1 V_ITEM)
-    (+= x (+ ICON_SIZE ICON_GAP))
-    (self addIcon: x 4 ICON_INVENTORY)
-    (+= x (+ ICON_SIZE ICON_GAP))
-    (self addIcon: x 5 ICON_MENU)
+    (self addIcon: x y 0 V_WALK)
+    (self addIcon: (+ x step) y 1 V_LOOK)
+    (self addIcon: (+ x (* 2 step)) y 2 V_DO)
+    (self addIcon: (+ x (* 3 step)) y 3 V_TALK)
+    (self addIcon: (+ x (* 4 step)) y -1 V_ITEM)
+    (self addIcon: (+ x (* 5 step)) y 4 ICON_INVENTORY)
+    (self addIcon: (+ x (* 6 step)) y 5 ICON_MENU)
     (= dialog self))
 
-  ;; An icon at x: cel c of the bar's view (-1: the item in use), standing for `what`.
-  (method (addIcon theX c what &tmp icon)
+  ;; An icon at (x, y): cel c of the bar's view (-1: the item in use), standing for `what`.
+  (method (addIcon theX theY c what &tmp icon)
     (if (and (== c -1) (not theItem)) (return))
     (= icon
       ((Icon new:)
@@ -64,8 +77,9 @@
         loop: (if (and (!= c -1) (== what (user verb?))) 1 else 0)
         cel: (if (== c -1) 0 else c)
         actions: what
+        size: size
         x: theX
-        y: (+ (box textTop?) ICON_GAP)
+        y: theY
         yourself:))
     (icon init:)
     (icon plane: uiPlane setPri: (+ (box priority?) 1))

package/lib/993.sc

@@ -21,16 +21,27 @@
 ;; What the hero carries (the `inventory` global): (inventory add: lens), (inventory
 ;; contains: lens). showSelf opens the window: the items in a row, one click picks one to
 ;; use (it becomes the cursor), a right-click on one looks at it, a click elsewhere closes.
+;;
+;; With `skin`, the window is that view (loop 0, cel 0, anchored at its top left) at x, y,
+;; and the items go in a grid on it: `cols` across, the first slot at (slotLeft, slotTop) in
+;; the skin and the rest slotWidth and slotHeight on, each icon `inset` into its slot.
+;;   (inventory skin: 268 x: 32 y: 30 cols: 4 slotLeft: 13 slotTop: 28 slotWidth: 60
+;;     slotHeight: 47 inset: 7 iconSize: 32)
 (class Inventory of Set
   (properties
     window 0
     icons 0
-    y 24)
+    x -1            ; -1: centred
+    y 24
+    skin -1
+    cols 4 slotLeft 0 slotTop 0 slotWidth 0 slotHeight 0 inset 0
+    iconSize INV_ICON)
 
-  (method (showSelf &tmp node item icon x)
+  (method (showSelf &tmp node item icon ix i)
     (if (not size)
       (narrator say: "You aren't carrying anything.")
       (return))
+    (if (!= skin -1) (self showCase:) (return))
     (= window
       ((TextItem new:)
         text: ""
@@ -41,17 +52,40 @@
       (window
         width: (+ (window width?) (CelWide (textStyle frame?) 0 6) (CelWide (textStyle frame?) 0 7))
         height: (+ (window height?) (CelHigh (textStyle frame?) 0 4) (CelHigh (textStyle frame?) 0 5))))
-    (window x: (/ (- SCREEN_WIDTH (window width?)) 2) y: y init:)
+    (window x: (if (== x -1) (/ (- SCREEN_WIDTH (window width?)) 2) else x) y: y init:)
     (= icons (List new:))
-    (= x (+ (window x?) (window textLeft?) INV_GAP))
+    (= ix (+ (window x?) (window textLeft?) INV_GAP))
     (for ((= node (FirstNode elements))) node ((= node (NextNode node)))
       (= item (NodeValue node))
       ;; The icon keeps its item in `actions`.
-      (= icon ((Icon new:) view: (item view?) loop: 0 cel: 0 actions: item x: x y: (+ (window y?) (window textTop?) INV_GAP) yourself:))
+      (= icon ((Icon new:) view: (item view?) loop: 0 cel: 0 actions: item size: iconSize x: ix y: (+ (window y?) (window textTop?) INV_GAP) yourself:))
       (icon init:)
       (icon plane: uiPlane setPri: (+ (window priority?) 1))
       (icons add: icon)
-      (+= x (+ INV_ICON INV_GAP)))
+      (+= ix (+ iconSize INV_GAP)))
+    (= dialog self))
+
+  ;; The window as the skin, with the items in its slots (as many as it has).
+  (method (showCase &tmp node item icon i wx wy)
+    (= wx (if (== x -1) (/ (- SCREEN_WIDTH (CelWide skin 0 0)) 2) else x))
+    (= wy y)
+    (= window ((View new:) view: skin loop: 0 cel: 0 x: wx y: wy yourself:))
+    (window init:)
+    (window plane: uiPlane setPri: 100)
+    (= icons (List new:))
+    (= i 0)
+    (for ((= node (FirstNode elements))) node ((= node (NextNode node)))
+      (= item (NodeValue node))
+      (= icon
+        ((Icon new:)
+          view: (item view?) loop: 0 cel: 0 actions: item size: iconSize
+          x: (+ wx slotLeft (* (mod i cols) slotWidth) inset)
+          y: (+ wy slotTop (* (/ i cols) slotHeight) inset)
+          yourself:))
+      (icon init:)
+      (icon plane: uiPlane setPri: 101)
+      (icons add: icon)
+      (++ i))
     (= dialog self))
 
   ;; The item whose icon is at (x, y), or 0.

package/lib/996.sc

@@ -20,7 +20,8 @@
     margin 4        ; between the text and the border or frame
     portraitFrame -1 ; a view around portraits: loop 0 behind the face, loop 1 over its edges
     portraitX 8     ; where a portrait's face goes on the left (mirrored on the right)
-    portraitY 8))
+    portraitY 8
+    nameFont -1))   ; the font for a speaker's name before their line (-1: the text's)
 
 ;; A box of text over the room: drawn by the interpreter into a bitmap, shown as a screen
 ;; item in the UI plane. Set text (and width, x, y), then init; it's as tall as the text
@@ -183,14 +184,18 @@
     (= caller 0)
     (if c (c cue:))))
 
-;; Someone with a name: their lines start with it.
+;; Someone with a name: their lines start with it (in the textStyle's nameFont, if it has one).
 (class Talker of Narrator
   (properties
     line 0)
 
   (method (say txt whoCares)
     (if line (String ARRAY_FREE line))
-    (= line (String 11 "%s: %s" name txt))
+    (= line
+      (if (!= (textStyle nameFont?) -1)
+        (String 11 "|f%d|%s:|f| %s" (textStyle nameFont?) name txt)
+       else
+        (String 11 "%s: %s" name txt)))
     (super say: line &rest whoCares)))
 
 ;; Someone with a portrait: a view whose loop 0 is the bust, loop 1 the mouth and loop 2 the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sci2-ts",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "An SCI2 adventure game engine in TypeScript, and the tools to make games with it",
   "license": "MIT",
   "type": "module",

package/packages/content/src/room.js

@@ -760,7 +760,8 @@ class RoomCompiler {
     message(noun, verb, cond, seq, l, label, spoken = true) {
         const where = `${this.yarnFile}:${l.line}`;
         const prev = this.messages.at(-1);
-        const m = { noun, verb, cond, seq, talker: this.talkerOf(l.speaker, where), speaker: l.speaker ?? "Narrator", text: plainText(l.text, where), label };
+        const shown = styledText(plainText(l.text, l.id === undefined ? where : `${where} (#line:${l.id})`), this.target.fonts, where);
+        const m = { noun, verb, cond, seq, talker: this.talkerOf(l.speaker, where), speaker: l.speaker ?? "Narrator", text: shown.text, label };
         this.messages.push(m);
         if (!spoken)
             return;
@@ -768,8 +769,8 @@ class RoomCompiler {
         if (twice)
             throw new ContentError(`${where}: #line:${l.id} is already the id of ${twice.where}`);
         this.lines.push({
-            ...(l.id === undefined ? {} : { id: l.id }), noun, verb, cond, seq, talker: m.talker, speaker: m.speaker, text: m.text, node: label,
-            ...(prev?.label === label ? { before: { speaker: prev.speaker, text: prev.text } } : {}), where,
+            ...(l.id === undefined ? {} : { id: l.id }), noun, verb, cond, seq, talker: m.talker, speaker: m.speaker, text: shown.plain, node: label,
+            ...(prev?.label === label ? { before: { speaker: prev.speaker, text: stripCodes(prev.text) } } : {}), where,
         });
     }
     talkerOf(speaker, where) {
@@ -1056,6 +1057,48 @@ const counter = (from) => {
     return () => n++;
 };
 /** Message text is single bytes: typographic punctuation becomes ASCII, anything else is an error. */
+/** Message text without SCI's font and colour codes: what's said, and what recordings are for. */
+const stripCodes = (text) => text.replace(/\|[fc]\d*\|/g, "");
+/**
+ * Yarn's [b] and [i] markup (nestable, closed with [/b] and [/i]) as SCI's font codes: bold,
+ * italic or both, back to the text's own font with |f|. `plain` is the text without it, for
+ * speech and the script. \[ is a bracket.
+ */
+function styledText(text, fonts, where) {
+    if (!text.includes("["))
+        return { text, plain: text };
+    const fail = (why) => { throw new ContentError(`${where}: ${why}`); };
+    let shown = "", plain = "", bold = 0, italic = 0;
+    const font = () => (bold && italic ? fonts.boldItalic : bold ? fonts.bold : italic ? fonts.italic : 0);
+    for (let i = 0; i < text.length;) {
+        if (text.startsWith("\\[", i)) {
+            (shown += "["), (plain += "["), (i += 2);
+            continue;
+        }
+        const m = /^\[(\/?)([a-z]+)\]/.exec(text.slice(i));
+        if (text[i] === "[") {
+            if (!m || (m[2] !== "b" && m[2] !== "i"))
+                fail(`unknown markup "${m?.[0] ?? text.slice(i, i + 8)}" (supported: [b] and [i], closed with [/b] and [/i]; \\[ for a bracket)`);
+            if (!fonts)
+                fail("[b] and [i] need the game's bold and italic fonts (\"fonts\" in game.json)");
+            const delta = m[1] ? -1 : 1;
+            if (m[2] === "b")
+                bold += delta;
+            else
+                italic += delta;
+            if (bold < 0 || italic < 0)
+                fail(`${m[0]} without its opening`);
+            const f = font();
+            shown += f ? `|f${f}|` : "|f|";
+            i += m[0].length;
+            continue;
+        }
+        (shown += text[i]), (plain += text[i]), i++;
+    }
+    if (bold || italic)
+        fail(`[${bold ? "b" : "i"}] isn't closed`);
+    return { text: shown.replace(/\|f\d*\|$/, (code) => (code === "|f|" ? "" : code)), plain };
+}
 function plainText(text, where) {
     const out = text
         .replace(/[‘’]/g, "'")

package/packages/content/src/room.ts

@@ -902,14 +902,15 @@ class RoomCompiler {
   private message(noun: number, verb: number, cond: number, seq: number, l: YarnLine, label: string, spoken = true): void {
     const where = `${this.yarnFile}:${l.line}`;
     const prev = this.messages.at(-1);
-    const m: Message = { noun, verb, cond, seq, talker: this.talkerOf(l.speaker, where), speaker: l.speaker ?? "Narrator", text: plainText(l.text, where), label };
+    const shown = styledText(plainText(l.text, l.id === undefined ? where : `${where} (#line:${l.id})`), this.target.fonts, where);
+    const m: Message = { noun, verb, cond, seq, talker: this.talkerOf(l.speaker, where), speaker: l.speaker ?? "Narrator", text: shown.text, label };
     this.messages.push(m);
     if (!spoken) return;
     const twice = l.id !== undefined && this.lines.find((x) => x.id === l.id);
     if (twice) throw new ContentError(`${where}: #line:${l.id} is already the id of ${twice.where}`);
     this.lines.push({
-      ...(l.id === undefined ? {} : { id: l.id }), noun, verb, cond, seq, talker: m.talker, speaker: m.speaker, text: m.text, node: label,
-      ...(prev?.label === label ? { before: { speaker: prev.speaker, text: prev.text } } : {}), where,
+      ...(l.id === undefined ? {} : { id: l.id }), noun, verb, cond, seq, talker: m.talker, speaker: m.speaker, text: shown.plain, node: label,
+      ...(prev?.label === label ? { before: { speaker: prev.speaker, text: stripCodes(prev.text) } } : {}), where,
     });
   }
 
@@ -1214,6 +1215,43 @@ const counter = (from: number) => {
 };
 
 /** Message text is single bytes: typographic punctuation becomes ASCII, anything else is an error. */
+/** Message text without SCI's font and colour codes: what's said, and what recordings are for. */
+const stripCodes = (text: string) => text.replace(/\|[fc]\d*\|/g, "");
+
+/**
+ * Yarn's [b] and [i] markup (nestable, closed with [/b] and [/i]) as SCI's font codes: bold,
+ * italic or both, back to the text's own font with |f|. `plain` is the text without it, for
+ * speech and the script. \[ is a bracket.
+ */
+function styledText(text: string, fonts: Target["fonts"], where: string): { text: string; plain: string } {
+  if (!text.includes("[")) return { text, plain: text };
+  const fail = (why: string): never => { throw new ContentError(`${where}: ${why}`); };
+  let shown = "", plain = "", bold = 0, italic = 0;
+  const font = () => (bold && italic ? fonts!.boldItalic : bold ? fonts!.bold : italic ? fonts!.italic : 0);
+  for (let i = 0; i < text.length; ) {
+    if (text.startsWith("\\[", i)) {
+      (shown += "["), (plain += "["), (i += 2);
+      continue;
+    }
+    const m = /^\[(\/?)([a-z]+)\]/.exec(text.slice(i));
+    if (text[i] === "[") {
+      if (!m || (m[2] !== "b" && m[2] !== "i")) fail(`unknown markup "${m?.[0] ?? text.slice(i, i + 8)}" (supported: [b] and [i], closed with [/b] and [/i]; \\[ for a bracket)`);
+      if (!fonts) fail("[b] and [i] need the game's bold and italic fonts (\"fonts\" in game.json)");
+      const delta = m![1] ? -1 : 1;
+      if (m![2] === "b") bold += delta;
+      else italic += delta;
+      if (bold < 0 || italic < 0) fail(`${m![0]} without its opening`);
+      const f = font();
+      shown += f ? `|f${f}|` : "|f|";
+      i += m![0].length;
+      continue;
+    }
+    (shown += text[i]), (plain += text[i]), i++;
+  }
+  if (bold || italic) fail(`[${bold ? "b" : "i"}] isn't closed`);
+  return { text: shown.replace(/\|f\d*\|$/, (code) => (code === "|f|" ? "" : code)), plain };
+}
+
 function plainText(text: string, where: string): string {
   const out = text
     .replace(/[‘’]/g, "'")

package/packages/content/src/target.d.ts

@@ -94,4 +94,13 @@ export interface Target {
         first: number;
         last: number;
     };
+    /**
+     * The game's fonts for Yarn's [b] and [i] markup, which become SCI's font codes (|f3|...|f|)
+     * in the message text. Without them, markup is refused.
+     */
+    fonts?: {
+        bold: number;
+        italic: number;
+        boldItalic: number;
+    };
 }

package/packages/content/src/target.ts

@@ -70,4 +70,9 @@ export interface Target {
    * of `script`, each taking the flag number), and the range a mod may use.
    */
   flags: { script: number; set: number; clear: number; test: number; first: number; last: number };
+  /**
+   * The game's fonts for Yarn's [b] and [i] markup, which become SCI's font codes (|f3|...|f|)
+   * in the message text. Without them, markup is refused.
+   */
+  fonts?: { bold: number; italic: number; boldItalic: number };
 }

package/packages/sci/src/index.d.ts

@@ -11,6 +11,7 @@ export * from "./gfx/pic-file.ts";
 export * from "./gfx/quantize.ts";
 export * from "./gfx/view-file.ts";
 export * from "./text/font.ts";
+export * from "./text/styled.ts";
 export * from "./text/message.ts";
 export * from "./script/kernel-names.ts";
 export * from "./script/vocab.ts";

package/packages/sci/src/index.js

@@ -11,6 +11,7 @@ export * from "./gfx/pic-file.js";
 export * from "./gfx/quantize.js";
 export * from "./gfx/view-file.js";
 export * from "./text/font.js";
+export * from "./text/styled.js";
 export * from "./text/message.js";
 export * from "./script/kernel-names.js";
 export * from "./script/vocab.js";

package/packages/sci/src/index.ts

@@ -11,6 +11,7 @@ export * from "./gfx/pic-file.ts";
 export * from "./gfx/quantize.ts";
 export * from "./gfx/view-file.ts";
 export * from "./text/font.ts";
+export * from "./text/styled.ts";
 export * from "./text/message.ts";
 export * from "./script/kernel-names.ts";
 export * from "./script/vocab.ts";

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

@@ -3,7 +3,13 @@ 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 declare const advanceOf: (g: Glyph) => number;
 export interface Font {
     /** Line height in pixels. */
     height: number;
@@ -20,6 +26,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 declare function parseFont(data: Uint8Array): Font;
 /** A font resource (the inverse of parseFont). Missing glyphs are written as 0×0. */
@@ -33,5 +44,11 @@ export interface TextBitmap {
     height: number;
     pixels: Uint8Array;
 }
-/** Renders already-wrapped lines, each aligned within the bitmap width. */
-export declare function renderText(font: Font, lines: string[], align?: "left" | "center"): TextBitmap;
+/**
+ * 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 declare function renderText(font: Font, lines: string[], align?: "left" | "center"): TextBitmap & {
+    originX: number;
+};

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

@@ -1,3 +1,8 @@
+/** How far the pen moves on after a glyph. */
+export const advanceOf = (g) => 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) => !!g && ((g.bearingX ?? 0) !== 0 || (g.advance ?? g.width) !== g.width);
 /**
  * SCI bitmap font (unchanged since SCI0):
  *
@@ -8,6 +13,11 @@
  *
  * 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) {
     const v = new DataView(data.buffer, data.byteOffset, data.byteLength);
@@ -28,6 +38,19 @@ export function parseFont(data) {
         }
         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 };
 }
 /** A font resource (the inverse of parseFont). Missing glyphs are written as 0×0. */
@@ -48,7 +71,9 @@ export function writeFont(font) {
         }
         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);
@@ -60,9 +85,19 @@ export function writeFont(font) {
         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, text) => [...text].reduce((w, ch) => w + (font.glyphs[ch.charCodeAt(0)]?.width ?? 0), 0);
+export const textWidth = (font, text) => [...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, text, maxWidth) {
     const lines = [];
@@ -79,25 +114,38 @@ export function wrapText(font, text, maxWidth) {
     }
     return lines;
 }
-/** Renders already-wrapped lines, each aligned within the bitmap width. */
+/**
+ * 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, lines, align = "left") {
-    const width = Math.max(1, ...lines.map((l) => textWidth(font, l)));
-    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 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)
-                continue;
-            for (let gy = 0; gy < g.height; gy++) {
+                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);
+    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;
+                        pixels[(r * font.height + gy) * width + x - left + gx] = 1;
                 }
             }
-            x += g.width;
         }
     });
-    return { width, height, pixels };
+    return { width, height, pixels, originX: -left };
 }