@openpresentation/opf-render 0.18.1 → 0.18.2

package/README.md

@@ -278,7 +278,7 @@ The default changed from raster to vector in the release that added this section
 - `signal` (an `AbortSignal`, checked between pages) and `onProgress({ page, pages })` serve large decks; the same two options also work in the Node `toPdf`. The browser export yields to the page between slides.
 
 Verified in Chromium by `test/export-browser.mjs` (`npm run test:export-browser`), which also checks the text pdf.js extracts, the eight JPEG orientations, offline operation and determinism. Safari and Firefox are not exercised by this repository's CI.
-Complex scripts in raster output: resvg draws a HarfBuzz cluster with the advance of its widest glyph, so Indic, Thai, Lao, Khmer and Myanmar text lost the advance of vowel signs and ran together, and it ignores the SVG `lang` (Korean spacing). The raster path therefore rewrites its private copy of such text cluster by cluster at fontkit's positions (`src/raster-text.js`): Devanagari, Gujarati, Oriya, Tamil, Kannada and Sinhala as fontkit glyph outlines, the other scripts and Korean as single clusters resvg shapes in isolation. The emitted SVG is unchanged, text in other scripts is rasterized exactly as before, and `test/script-corpora-raster.mjs` holds every script to a HarfBuzz outline reference (the fixture's `rasterLimits` records what still differs: the KOR punctuation forms).
+Complex scripts in raster output: resvg draws a HarfBuzz cluster with the advance of its widest glyph, so Indic, Thai, Lao, Khmer and Myanmar text lost the advance of vowel signs and ran together, and it ignores the SVG `lang` (Korean spacing). The raster path therefore rewrites its private copy of such text cluster by cluster at HarfBuzz's positions when the fonts handle has its shaper (`fonts.outlines.shape`; the Node handle and the bundled faces always do), fontkit's otherwise (`src/raster-text.js`): Devanagari, Gujarati, Oriya, Tamil, Kannada and Sinhala as fontkit glyph outlines, the other scripts and Korean as single clusters resvg shapes in isolation. The emitted SVG is unchanged, text in other scripts is rasterized exactly as before, and `test/script-corpora-raster.mjs` holds every script to a HarfBuzz outline reference (the fixture's `rasterLimits` records what still differs: the KOR punctuation forms).
 
 ## Browser preview and fonts
 

package/dist/font-subset.js

@@ -16,6 +16,7 @@ import { fsTypeOf, subsettingAllowed } from "./font-fstype.js";
 const SUBSET_LICENSES = new Set(["OFL-1.1", "Apache-2.0", "MIT", "UFL-1.0"]);
 const HB_MEMORY_MODE_READONLY = 1;
 const HB_SUBSET_SETS_LAYOUT_FEATURE_TAG = 6;
+const HB_SUBSET_FLAGS_GLYPH_NAMES = 0x80;
 const CACHE_LIMIT = 256;
 
 /** The manifest faces that may be subset, by sha256: permissive license, no Reserved Font Name in the family or file name. */
@@ -56,7 +57,7 @@ export function createSubsetter(wasm) {
   const exports = instance.exports;
   const required = ["memory", "malloc", "free", "hb_blob_create", "hb_blob_destroy", "hb_blob_get_length", "hb_blob_get_data", "hb_face_create", "hb_face_destroy",
     "hb_face_reference_blob", "hb_set_add", "hb_set_clear", "hb_set_invert", "hb_subset_input_create_or_fail", "hb_subset_input_destroy", "hb_subset_input_unicode_set",
-    "hb_subset_input_set", "hb_subset_or_fail"];
+    "hb_subset_input_set", "hb_subset_input_set_flags", "hb_subset_or_fail"];
   for (const name of required) if (!(name in exports)) throw new Error(`harfbuzz-subset.wasm has no export ${name}.`);
   return {
     subset(data, codePoints) {
@@ -69,7 +70,12 @@ export function createSubsetter(wasm) {
       let result = 0, output = null;
       try {
         if (!input) return null;
+        // macOS Chromium small-size rasterization changes when named X/o are absent, even when the text does not draw them.
+        // Keeping names alone or the outlines alone is insufficient: see the exact-pixel subset browser regression.
+        exports.hb_subset_input_set_flags(input, HB_SUBSET_FLAGS_GLYPH_NAMES);
         const unicodes = exports.hb_subset_input_unicode_set(input);
+        exports.hb_set_add(unicodes, 0x58); // X
+        exports.hb_set_add(unicodes, 0x6f); // o
         for (const codePoint of codePoints) exports.hb_set_add(unicodes, codePoint);
         // Every layout feature, not only HarfBuzz's default list: the browser shapes the subset like the whole face whatever
         // font-feature-settings the SVG asks for.

package/dist/fonts.d.ts

@@ -61,7 +61,8 @@ 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; fontkit otherwise.
+   * 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 }[];
 }

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; }
@@ -37,6 +37,7 @@ const AUDIENCE_CSS = `
 .msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }
 @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; }
 }
 `;

package/dist/raster-text.js

@@ -14,7 +14,9 @@
 //     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
@@ -31,6 +33,7 @@ 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.
@@ -56,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 = {
@@ -81,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;
@@ -218,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;
@@ -263,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]; }
@@ -362,7 +368,7 @@ async function readFace(file) {
   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"
   };
@@ -428,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.
@@ -441,13 +447,23 @@ function measurePrefixes(runs, ends, props) {
     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 + prefix(run, end - run.start) : before);
     }
@@ -474,6 +490,49 @@ function contextPens(face, value, props) {
   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

@@ -151,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();
@@ -161,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();

package/dist/script-fonts.js

@@ -615,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -142,7 +142,7 @@
     "test:forced-colors-browser": "node test/forced-colors-browser.mjs artifacts/forced-colors"
   },
   "dependencies": {
-    "@openpresentation/opf": "^0.18.3",
+    "@openpresentation/opf": "^0.18.4",
     "bidi-js": "1.1.0",
     "fontkit": "^2.0.4",
     "harfbuzzjs": "1.6.3",