sci2-ts 0.14.0 → 0.15.1

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.1](https://github.com/rlueder/sci-ts/compare/v0.15.0...v0.15.1) (2026-10-02)
+
+### Fixed
+
+* **viewer:** fetch game files with the build's version ([#18](https://github.com/rlueder/sci-ts/issues/18)) ([370e490](https://github.com/rlueder/sci-ts/commit/370e490d9c618d78223fbba1df4850a8c6ebb0a2))
+
+## [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/apps/viewer/src/files.d.ts

@@ -4,6 +4,11 @@ export declare const BASE: string;
 /**
  * FileSource over game/: the dev server's mount (see vite.config.ts), or the game copied
  * next to a built site, with its file names in game/files.json (`pnpm game site`).
+ *
+ * A built site's files.json also has the build's `version`. It's always fetched fresh, and
+ * every game file is fetched with the version on its URL, so after a new build a browser
+ * can't mix its cached files with the new ones (an old RESOURCE.000 under a new RESOURCE.MAP
+ * doesn't start).
  */
 export declare const httpFiles: FileSource;
 /**

package/apps/viewer/src/files.js

@@ -5,14 +5,19 @@ export const BASE = import.meta.env.BASE_URL;
 /**
  * FileSource over game/: the dev server's mount (see vite.config.ts), or the game copied
  * next to a built site, with its file names in game/files.json (`pnpm game site`).
+ *
+ * A built site's files.json also has the build's `version`. It's always fetched fresh, and
+ * every game file is fetched with the version on its URL, so after a new build a browser
+ * can't mix its cached files with the new ones (an old RESOURCE.000 under a new RESOURCE.MAP
+ * doesn't start).
  */
 export const httpFiles = {
     async read(path) {
-        const res = await fetch(`${BASE}game/${path}`);
+        const res = await fetch(await gameUrl(path));
         return res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
     },
     async readRange(path, offset, length) {
-        const res = await fetch(`${BASE}game/${path}`, { headers: { Range: `bytes=${offset}-${offset + length - 1}` } });
+        const res = await fetch(await gameUrl(path), { headers: { Range: `bytes=${offset}-${offset + length - 1}` } });
         const bytes = new Uint8Array(await res.arrayBuffer());
         // A server that ignores Range (Python's http.server) sends the whole file.
         return res.status === 206 ? bytes : bytes.subarray(offset, offset + length);
@@ -20,11 +25,20 @@ export const httpFiles = {
     async list(dir) {
         if (import.meta.env.DEV)
             return (await fetch(`/__list?dir=${encodeURIComponent(dir)}`)).json();
-        staticListing ??= fetch(`${BASE}game/files.json`).then((r) => (r.ok ? r.json() : {}));
-        return (await staticListing)[dir] ?? [];
+        const files = (await staticListing())[dir];
+        return Array.isArray(files) ? files : [];
     },
 };
-let staticListing;
+let listing;
+const staticListing = () => (listing ??= fetch(`${BASE}game/files.json`, { cache: "no-store" }).then((r) => (r.ok ? r.json() : Promise.resolve({}))));
+/** A game file's URL: on a built site, with the build's version (see httpFiles). */
+async function gameUrl(path) {
+    const url = `${BASE}game/${path}`;
+    if (import.meta.env.DEV)
+        return url;
+    const version = (await staticListing()).version;
+    return typeof version === "string" ? `${url}?v=${encodeURIComponent(version)}` : url;
+}
 // --- Mods -------------------------------------------------------------------------------
 const MODS_KEY = `${APP_ID}.mods`;
 /**

package/apps/viewer/src/files.ts

@@ -7,25 +7,40 @@ export const BASE = import.meta.env.BASE_URL;
 /**
  * FileSource over game/: the dev server's mount (see vite.config.ts), or the game copied
  * next to a built site, with its file names in game/files.json (`pnpm game site`).
+ *
+ * A built site's files.json also has the build's `version`. It's always fetched fresh, and
+ * every game file is fetched with the version on its URL, so after a new build a browser
+ * can't mix its cached files with the new ones (an old RESOURCE.000 under a new RESOURCE.MAP
+ * doesn't start).
  */
 export const httpFiles: FileSource = {
   async read(path) {
-    const res = await fetch(`${BASE}game/${path}`);
+    const res = await fetch(await gameUrl(path));
     return res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
   },
   async readRange(path, offset, length) {
-    const res = await fetch(`${BASE}game/${path}`, { headers: { Range: `bytes=${offset}-${offset + length - 1}` } });
+    const res = await fetch(await gameUrl(path), { headers: { Range: `bytes=${offset}-${offset + length - 1}` } });
     const bytes = new Uint8Array(await res.arrayBuffer());
     // A server that ignores Range (Python's http.server) sends the whole file.
     return res.status === 206 ? bytes : bytes.subarray(offset, offset + length);
   },
   async list(dir) {
     if (import.meta.env.DEV) return (await fetch(`/__list?dir=${encodeURIComponent(dir)}`)).json();
-    staticListing ??= fetch(`${BASE}game/files.json`).then((r) => (r.ok ? r.json() : {}));
-    return (await staticListing)[dir] ?? [];
+    const files = (await staticListing())[dir];
+    return Array.isArray(files) ? files : [];
   },
 };
-let staticListing: Promise<Record<string, string[]>> | undefined;
+
+let listing: Promise<Record<string, unknown>> | undefined;
+const staticListing = () => (listing ??= fetch(`${BASE}game/files.json`, { cache: "no-store" }).then((r): Promise<Record<string, unknown>> => (r.ok ? r.json() : Promise.resolve({}))));
+
+/** A game file's URL: on a built site, with the build's version (see httpFiles). */
+async function gameUrl(path: string): Promise<string> {
+  const url = `${BASE}game/${path}`;
+  if (import.meta.env.DEV) return url;
+  const version = (await staticListing()).version;
+  return typeof version === "string" ? `${url}?v=${encodeURIComponent(version)}` : url;
+}
 
 // --- Mods -------------------------------------------------------------------------------
 

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.1",
   "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;
+};