@openpresentation/opf-render 0.18.0 → 0.18.2

package/dist/fonts.d.ts

@@ -57,7 +57,15 @@ export interface RenderFonts {
 /** Cuts an embedded face to code points (RR-65), with hb-subset; a face whose license, Reserved Font Name or fsType does not allow it keeps its own data URL. */
 export interface FontSubsets { subsetDataUrl(font: EmbeddedFont, codePoints: Iterable<number>): string }
 /** Draws a slide's text as glyph outlines (RR-64). Read by `toSvg`; hosts pass the handle and `text: "paths"`. */
-export interface TextOutlines { outlineSlideText(content: string[], options: object): { content: string[]; defs: string } }
+export interface TextOutlines {
+  outlineSlideText(content: string[], options: object): { content: string[]; defs: string };
+  /**
+   * HarfBuzz shaping of one run of a face (opf-render#188), present when the handle has the shaper (the Node handle always, a browser
+   * handle with `shapeWasm`). Read by `toPdf`, which then shapes the vector PDF's text as the browser shapes it, and by `toPng` and
+   * the raster PDF, which pin complex-script clusters at its pens (opf-render#189); fontkit otherwise.
+   */
+  shape?(face: { hash: string; data: Uint8Array }, text: string, options?: { direction?: "ltr" | "rtl"; lang?: string; features?: Record<string, boolean> }): { gid: number; codePoints: number[]; advance: number; xOffset: number; yOffset: number }[];
+}
 /** What `fonts.ensure(presentation)` loaded: the script packages and vendored faces that were missing, and drawn CJK characters no face covers. */
 export interface EnsureResult { scripts: string[]; lazy: LazyFont[]; uncovered: string[] }
 /** The fonts handle `loadFonts()` returns from `/fonts-node` and `/fonts-browser`: pass it as `{ fonts }` to every deck-level function. */

package/dist/hb-shape.js

@@ -70,8 +70,13 @@ function shaperOver(instance, state) {
     return font;
   };
   return {
-    /** Shape `text` with the face (`key` names it, `data` is its bytes); `features` is an object of OpenType feature booleans. */
-    shape(key, data, text, { direction = "ltr", language, features } = {}) {
+    /**
+     * Shape `text` with the face (`key` names it, `data` is its bytes); `features` is an object of OpenType feature booleans.
+     * `clusterLevel` is HarfBuzz's cluster level (0 by default: a mark joins its base's cluster and a reordered syllable is one
+     * cluster; 2 keeps each character with the glyph it became). It changes only which glyph carries which characters, never the
+     * glyphs or their positions.
+     */
+    shape(key, data, text, { direction = "ltr", language, features, clusterLevel } = {}) {
       const font = fontFor(key, data);
       const buffer = hb.hb_buffer_create();
       const units = text.length, textPointer = hb.malloc(units * 2 + 2);
@@ -81,6 +86,7 @@ function shaperOver(instance, state) {
       try {
         hb.hb_buffer_add_utf16(buffer, textPointer, units, 0, units);
         hb.hb_buffer_set_direction(buffer, HB_DIRECTION[direction] ?? HB_DIRECTION.ltr);
+        if (clusterLevel) hb.hb_buffer_set_cluster_level(buffer, clusterLevel);
         if (language) { const tag = string(language); allocated.push(tag.pointer); hb.hb_buffer_set_language(buffer, hb.hb_language_from_string(tag.pointer, tag.length)); }
         hb.hb_buffer_guess_segment_properties(buffer);
         const entries = Object.entries(features ?? {});
@@ -102,12 +108,16 @@ function shaperOver(instance, state) {
           const info = infos + index * INFO_SIZE, position = positions + index * POSITION_SIZE;
           glyphs.push({ gid: data32.getUint32(info, true), cluster: data32.getUint32(info + 8, true), advance: data32.getInt32(position, true), xOffset: data32.getInt32(position + 8, true), yOffset: data32.getInt32(position + 12, true) });
         }
-        // The characters of each cluster go to its first glyph in output order; later glyphs of the cluster carry none.
+        // The characters of each cluster go to one of its glyphs: the first in logical order (output order, reversed right to left)
+        // that advances the pen, else the first; its other glyphs carry none (a mark or dot the font split off a letter).
         const starts = [...new Set(glyphs.map((glyph) => glyph.cluster))].sort((a, b) => a - b);
-        const seen = new Set();
+        const carriers = new Map();
+        for (const glyph of direction === "rtl" ? [...glyphs].reverse() : glyphs) {
+          const carrier = carriers.get(glyph.cluster);
+          if (!carrier || (carrier.advance === 0 && glyph.advance !== 0)) carriers.set(glyph.cluster, glyph);
+        }
         for (const glyph of glyphs) {
-          if (seen.has(glyph.cluster)) { glyph.codePoints = []; continue; }
-          seen.add(glyph.cluster);
+          if (carriers.get(glyph.cluster) !== glyph) { glyph.codePoints = []; continue; }
           const end = starts[starts.indexOf(glyph.cluster) + 1] ?? units;
           glyph.codePoints = [...text.slice(glyph.cluster, end)].map((character) => character.codePointAt(0));
         }

package/dist/node-resolve.js

@@ -0,0 +1,24 @@
+// render#199: the files the Node entries read from disk (harfbuzzjs's .wasm, the installed `@expo-google-fonts/*` packages and this
+// package's vendored `fonts/` directory) are located at run time, by Node's own resolution from this file, in a form bundlers leave
+// alone. A bundler (Next.js Turbopack, webpack) treats `require.resolve` on `createRequire(import.meta.url)` as a module import: a
+// literal .wasm specifier is compiled as a WebAssembly module (which fails `next build`), a computed one (`${name}/package.json`)
+// becomes a stub that always throws, and `new URL(`../${dir}/`, import.meta.url)` becomes the URL of an unrelated emitted asset.
+// Here `createRequire` is reached through the module namespace and the specifier is a variable behind the bundlers' ignore comments,
+// so neither is traced, and the package root is computed from this file's path. Plain Node resolves exactly as before.
+import * as nodeModule from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+/** This package's root directory (the parent of `dist/`). */
+export const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+
+const requireHere = nodeModule.createRequire(import.meta.url);
+
+/**
+ * The absolute path of an installed file (`harfbuzzjs/dist/harfbuzz.wasm`, `@expo-google-fonts/roboto/package.json`), resolved as
+ * `require.resolve` resolves it from this package, or from `directory` when given. Throws `MODULE_NOT_FOUND` like `require.resolve`.
+ */
+export function resolveInstalled(specifier, directory) {
+  const resolver = directory === undefined ? requireHere : nodeModule.createRequire(path.join(directory, "package.json"));
+  return resolver.resolve(/* webpackIgnore: true */ /* turbopackIgnore: true */ specifier);
+}

package/dist/pdf-text.js

@@ -7,8 +7,8 @@ import { attributesOf, inheritStyle, parseFontFamilies, parseFontWeight, parseLe
 // SVG text layout for the vector PDF export (RR-12): the renderer has already decided every line, position and
 // width (x, y, text-anchor, textLength), so this module only turns that into positioned glyph runs: text chunks,
 // the Unicode bidirectional algorithm (the SVG carries directional isolates around right-to-left paragraphs),
-// per-character font fallback, OpenType shaping with fontkit and textLength adjustment. It never wraps, shrinks
-// or truncates text.
+// per-character font fallback, OpenType shaping (HarfBuzz through `env.shape` when the fonts handle has it, fontkit
+// otherwise) and textLength adjustment. It never wraps, shrinks or truncates text.
 
 const bidi = bidiFactory();
 const IGNORED = /[⁦-⁩‎‏‪-‮؜]/u;
@@ -245,8 +245,8 @@ function shapeRun(run, env) {
   const size = parseFloat(style["font-size"]) || 16;
   const direction = run.level % 2 === 1 ? "rtl" : "ltr";
   const language = openTypeLanguage(style.lang ?? style["xml:lang"]);
-  // RR-64: outlined text is shaped by HarfBuzz (env.shape), the browser's shaper; the vector PDF keeps fontkit.
-  // HarfBuzz takes the BCP 47 tag (`lang`); fontkit the OpenType language system (`language`).
+  // RR-64, opf-render#188: outlined text and the vector PDF are shaped by HarfBuzz (env.shape), the browser's shaper, when the
+  // fonts handle carries it; fontkit otherwise. HarfBuzz takes the BCP 47 tag (`lang`); fontkit the OpenType language system (`language`).
   const glyphs = (env.shape ?? shape)(run.face, run.text, { features: featuresOf(style), language, lang: style.lang ?? style["xml:lang"], direction });
   const scale = size / run.face.upem;
   const letterSpacing = parseLength(style["letter-spacing"], { fontSize: size }) ?? 0;

package/dist/pdf-vector.js

@@ -81,6 +81,8 @@ class Converter {
     this.env = {
       fonts: this.fonts,
       defaults: this.defaults,
+      // opf-render#188: HarfBuzz, the browser's shaper, from the fonts handle (`fonts.outlines.shape`); fontkit without one.
+      ...(typeof options.shape === "function" ? { shape: options.shape } : {}),
       diagnostic: (d) => this.diagnostic(d),
       // A feature the PDF cannot give: reported once per character and family, fatal under `strict`.
       missing: (d) => {
@@ -797,16 +799,24 @@ class Converter {
         // The text object starts at the glyph's natural position (PDFium merges an /ActualText span across adjacent objects only),
         // and the font's horizontal placement is a leading adjustment inside it.
         const shift = glyph.xOffset ? [num(-glyph.xOffset * 1000 / upem, 3)] : [];
-        operations.push({ at: [run.x + run.scaleX * penBefore, run.y - glyph.yOffset * scale], items: [...shift, `<${code}>`] });
+        // A glyph shown alone only because it follows a placed one keeps the baseline (the glyphs after it continue on its line).
+        operations.push({ at: [run.x + run.scaleX * penBefore, run.y - (placed ? glyph.yOffset * scale : 0)], items: [...shift, `<${code}>`] });
         current = null;
-        pending = 0;
+        // After a glyph that is not itself placed, the text continues from it: what its shaped advance (and its placement)
+        // differs from the font's width moves the next glyph (opf-render#188: a zero-width joiner after a mark put the rest of
+        // the run its nominal width off). After a placed glyph the next one is placed by its own Td.
+        pending = placed ? 0 : nominal - shaped + glyph.xOffset * 1000 / upem;
         placedBefore = placed;
         return;
       }
       if (current === null) { current = { items: [] }; operations.push(current); }
+      // A small horizontal placement (at most the threshold above) moves the glyph inside the TJ array and back after it
+      // (opf-render#188: it was dropped, which put an Arabic or Telugu glyph up to 0.025 em off).
+      const shift = glyph.xOffset * 1000 / upem;
+      pending -= shift;
       addNumber();
       hex += code;
-      pending += nominal - shaped;
+      pending += nominal - shaped + shift;
     };
     // Each unit is a glyph, or for a left-to-right run the glyph map cannot give back (reordered Indic or Khmer clusters, a
     // no-break space) a cluster of glyphs. A unit whose text the map cannot give carries it as /ActualText, one span per

package/dist/pdf-writer.js

@@ -1,4 +1,4 @@
-import pako from "pako";
+import { deflate } from "pako";
 import { sha256Bytes } from "./sha256.js";
 
 // A small PDF object writer for the vector export (RR-12). Everything it emits is a pure function of the objects
@@ -62,8 +62,11 @@ export function ref(number) {
   return `${number} 0 R`;
 }
 
+// legacyHash keeps the classic zlib hash (canonical zlib bytes, as pako 1 wrote them). pako 3 defaults to the faster hash
+// of Chromium zlib (Node), which writes different and about 1% larger streams: the inflated content is the same, the
+// PDF bytes and their hashes are not.
 export function flate(bytes) {
-  return pako.deflate(bytes, { level: 9 });
+  return deflate(bytes, { level: 9, legacyHash: true });
 }
 
 export function sha256(bytes) {

package/dist/player.js

@@ -11,7 +11,7 @@ import { loadPreviewFonts } from "./preview-fonts.js";
 export { DeckError } from "./deck-runtime.js";
 
 const AUDIENCE_CSS = `
-:host { all: initial; }
+:host { all: initial; color-scheme: inherit; }
 * { box-sizing: border-box; }
 [hidden] { display: none !important; }
 .player { position: fixed; inset: 0; z-index: 2147483000; background: #000; color: #fff; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; outline: none; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
@@ -35,7 +35,11 @@ const AUDIENCE_CSS = `
 .goto[hidden] { display: none; }
 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 .msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }
-@media (forced-colors: active) { .hud button { border-color: ButtonText; } }
+@media (forced-colors: active) {
+  .hud button { border-color: ButtonText; }
+  .hud button:focus-visible { outline-color: Highlight; }
+  .hud button[aria-disabled="true"] { opacity: 1; color: GrayText; border-color: GrayText; }
+}
 `;
 
 const PRESENTER_CSS = `
@@ -63,7 +67,10 @@ button[aria-pressed="true"] { background: #3d5a99; }
 button[aria-disabled="true"] { opacity: 0.45; cursor: default; }
 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 @media (max-width: 760px) { main { grid-template-columns: 1fr; overflow: auto; } }
-@media (forced-colors: active) { button, .notes, .slidebox { border-color: ButtonText; } }
+@media (forced-colors: active) {
+  button, .notes, .slidebox { border-color: ButtonText; }
+  button[aria-disabled="true"] { opacity: 1; color: GrayText; border-color: GrayText; }
+}
 `;
 
 /** Document indexes in the presentation order, from the options. */

package/dist/preview-fonts-node.js

@@ -5,16 +5,14 @@
 import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
-import { createRequire } from "node:module";
-import { fileURLToPath } from "node:url";
 import { BUNDLED_FONT_MANIFEST } from "./font-manifest.js";
 import { previewFontLayout } from "./preview-fonts.js";
 import { scriptFontPackages } from "./script-font-pack.js";
+import { packageRoot as rendererRoot, resolveInstalled } from "./node-resolve.js";
 
 const ALLOWED_LICENSES = ["OFL-1.1", "Apache-2.0", "MIT", "UFL-1.0"];
 const sha256 = (bytes) => crypto.createHash("sha256").update(bytes).digest("hex");
 const safeFile = /^[A-Za-z0-9_./-]+$/;
-const rendererRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 
 function within(directory, file) {
   const resolved = path.resolve(directory, file);
@@ -23,9 +21,8 @@ function within(directory, file) {
 }
 
 function resolvePackageDirectory(name, from) {
-  const searched = [createRequire(path.join(rendererRoot, "package.json")), createRequire(path.join(from ?? process.cwd(), "package.json"))];
-  for (const requireFrom of searched) {
-    try { return path.dirname(requireFrom.resolve(`${name}/package.json`)); } catch { /* try the next location */ }
+  for (const directory of [rendererRoot, from ?? process.cwd()]) {
+    try { return path.dirname(resolveInstalled(`${name}/package.json`, directory)); } catch { /* try the next location */ }
   }
   return undefined;
 }

package/dist/raster-text.js

@@ -9,10 +9,14 @@
 // For the SVG about to be rasterized (never the emitted SVG), every <text> whose content has characters of an affected script (the
 // Indic scripts, Thai, Lao, Khmer, Myanmar), or Hangul in a KOR-language text, becomes a <g> that carries the text's attributes and
 // draws its content cluster by cluster at absolute positions:
-//   - the x of each cluster is the fontkit advance of the prefix of its run, measured with the face resvg will pick for the run
+//   - the x of each cluster is the fontkit pen at its first character in its run shaped as a whole (opf-render#189: a prefix shaped
+//     alone loses the context of the next character, such as a Thai leading vowel kerned to its consonant; the prefix's advance is used
+//     where the run's glyphs do not map back to its characters, or the run has a kinzi), measured with the face resvg will pick for the run
 //     (fontdb's family, style and weight matching over the same font files, with the same glyph fallback order), the OpenType language
 //     of the SVG's lang and the policy features, scaled to the run's textLength when it has one; text-anchor middle and end are
-//     resolved into absolute starts, baseline-shift into the y;
+//     resolved into absolute starts, baseline-shift into the y. When the conversion has HarfBuzz (`shape`, the fonts handle's
+//     `outlines.shape`), the pens are HarfBuzz's, the browser's shaper (fontkit kerns after a decomposed Thai sara am differently);
+//     fontkit's otherwise;
 //   - a cluster of a script whose fontkit glyph runs equal HarfBuzz's in the corpus (Devanagari, Gujarati, Oriya, Tamil, Kannada,
 //     Sinhala) is drawn as fontkit's glyph outlines (<path> per glyph), so a conjunct under a pre-base vowel is the browser's;
 //   - any other cluster (Bengali, Gurmukhi, Telugu, Malayalam, Thai, Lao, Khmer and Myanmar, where fontkit orders marks differently
@@ -27,7 +31,9 @@
 import { readFile } from "node:fs/promises";
 import { create } from "fontkit";
 import { disabledFeaturesFor } from "./font-compatibility.js";
+import { pinGlyphCodePoints } from "./font-registry.js";
 import { openTypeLanguage } from "./script-fonts.js";
+import { sha256Bytes } from "./sha256.js";
 
 const AFFECTED = /[\p{scx=Devanagari}\p{scx=Bengali}\p{scx=Gurmukhi}\p{scx=Gujarati}\p{scx=Oriya}\p{scx=Tamil}\p{scx=Telugu}\p{scx=Kannada}\p{scx=Malayalam}\p{scx=Sinhala}\p{scx=Thai}\p{scx=Lao}\p{scx=Khmer}\p{scx=Myanmar}]/u;
 // Scripts whose fontkit glyph runs equal HarfBuzz's for every corpus sample (glyph ids, order and advances, no retry): drawn as outlines.
@@ -53,8 +59,11 @@ const PAINT = new Set(["fill", "fill-opacity", "fill-rule", "opacity", "stroke",
 const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
 const faceCache = new Map();
 
-/** Rewrites complex-script text of `svg` into per-cluster positioned pieces for resvg (see the file comment). */
-export async function pinScriptClusters(svg, { fontFiles = [], defaultFontFamily = "Roboto", sansSerifFamily, serifFamily, monospaceFamily, cursiveFamily, fantasyFamily } = {}) {
+/**
+ * Rewrites complex-script text of `svg` into per-cluster positioned pieces for resvg (see the file comment). `shape` is the fonts
+ * handle's HarfBuzz shaper (`outlines.shape`): the clusters are then pinned at HarfBuzz's pens, else at fontkit's.
+ */
+export async function pinScriptClusters(svg, { fontFiles = [], defaultFontFamily = "Roboto", sansSerifFamily, serifFamily, monospaceFamily, cursiveFamily, fantasyFamily, shape } = {}) {
   if (!AFFECTED.test(svg) && !HANGUL.test(svg)) return svg;
   // resvg-js names for the generic families (its own defaults where rasterizeSvg sets none) and for text without a font-family.
   const generics = {
@@ -78,7 +87,7 @@ export async function pinScriptClusters(svg, { fontFiles = [], defaultFontFamily
     const inner = svg.slice(tokens.lastIndex, closeIndex);
     tokens.lastIndex = closeIndex + "</text>".length;
     if (!needsRewrite(inner, props)) continue;
-    const rewritten = rewriteText({ attrs, attributes, inner, props }, await database(), generics);
+    const rewritten = rewriteText({ attrs, attributes, inner, props }, await database(), generics, typeof shape === "function" ? shape : undefined);
     if (rewritten === null) continue;
     output += svg.slice(end, match.index) + rewritten;
     end = tokens.lastIndex;
@@ -215,7 +224,7 @@ export function clusterPieces(text, pinAll = false) {
   return pieces;
 }
 
-function rewriteText(text, db, generics) {
+function rewriteText(text, db, generics, shape) {
   const root = parseInner(text.inner);
   if (!root) return null;
   const rootProps = text.props;
@@ -260,7 +269,7 @@ function rewriteText(text, db, generics) {
     const base = selectFace(db, leaf.props, generics);
     if (!base) return null;
     leaf.runs = faceRuns(db, base, leaf.value);
-    const widths = measurePrefixes(leaf.runs, leaf.pieces.map(piece => piece.end), leaf.props);
+    const widths = measurePrefixes(leaf.runs, leaf.pieces.map(piece => piece.end), leaf.props, shape);
     if (!widths) return null;
     let previous = 0;
     for (const [index, piece] of leaf.pieces.entries()) { piece.width = widths[index] - previous; previous = widths[index]; }
@@ -353,11 +362,13 @@ async function readFace(file) {
   const data = new Uint8Array(await readFile(file));
   const font = create(data);
   if (!font?.layout || !font.unitsPerEm) return null;
+  // opf-render#125: an outline drawn for one cluster (ऱ, whose component is the nukta glyph) must not change how a later nukta shapes.
+  pinGlyphCodePoints(font);
   const records = font.name?.records ?? {};
   const names = Object.values(records.preferredFamily ?? {}).length ? Object.values(records.preferredFamily) : Object.values(records.fontFamily ?? {});
   const os2 = font["OS/2"], selection = os2?.fsSelection;
   return {
-    file, font, families: new Set(names.filter(name => typeof name === "string")), outlines: new Map(),
+    file, font, data, families: new Set(names.filter(name => typeof name === "string")), outlines: new Map(),
     weight: os2?.usWeightClass ?? 400, stretch: os2?.usWidthClass ?? 5,
     style: selection?.italic || (!os2 && font.head?.macStyle?.italic) ? "italic" : selection?.oblique ? "oblique" : "normal"
   };
@@ -423,8 +434,8 @@ function shapeRun(face, value, props) {
   catch { return { run: layout({ abvm: false, blwm: false, mark: false, mkmk: false }), retry: true }; }
 }
 
-/** Advance widths (px) of the prefixes of the runs' text ending at each offset of `ends`. */
-function measurePrefixes(runs, ends, props) {
+/** Advance widths (px) of the prefixes of the runs' text ending at each offset of `ends`, at HarfBuzz's pens when `shape` is given. */
+function measurePrefixes(runs, ends, props, shape) {
   const width = (face, value) => {
     if (!value) return 0;
     // The Myanmar kinzi is a zero-advance mark in HarfBuzz; fontkit's universal shaper keeps the nga's advance, so it is not measured.
@@ -433,16 +444,95 @@ function measurePrefixes(runs, ends, props) {
   };
   const widths = [];
   try {
+    const pens = new Map();
+    // opf-render#189: the pen at a cluster boundary inside a run is read from the run shaped as a whole, so an advance its context
+    // changes (a Thai leading vowel kerned to its consonant) is the one the browser draws; a prefix shaped alone ends without it.
+    // With the conversion's HarfBuzz (opf-render#189 follow-up), a run's pens are HarfBuzz's when it gives every boundary the run
+    // needs; a run it does not is measured with fontkit throughout, so no run mixes the two shapers.
+    const harfBuzz = new Map();
+    if (shape) for (const run of runs) {
+      const found = harfBuzzPens(run.face, run.text, props, shape);
+      if (found && ends.every(end => end <= run.start || end >= run.start + run.text.length || found.has(end - run.start))) harfBuzz.set(run, found);
+    }
+    const prefix = (run, length) => {
+      const shaped = harfBuzz.get(run)?.get(length);
+      if (shaped !== undefined) return shaped;
+      if (!pens.has(run)) pens.set(run, contextPens(run.face, run.text, props));
+      return pens.get(run)?.get(length) ?? width(run.face, run.text.slice(0, length));
+    };
+    const whole = run => harfBuzz.get(run)?.get(run.text.length) ?? width(run.face, run.text);
     let runIndex = 0, before = 0;
     for (const end of ends) {
-      while (runIndex < runs.length && runs[runIndex].start + runs[runIndex].text.length <= end) { before += width(runs[runIndex].face, runs[runIndex].text); runIndex++; }
+      while (runIndex < runs.length && runs[runIndex].start + runs[runIndex].text.length <= end) { before += whole(runs[runIndex]); runIndex++; }
       const run = runs[runIndex];
-      widths.push(run && end > run.start ? before + width(run.face, run.text.slice(0, end - run.start)) : before);
+      widths.push(run && end > run.start ? before + prefix(run, end - run.start) : before);
     }
   } catch { return null; }
   return widths;
 }
 
+/**
+ * The pen (px) at each character offset of `value` where a glyph carrying characters starts, with `value` shaped as one run: the sum
+ * of the advances of the glyphs before it. Null for text with a kinzi (measured without it, so its offsets are not the text's).
+ */
+function contextPens(face, value, props) {
+  if (value.includes(KINZI)) return null;
+  const { run } = shapeRun(face, value, props);
+  const pens = new Map(), scale = props.fontSize / face.font.unitsPerEm;
+  let consumed = 0, pen = 0;
+  for (const [index, glyph] of run.glyphs.entries()) {
+    if (glyph.codePoints?.length) {
+      if (!pens.has(consumed)) pens.set(consumed, pen * scale);
+      for (const point of glyph.codePoints) consumed += point > 0xffff ? 2 : 1;
+    }
+    pen += run.positions[index].xAdvance;
+  }
+  return consumed === value.length ? pens : null;
+}
+
+/**
+ * HarfBuzz's pen (px) at each character offset of `value`, shaped as one run by `shape` (the fonts handle's `outlines.shape`), where
+ * the glyphs before it carry exactly the characters before it (a syllable boundary, also when HarfBuzz reorders inside a syllable),
+ * and at the end of the run. Null when HarfBuzz cannot shape the run or its glyphs do not carry its characters.
+ */
+function harfBuzzPens(face, value, props, shape) {
+  let glyphs;
+  try {
+    face.harfBuzz ??= { hash: hexDigest(sha256Bytes(face.data)), data: face.data };
+    const off = disabledFeaturesFor([...face.families][0]);
+    glyphs = shape(face.harfBuzz, value, { direction: "ltr", lang: props.lang, ...(off ? { features: Object.fromEntries(off.map(tag => [tag, false])) } : {}) });
+  } catch { return null; }
+  if (!Array.isArray(glyphs)) return null;
+  const pens = new Map(), scale = props.fontSize / face.font.unitsPerEm;
+  // How many more times each character was carried by the glyphs so far than it occurs in the text before `consumed`; `unmatched`
+  // counts the characters where that is not zero, so it is zero exactly where the glyphs so far carry the text before `consumed`.
+  const balance = new Map();
+  let consumed = 0, unmatched = 0, pen = 0;
+  const count = (character, step) => {
+    const before = balance.get(character) ?? 0, after = before + step;
+    if (!before) unmatched++;
+    if (!after) { unmatched--; balance.delete(character); } else balance.set(character, after);
+  };
+  for (const glyph of glyphs) {
+    if (glyph.codePoints?.length) {
+      if (!unmatched && !pens.has(consumed)) pens.set(consumed, pen * scale);
+      for (const point of glyph.codePoints) {
+        if (consumed >= value.length) return null;
+        const own = String.fromCodePoint(value.codePointAt(consumed));
+        count(String.fromCodePoint(point), 1);
+        count(own, -1);
+        consumed += own.length;
+      }
+    }
+    pen += glyph.advance;
+  }
+  if (consumed !== value.length || unmatched) return null;
+  pens.set(value.length, pen * scale);
+  return pens;
+}
+
+const hexDigest = bytes => Array.from(bytes, byte => byte.toString(16).toUpperCase().padStart(2, "0")).join("");
+
 /** The glyph outlines of one cluster, or null when fontkit needed the mark retry (its glyph placement is then not the browser's). */
 function shapeOutlines(face, value, props) {
   let shaped;

package/dist/raster.js

@@ -8,7 +8,7 @@ import {loadConverter} from './converters.js';
 const DEFAULT_DIMENSIONS = { width: 1280, height: 720 };
 const DEFAULT_RASTER_SCALE = 1;
 const DEFAULT_RASTER_BACKGROUND = "#FFFFFF";
-let bundledFontFilesCache=null;
+let bundledFontsCache=null;
 
 // The faces a raster or PDF conversion draws with (RR-74: one `fonts`). The fonts handle (`loadFonts()` from `/fonts-node`) gives its
 // `fontFiles`, whether the bundled base faces are added (`useBundledFonts`, default true; a Node handle already holds its own, so it
@@ -82,12 +82,16 @@ async function vectorPdf(inputs, options) {
     ...(settings.useBundledFonts ? await bundledFontFiles() : []),
     ...settings.fontFiles
   ];
+  // opf-render#188: the runs are shaped by HarfBuzz, as the browser shapes them, through the fonts handle's shaper (or that of
+  // the bundled handle the conversion draws with); fontkit shapes them when neither has one.
+  const shape = options.fonts?.outlines?.shape ?? (settings.useBundledFonts ? (await bundledFonts()).outlines?.shape : undefined);
   const svgs = [];
   for (const input of inputs) svgs.push(await prepareRasterImages(normalizeSvgInput(input)));
   const {svgsToVectorPdf} = await import("./pdf-vector.js");
   return svgsToVectorPdf(svgs, {
     fontFiles,
     fontDirs: settings.fontDirs,
+    shape,
     defaultFontFamily: options.defaultFontFamily ?? "Roboto",
     sansSerifFamily: options.sansSerifFamily ?? options.defaultFontFamily ?? "Roboto",
     monospaceFamily: options.monospaceFamily ?? "Roboto Mono",
@@ -147,9 +151,13 @@ async function rasterizeSvg(svgInput, options) {
 
   if (options.dpi !== undefined) renderOptions.dpi = positiveNumber(options.dpi, "dpi", 96);
 
+  // opf-render#189: complex-script clusters are pinned at HarfBuzz's pens (the browser's shaper) through the fonts handle's shaper,
+  // or that of the bundled handle the conversion draws with; at fontkit's when neither has one.
+  const shape = options.fonts?.outlines?.shape ?? (settings.useBundledFonts ? (await bundledFonts()).outlines?.shape : undefined);
+  const pinning = { ...font, shape };
   // An SVG used as an image draws its text with these fonts: resvg gives the nested document none.
   const nestedSvg = async text => {
-    const pinned = await pinScriptClusters(text, font);
+    const pinned = await pinScriptClusters(text, pinning);
     const probe = new Resvg(pinned, { font, logLevel: "off" });
     const zoom = Math.min(4, Math.max(1, 2048 / Math.max(probe.width, probe.height)));
     return new Resvg(pinned, { ...renderOptions, fitTo: { mode: "zoom", value: zoom }, background: "rgba(0, 0, 0, 0)" }).render().asPng();
@@ -157,7 +165,7 @@ async function rasterizeSvg(svgInput, options) {
   // FF-31: resvg ignores the SVG's ligature properties, so separate the letters a Gelasio ligature would join.
   // FF-45: colour families (Noto Color Emoji) are drawn with their monochrome stand-in, which resvg can draw.
   // FF-44: resvg loses the advance of a vowel sign or space inside a complex-script cluster, so pin each cluster (raster-text.js).
-  const svg = await pinScriptClusters(separateLigatures(monochromeColorFonts(await prepareRasterImages(normalizeSvgInput(svgInput), { nestedSvg }))), font);
+  const svg = await pinScriptClusters(separateLigatures(monochromeColorFonts(await prepareRasterImages(normalizeSvgInput(svgInput), { nestedSvg }))), pinning);
 
   try {
     const image = new Resvg(svg, renderOptions).render();
@@ -177,18 +185,18 @@ const loadResvg = () => loadConverter("@resvg/resvg-js");
 const loadPdfLib = () => loadConverter("pdf-lib");
 
 async function bundledFontFiles() {
-  if (!bundledFontFilesCache) {
-    bundledFontFilesCache = resolveBundledFontFiles().catch(error => {
-      bundledFontFilesCache = null;
+  return (await bundledFonts()).fontFiles;
+}
+
+// The bundled base handle (`loadFonts()`), loaded once: its font files, and its shaper for the vector PDF.
+function bundledFonts() {
+  if (!bundledFontsCache) {
+    bundledFontsCache = import('./fonts-node.js').then(({loadFonts}) => loadFonts()).catch(error => {
+      bundledFontsCache = null;
       throw error;
     });
   }
-  return bundledFontFilesCache;
-}
-
-async function resolveBundledFontFiles() {
-  const {loadFonts} = await import('./fonts-node.js');
-  return (await loadFonts()).fontFiles;
+  return bundledFontsCache;
 }
 
 function normalizeSvgInput(value) {

package/dist/script-fonts.js

@@ -46,7 +46,9 @@ export const SCRIPT_FONT_FAMILIES = freeze({
   // text, not scripts a character carries: emoji and math characters are Common, so they stay in their
   // neighbours' run and reach these faces through the glyph fallback chain (emoji-presentation clusters
   // take the emoji face first). The keys are last so the chain tries every real script face before them.
-  Zsye: {sans: "Noto Color Emoji"},
+  // `fallback` is a further designated face, tried after the colour face: a host that installed only the monochrome Noto Emoji package
+  // still previews and exports emoji. The colour face stays first wherever it is loaded.
+  Zsye: {sans: "Noto Color Emoji", fallback: "Noto Emoji"},
   Zmth: {serif: "STIX Two Math", sans: "Noto Sans Math"},
 });
 
@@ -315,7 +317,7 @@ export function detectScripts(value, profile, { includeLanguage = true, ignoreKe
 export function designatedFamilies(script, serif = false) {
   const entry = SCRIPT_FONT_FAMILIES[script];
   if (!entry) return [];
-  return (serif ? [entry.serif, entry.sans] : [entry.sans, entry.serif]).filter(Boolean);
+  return (serif ? [entry.serif, entry.sans, entry.fallback] : [entry.sans, entry.serif, entry.fallback]).filter(Boolean);
 }
 
 const hanKeys = ["Jpan", "Hans", "Hant", "Kore"];
@@ -613,6 +615,13 @@ export function createScriptFonts(profile = {}, measurement, options = {}) {
     const push = (text, family, stack, sizeAdjust, ascent) => {
       const own = family === style.fontFamily && (!stack || stack.length === 1);
       const last = out.at(-1);
+      // opf#361: white space that follows a size-adjusted run (the space between two Hangul words of Malgun Gothic) stays in that run,
+      // as PowerPoint keeps it in the script font, so it is measured and drawn at the run's adjusted size. Left as its own run at the
+      // composed size between two adjusted runs, a browser drew it wider than its measured advance.
+      if (last?.sizeAdjust && !sizeAdjust) {
+        const space = /^\s+/u.exec(text)?.[0];
+        if (space) { last.text += space; text = text.slice(space.length); if (!text) return; }
+      }
       if (last && last.family === family && last.sizeAdjust === sizeAdjust && last.lineAscent === ascent?.lineAscent && JSON.stringify(last.stack) === JSON.stringify(stack)) last.text += text;
       else out.push({text, family, own, ...(stack && !own ? {stack} : {}), ...(sizeAdjust ? {sizeAdjust} : {}), ...(ascent ?? {})});
     };

package/dist/svg.js

@@ -19,6 +19,7 @@ import {
 } from "@openpresentation/opf";
 import { adjustedFontSize, baselineShift, createScriptFonts } from "./script-fonts.js";
 import { disabledFeaturesStyle } from "./font-compatibility.js";
+import { isSymbolEncodedFamily } from "./symbol-fonts.js";
 import { fontPolicyFor } from "@openpresentation/opf/font-policy";
 import { isDatasetChart, isDatasetTable, renderCatalogChart } from "./charts.js";
 import { renderCaption, renderFootnotes } from "./annotations.js";
@@ -616,9 +617,12 @@ function bindSlide(presentation, index, context) {
   // RR-17 (FF-41): a family that names its weight (Arial Black, Segoe UI Semibold and Light) keeps its own name through composition, so each run
   // resolves it again and draws the replacement's encoded weight (Montserrat 900, Red Hat Display 600 and 300); resolving the role to the
   // replacement family first would draw every run at 400 or 700 and measure it that way. Every other family resolves once, here.
+  // A symbol-encoded family (Symbol, Wingdings, Webdings; FF-45) keeps its name too: each run resolves it again and the script-font planner
+  // maps the run's private-use codes through the symbol table (symbol-fonts.js), as it does for a symbol run. Resolving the role to the open
+  // symbol face here would drop the encoding, and the codes would reach a face with no glyph for them (missing-glyph).
   for (const role of ["heading","body","code","accent"]) if (design.fonts[role] !== undefined) {
     const named = design.fonts[role], resolved = resolveTextStyle({fontFamily:named,fontWeight:role === "heading" ? 700 : 400},textMeasurement).fontFamily;
-    design.fonts[role] = fontPolicyFor(named)?.replacement?.weight !== undefined && resolved.toLowerCase() !== named.toLowerCase() ? named : resolved;
+    design.fonts[role] = isSymbolEncodedFamily(named) || fontPolicyFor(named)?.replacement?.weight !== undefined && resolved.toLowerCase() !== named.toLowerCase() ? named : resolved;
   }
   const geometry = composeSlide(slide, { ...slideContext.options, fontFamilies: design.fonts, textRasterPadding:context.options.textRasterPadding, textMeasurement });
   return {

package/dist/text-paths.js

@@ -96,7 +96,7 @@ export function outlineSlideText(content, { library, shaper, rootStyle = {}, rep
     defaults: [],
     splitByOwner: true,
     // HarfBuzz, the browser's shaper, when the handle carries one (RR-64 phase 2); fontkit otherwise.
-    ...(shaper ? { shape: (face, text, options) => shaper.shape(face.hash, face.data, text, { ...options, language: options.lang }) } : {}),
+    ...(shaper ? { shape: harfBuzzShape(shaper) } : {}),
     // The renderer reports its own font substitutions and missing glyphs while it lays the slide out.
     diagnostic: () => {},
     missing: () => {},
@@ -326,5 +326,17 @@ export function textOutlines(fonts) {
       if (!library) throw options.fail("text-as-paths-needs-fonts", 'text: "paths" needs font faces to outline: pass the handle loadFonts() returns as `fonts`.');
       return outlineSlideText(content, { ...options, library, shaper: fonts.shaper });
     },
+    // opf-render#188: the vector PDF shapes its runs with the same HarfBuzz. Each character stays with the glyph it became (cluster
+    // level 2: a mark, a reordered vowel sign), so the PDF's glyph-to-Unicode map and /ActualText spans give the text as before;
+    // the glyphs and positions are the outlines'.
+    ...(fonts.shaper ? { shape: harfBuzzShape(fonts.shaper, { clusterLevel: 2 }) } : {}),
   });
 }
+
+/**
+ * A layoutText `env.shape` over a HarfBuzz shaper (hb-shape.js), for faces of a FontLibrary (keyed by their content hash).
+ * HarfBuzz takes the BCP 47 tag (`lang`); fontkit the OpenType language system (`language`).
+ */
+function harfBuzzShape(shaper, { clusterLevel } = {}) {
+  return (face, text, options) => shaper.shape(face.hash, face.data, text, { ...options, language: options.lang, clusterLevel });
+}