@openpresentation/opf-render 0.17.0 → 0.18.0

package/dist/svg.d.ts

@@ -1,5 +1,6 @@
 import type { RenderFonts, ScriptFonts } from "./fonts.js";
-import type { Catalog, Finding, UnresolvedReferenceDiagnostic } from "@openpresentation/opf";
+import type { Catalog, Finding, SlideSelection, UnresolvedReferenceDiagnostic } from "@openpresentation/opf";
+export type { SlideSelection } from "@openpresentation/opf";
 import type { SlideComposition, LayoutDiagnostic, TextMeasurement } from "@openpresentation/opf/composition";
 export declare const packageName = "@openpresentation/opf-render";
 
@@ -49,8 +50,8 @@ export type RenderDiagnostic = LayoutDiagnostic | {
   placeholder: "label" | "icon";
 };
 
-export interface RenderSvgOptions {
-  /** Leave out slides marked `hidden: true`, as the player does. Default false: one SVG per slide. With true the result holds only the visible slides, in order, so an index no longer names the slide at that index. Read by the deck-level `renderSvg`; `renderSlideSvg` draws the slide it is given. */
+export interface ToSvgOptions {
+  /** Leave out slides marked `hidden: true` when drawing the whole deck, as the player does. Default false: one SVG per slide. A slide number or selection draws exactly the slides it names. */
   skipHidden?: boolean;
   /**
    * The fonts the deck is laid out and drawn with: the handle `loadFonts()` returns (from `@openpresentation/opf-render/fonts-node` or
@@ -58,18 +59,32 @@ export interface RenderSvgOptions {
    * core's portable width estimate and the SVG names the design fonts without embedding them.
    */
   fonts?: RenderFonts;
-  /** `false` writes no `@font-face` data into the SVG (RR-61): the fonts handle still measures and the SVG still names the families, for a host whose page already has the faces (a browser `loadFonts` handle adds them to the document). Default true: each SVG embeds the faces of `fonts.embeddedFonts` its own text draws. */
-  embedFonts?: boolean;
   /**
-   * `true` draws every `<text>` as glyph outlines (RR-64): `<use>` of outlines kept once per slide in `<defs>`, so the SVG needs
+   * How the SVG draws text (RR-74). `"fonts"` (default): each SVG embeds, as `@font-face` data, the faces of `fonts.embeddedFonts` its
+   * own text draws (RR-61). `"system"`: no `@font-face` data; the fonts handle still measures and the SVG still names the families,
+   * for a host whose page already has the faces (a browser `loadFonts` handle adds them to the document).
+   *
+   * `"paths"`: every `<text>` drawn as glyph outlines (RR-64): `<use>` of outlines kept once per slide in `<defs>`, so the SVG needs
    * no font and looks the same in every viewer (about 40 KB a slide over the core example decks, against 0.5 to 4 MB of embedded
    * faces). Needs the fonts handle `loadFonts()` returns (`text-as-paths-needs-fonts` otherwise). The text is no longer text: it
-   * cannot be selected, searched or edited in place, and each outlined element is a `role="img"` group labelled with its text for
-   * assistive technology. Each element keeps its `data-opf-*` trace. Text in a colour or bitmap font stays text
-   * (`text-as-paths-kept-text`). Use it for thumbnails, previews and portable SVG files, not for an editing surface or the
-   * vector PDF (which keeps real text from `<text>` SVG). Default false.
+   * cannot be edited in place. The glyphs are shaped by HarfBuzz (the browser's shaper; the Node handle always, a browser handle
+   * given `shapeWasm`), are hidden from assistive technology, and each outlined line is also invisible real text pinned to the
+   * drawn width, so screen readers, selection, copy and find-in-page get the words. Each element keeps its `data-opf-*` trace.
+   * A run stays text, reported as `text-as-paths-fallback` with a `reason`, when its font is a colour or bitmap font
+   * (`"colour-font"`), its face's fsType restricts embedding (`"restricted"`), or it has no pinned width and HarfBuzz and the
+   * layout's measurement disagree on it (`"shaping"`). Use it for thumbnails, previews and portable SVG files, not for an editing
+   * surface or the vector PDF (which keeps real text from `<text>` SVG).
    */
-  textAsPaths?: boolean;
+  text?: "fonts" | "system" | "paths";
+  /**
+   * `false` embeds whole faces (RR-65). By default, with a fonts handle that carries `subsets` (the Node `loadFonts` handle, a browser
+   * handle given `subsetWasm`), each face an SVG embeds is cut to the characters the slide draws, keeping every layout feature, so the
+   * browser draws it exactly like the whole face (over the core example decks a slide's SVG falls from 2.4 MB to 59 KB on average).
+   * Faces whose license does not allow a modified version under their own name (Carlito, Raleway, Lora, Playfair Display, PT Serif,
+   * Merriweather Sans, Source Sans 3), whose fsType forbids subsetting, or that a host supplied, are always embedded whole. Set it to
+   * false for an SVG whose text will be edited outside the renderer.
+   */
+  subsetFonts?: boolean;
   /** `"chain"` (default): a character the resolved face lacks is drawn with the first bundled face that has it, and reported as `font-glyph-fallback`. `"none"`: exact faces, a missing glyph raises `missing-glyph`. */
   glyphFallback?: "chain" | "none";
   /** Unscaled reference-pixel clearance around supplied vector text outlines; default 1. */
@@ -107,20 +122,8 @@ export interface RenderSvgOptions {
   strictReferences?: boolean;
 }
 
-export interface SvgToPngOptions {
-  /** The fonts the conversion draws with (Node): see `SvgToPngOptions` in the main entry. */
-  fonts?: RenderFonts;
-  scale?: number;
-  background?: string;
-  dpi?: number;
-  /** Extra directories of font files to draw with. */
-  fontDirs?: string[];
-  defaultFontFamily?: string;
-  sansSerifFamily?: string;
-  monospaceFamily?: string;
-}
-
-export interface SvgToPdfOptions extends SvgToPngOptions {}
+/** The Node conversion options (types only: `toPng` and `toPdf` run in Node, or from `/export-browser`). */
+export type { ToPngOptions, ToPdfOptions } from "./index.js";
 
 export interface ResolvedPresentation {
   presentation: unknown;
@@ -173,12 +176,16 @@ export declare class OPFRenderError extends Error {
   constructor(code: string, message: string, details?: Record<string, unknown>);
 }
 
-export declare function resolvePresentation(input: unknown, options?: RenderSvgOptions): ResolvedPresentation;
-
-/** The SVG of every slide of the deck, in order. */
-export declare function renderSvg(input: unknown, options?: RenderSvgOptions): string[];
-
-/** The SVG of one slide of the deck (`index` is zero-based; out of range throws `slide-index-out-of-range`). */
-export declare function renderSlideSvg(input: unknown, index: number, options?: RenderSvgOptions): string;
+export declare function resolvePresentation(input: unknown, options?: ToSvgOptions): ResolvedPresentation;
 
+/** An SVG slide the renderer drew: its text, or its bytes. */
+export type SvgSlide = string | Uint8Array;
 
+/**
+ * The deck as SVG (RR-73). `toSvg(deck)`: every slide, in order (without the hidden ones under `skipHidden`). `toSvg(deck, 3)`: the
+ * third slide (slides count from 1; out of range throws `slide-out-of-range`). `toSvg(deck, "1-3")` or `toSvg(deck, [1, 3])`: the
+ * selected slides (a malformed selection throws `invalid-slide-selection`). The second argument may be the options instead.
+ */
+export declare function toSvg(input: unknown, options?: ToSvgOptions): string[];
+export declare function toSvg(input: unknown, slide: number, options?: ToSvgOptions): string;
+export declare function toSvg(input: unknown, slides: Exclude<SlideSelection, number>, options?: ToSvgOptions): string[];

package/dist/svg.js

@@ -22,6 +22,9 @@ import { disabledFeaturesStyle } from "./font-compatibility.js";
 import { fontPolicyFor } from "@openpresentation/opf/font-policy";
 import { isDatasetChart, isDatasetTable, renderCatalogChart } from "./charts.js";
 import { renderCaption, renderFootnotes } from "./annotations.js";
+import { drawnFaces } from "./drawn-faces.js";
+import { dataUrlFsType, embeddingAllowed } from "./font-fstype.js";
+import { rejectRenamedOptions, selectSlides } from "./slide-sources.js";
 
 export const packageName = "@openpresentation/opf-render";
 
@@ -638,19 +641,24 @@ function bindSlide(presentation, index, context) {
 }
 
 // `options.fonts` is the handle `loadFonts()` returns (or any object with a `textMeasurement` and, to embed faces in the SVG, an
-// `embeddedFonts` list). The renderer reads the two as plain options from here on. `embedFonts: false` (RR-61) keeps the
-// measurement and drops the faces, for a host whose page already holds them.
-// `textAsPaths: true` (RR-64) draws text as glyph outlines with the handle's `outlines` engine (a `loadFonts` handle carries one).
+// `embeddedFonts` list). The renderer reads the two as plain options from here on. `text` (RR-74) says how the SVG draws text:
+// `"fonts"` (default) embeds the faces the slide draws, cut to its glyphs when the handle carries `subsets` (RR-61, RR-65);
+// `"system"` embeds no face and names the families, for a host whose page already holds them; `"paths"` draws glyph outlines with
+// the handle's `outlines` engine, so the SVG needs no font (RR-64). `subsetFonts: false` embeds whole faces.
+const TEXT_MODES = ["fonts", "system", "paths"];
 function normalizeOptions(options) {
-  const { fonts, embedFonts, textAsPaths, ...rest } = options ?? {};
-  if (textAsPaths !== undefined && typeof textAsPaths !== "boolean") throw new OPFRenderError("invalid-render-options", "textAsPaths must be true or false.", { option: "textAsPaths" });
-  if (textAsPaths && typeof fonts?.outlines?.outlineSlideText !== "function") throw new OPFRenderError("text-as-paths-needs-fonts", "textAsPaths needs the fonts handle loadFonts() returns (from /fonts-node or /fonts-browser), passed as `fonts`.", { option: "textAsPaths" });
-  return { ...rest, textMeasurement: fonts?.textMeasurement, embeddedFonts: embedFonts === false ? undefined : fonts?.embeddedFonts, ...(textAsPaths ? { outlines: fonts.outlines } : {}) };
+  rejectRenamedOptions(options, "invalid-render-options");
+  const { fonts, text = "fonts", subsetFonts, ...rest } = options ?? {};
+  if (!TEXT_MODES.includes(text)) throw new OPFRenderError("invalid-render-options", 'text must be "fonts", "system" or "paths".', { option: "text", value: text });
+  if (subsetFonts !== undefined && typeof subsetFonts !== "boolean") throw new OPFRenderError("invalid-render-options", "subsetFonts must be true or false.", { option: "subsetFonts" });
+  if (typeof fonts === "string" || Array.isArray(fonts)) throw new OPFRenderError("invalid-render-options", "Drawing a deck needs the fonts handle loadFonts() returns (from /fonts-node or /fonts-browser): it measures the text. Font folders are read by toPng and toPdf for SVG input.", { option: "fonts" });
+  if (text === "paths" && typeof fonts?.outlines?.outlineSlideText !== "function") throw new OPFRenderError("text-as-paths-needs-fonts", 'text: "paths" needs the fonts handle loadFonts() returns (from /fonts-node or /fonts-browser), passed as `fonts`.', { option: "text" });
+  return { ...rest, textMeasurement: fonts?.textMeasurement, embeddedFonts: text === "system" ? undefined : fonts?.embeddedFonts, ...(text === "paths" ? { outlines: fonts.outlines } : {}), ...(subsetFonts !== false && fonts?.subsets ? { subsets: fonts.subsets } : {}) };
 }
 
 /**
  * Resolve a presentation for drawing: template variables filled, the boundary check passed, and every slide bound to its
- * layout, design, script fonts and composed geometry. `renderSvg` and `renderSlideSvg` draw from this.
+ * layout, design, script fonts and composed geometry. `toSvg` draws from this.
  */
 export function resolvePresentation(input, options = {}) {
   return resolveDeck(input, normalizeOptions(options));
@@ -673,27 +681,24 @@ function resolveDeck(input, options) {
 }
 
 /**
- * The SVG of every slide of the deck, in order. `skipHidden: true` leaves out slides marked `hidden` (the sequence the player
- * presents); the result is then shorter than the deck, so an index no longer names the slide at that index.
+ * The deck as SVG (RR-73): `toSvg(deck)` gives every slide, in order, as an array; `toSvg(deck, 3)` the third slide as one string
+ * (slides count from 1); `toSvg(deck, "1-3")` (`"2,4"`, `"5-"`, the CLI's --slides syntax, or a list such as `[1, 3]`) the selected slides as an array. The
+ * second argument may be the options instead, told apart by type. `skipHidden: true` leaves slides marked `hidden` out of the
+ * whole deck (the sequence the player presents); a selection draws exactly the slides it names.
  */
-export function renderSvg(input, options = {}) {
-  const drawn = normalizeOptions(options);
+export function toSvg(input, slides, options) {
+  if (slides !== null && typeof slides === "object" && !Array.isArray(slides)) { options = slides; slides = undefined; }
+  const drawn = normalizeOptions(options ?? {});
   const resolved = resolveDeck(input, drawn);
-  const indexes = resolved.slides.map((_, index) => index).filter(index => !(options.skipHidden === true && resolved.presentation.slides[index]?.hidden === true));
-  return indexes.map(index => renderResolvedSlide(resolved, index, drawn));
-}
-
-/** The SVG of one slide of the deck (a zero-based index). */
-export function renderSlideSvg(input, index, options = {}) {
-  const drawn = normalizeOptions(options);
-  const resolved = resolveDeck(input, drawn);
-  if (!Number.isInteger(index) || index < 0 || index >= resolved.slides.length) {
-    throw new OPFRenderError("slide-index-out-of-range", `Slide index ${index} is out of range.`, {
-      slideIndex: index,
-      slideCount: resolved.slides.length
-    });
+  const count = resolved.slides.length;
+  if (typeof slides === "number") {
+    if (!Number.isInteger(slides) || slides < 1 || slides > count) throw new OPFRenderError("slide-out-of-range", `Slide ${slides} is not in the presentation, which has ${count} slide${count === 1 ? "" : "s"} (slides count from 1).`, { slide: slides, slideCount: count });
+    return renderResolvedSlide(resolved, slides - 1, drawn);
   }
-  return renderResolvedSlide(resolved, index, drawn);
+  const numbers = slides === undefined
+    ? resolved.slides.map((_, index) => index + 1).filter(number => !(options?.skipHidden === true && resolved.presentation.slides[number - 1]?.hidden === true))
+    : selectSlides(slides, count);
+  return numbers.map(number => renderResolvedSlide(resolved, number - 1, drawn));
 }
 
 function renderResolvedSlide(resolved, slideIndex, options) {
@@ -722,7 +727,7 @@ function renderResolvedSlide(resolved, slideIndex, options) {
     content = outlined.content;
     glyphs = outlined.defs;
   }
-  const children = [glyphs, renderEmbeddedFonts(embeddedFontsFor(options.embeddedFonts, content)), ...content].filter(Boolean);
+  const children = [glyphs, renderEmbeddedFonts(embeddedFontsFor(options.embeddedFonts, content, options.subsets, diagnostic => reportDiagnostic(diagnostic, options))), ...content].filter(Boolean);
   // FF-44: Chromium (123+) trims adjacent fullwidth punctuation by default (CSS text-spacing-trim: normal; a sequence such as
   // 「」。 is up to 10 percent narrower), but measurement and PowerPoint advance every such character by its full width, so the browser
   // would stretch the glyphs back to the pinned textLength. space-all keeps the drawn advances equal to the measured ones. Only slides
@@ -1692,12 +1697,27 @@ function renderBranding(bound,presentation,width,height,options) {
     // The group keeps its bare opacity attribute (opf-pptx's watermark parity test reads it); the picture itself is hidden.
     pieces.push(tag('g',{opacity:typeof design.watermark==='object'?design.watermark.opacity??.08:.08},renderImage({value:design.watermark,path:rootFor('watermark')},{x:width*.3,y:height*.3,width:width*.4,height:height*.4},bound,{...options,imageFit:'contain',imageDecorative:true})));
   }
-  // Cover and section slides: the deck logo core composed at the top-left of the free area, anchored left.
+  // Cover and section slides: the logo core composed (the primary organization's full logo, or the design.logo override, in the
+  // variant for this slide's background) at the top-left of the free area, anchored left. RR-71: the picture is named by its
+  // asset's alt text, else by the organization it belongs to ("Acme Corp logo"); an unnamed organization still says "Logo".
   const logo=bound.geometry.logo;
-  if(logo)pieces.push(renderImage({value:logo.source,path:logo.path},logo.box,bound,{...options,imageAnchor:logo.anchor??'left',imageLabel:'Logo',imageGenerated:true}));
+  if(logo)pieces.push(renderImage({value:logo.source,path:logo.path},logo.box,bound,{...options,imageAnchor:logo.anchor??'left',imageLabel:logoLabel(presentation,logo.path),imageGenerated:true}));
   return pieces.join('');
 }
 
+// The organization a logo path (`organization.logo.full`, `organization.1.logo.icon.onDark`) belongs to: the record at the index the path
+// names, else the single organization object.
+function logoOrganization(presentation,path){
+  const match=/^organization(?:\.(\d+))?\.logo(?:\.|$)/.exec(path??'');
+  if(!match)return undefined;
+  const organization=presentation?.organization;
+  return Array.isArray(organization)?organization[Number(match[1])]:match[1]===undefined?organization:undefined;
+}
+function logoLabel(presentation,path){
+  const name=logoOrganization(presentation,path)?.name;
+  return typeof name==='string'&&name.trim()?`${name.trim()} logo`:'Logo';
+}
+
 // A family name is written unquoted only when it is a valid sequence of CSS identifiers; a word that starts with a digit
 // ("Source Sans 3", "Noto Sans Symbols 2") or any other non-identifier character makes an unquoted name invalid CSS, which
 // drops the whole font-family in a browser (FF-45). Such names are single-quoted (the attribute is double-quoted).
@@ -1861,10 +1881,11 @@ function codeSyntax(item, layout, bound, options) {
 // the SVG names is one the browser can never select, so leaving it out changes no pixel. Only a face flagged embed:"always" is
 // embedded in every SVG. RR-59: each drawn style is checked on its own, so a family keeps an exactly matched face and, for
 // a drawn style none of its faces matches (a weight the family lacks), every face the browser could choose from.
-function embeddedFontsFor(fonts = [], content) {
+function embeddedFontsFor(fonts = [], content, subsets, report = () => {}) {
   if (!fonts.length) return fonts;
   fonts.forEach(assertEmbeddableFont);
-  const drawn = drawnFaces(content.join("\n"));
+  const characters = subsets ? new Map() : undefined;
+  const drawn = drawnFaces(content.join("\n"), characters);
   const wanted = font => {
     const triples = drawn.get(String(font.family).toLowerCase());
     if (!triples) return false;
@@ -1874,33 +1895,28 @@ function embeddedFontsFor(fonts = [], content) {
       return matching.length ? matching.includes(font) : true;
     });
   };
-  return fonts.filter(font => font?.embed === "always" || wanted(font));
-}
-
-const FONT_WEIGHT_KEYWORDS = { normal: "400", bold: "700" };
-/** family (lowercase) to the set of "weight|style" pairs the markup draws text in. */
-function drawnFaces(markup) {
-  const drawn = new Map();
-  const tokens = /<(\/?)([A-Za-z][\w:.-]*)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>|<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|[^<]+/g;
-  const stack = [{ families: [], weight: "400", style: "normal", text: false }];
-  const attribute = (attributes, name) => { const found = new RegExp(`\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`).exec(attributes); return found ? found[1] ?? found[2] : undefined; };
-  for (const [token, close, name, attributes, selfClose] of markup.matchAll(tokens)) {
-    const top = stack.at(-1);
-    if (name === undefined) {
-      if (top.text && /\S/.test(token)) for (const family of top.families) { const set = drawn.get(family) ?? new Set(); set.add(`${top.weight}|${top.style}`); drawn.set(family, set); }
-      continue;
-    }
-    if (close) { if (stack.length > 1) stack.pop(); continue; }
-    const family = attribute(attributes, "font-family"), weight = attribute(attributes, "font-weight"), style = attribute(attributes, "font-style");
-    const next = {
-      families: family === undefined ? top.families : family.split(",").map(item => item.trim().replace(/^&quot;|&quot;$|^["']|["']$/g, "").toLowerCase()).filter(Boolean),
-      weight: weight === undefined ? top.weight : FONT_WEIGHT_KEYWORDS[weight.trim()] ?? weight.trim(),
-      style: style === undefined ? top.style : /italic|oblique/.test(style) ? "italic" : "normal",
-      text: top.text || name === "text",
-    };
-    if (!selfClose) stack.push(next);
-  }
-  return drawn;
+  const drawnOrAlways = fonts.filter(font => font?.embed === "always" || wanted(font));
+  const used = drawnOrAlways.filter(embeddable);
+  const refused = drawnOrAlways.filter(font => !embeddable(font));
+  if (refused.length) report({ code: "font-embedding-restricted", faces: refused.map(font => ({ fontFamily: font.family, weight: font.weight, italic: Boolean(font.italic), fsType: embeddingChecked.get(font).fsType })),
+    message: `${[...new Set(refused.map(font => `'${font.family}'`))].join(", ")} forbid${refused.length === 1 ? "s" : ""} embedding (OS/2 fsType), so the SVG names ${refused.length === 1 ? "it" : "them"} without the font data; a viewer without the font draws the generic family.` });
+  // RR-65: each face cut to the characters the slide draws in its family (the handle's subset engine decides whether the face
+  // may be subset at all). A face no text draws (embed: "always") stays whole.
+  if (!subsets) return used;
+  return used.map(font => {
+    const points = characters.get(String(font.family).toLowerCase());
+    return points?.size ? { ...font, dataUrl: subsets.subsetDataUrl(font, points) } : font;
+  });
+}
+
+// RR-76: a face whose OS/2 fsType forbids embedding (restricted, or bitmap-only: an SVG carries outlines) is never written as
+// @font-face data. The SVG still names its family, so a viewer without the font draws the generic family; a diagnostic says
+// why. The check reads only the font's table directory and its fsType bytes, once per face object and data URL.
+const embeddingChecked = new WeakMap();
+function embeddable(font) {
+  let checked = embeddingChecked.get(font);
+  if (!checked || checked.dataUrl !== font.dataUrl) { const fsType = dataUrlFsType(font.dataUrl); checked = { dataUrl: font.dataUrl, fsType, allowed: embeddingAllowed(fsType) }; embeddingChecked.set(font, checked); }
+  return checked.allowed;
 }
 
 // Every supplied face is checked, drawn or not, so a bad entry fails on any slide. The data URI check is remembered per face

package/dist/text-paths.js

@@ -1,4 +1,4 @@
-// RR-64: `textAsPaths: true` draws every <text> of a slide as glyph outlines, so the SVG needs no font. The renderer has
+// RR-64: `text: "paths"` draws every <text> of a slide as glyph outlines, so the SVG needs no font. The renderer has
 // already decided every line, position and width (x, y, text-anchor, textLength); the vector PDF export's SVG text layout
 // (layoutText: text chunks, bidirectional runs, per-character fallback, fontkit shaping, textLength) turns that into positioned
 // glyph runs, and this module writes each glyph as a <use> of its outline. Outlines are kept once per slide in <defs>, in font
@@ -11,10 +11,11 @@
 // the font's own metrics. Text drawn with a colour or bitmap font (COLR, CBDT, sbix, SVG tables) stays <text>, reported as
 // `text-as-paths-kept-text`, and the SVG then embeds that face as usual.
 
-import { FontLibrary } from "./pdf-fonts.js";
-import { layoutText } from "./pdf-text.js";
-import { ROOT_STYLE, attributesOf, inheritStyle, parseLength } from "./pdf-style.js";
-import { decodeEntities, escapeAttribute, parseXml } from "./pdf-xml.js";
+import { FontLibrary, shape as fontkitShape } from "./pdf-fonts.js";
+import { featuresOf, layoutText } from "./pdf-text.js";
+import { ROOT_STYLE, attributesOf, inheritStyle, parseFontFamilies, parseLength } from "./pdf-style.js";
+import { openTypeLanguage } from "./script-fonts.js";
+import { decodeEntities, escapeAttribute, escapeText, parseXml } from "./pdf-xml.js";
 
 const TOKENS = /<(\/?)([A-Za-z][\w:.-]*)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>|<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|[^<]+/g;
 const ATTRIBUTE = /([^\s=/>"']+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
@@ -58,15 +59,20 @@ export function outlineLibrary(fonts) {
 
 function newLibrary(fonts) {
   const fallback = fonts?.registry?.fallbackFamily ?? "Roboto";
-  return new FontLibrary({ genericFamilies: () => [fallback] });
+  const library = new FontLibrary({ genericFamilies: () => [fallback] });
+  library.restricted = new Set();
+  return library;
 }
 
-// The face is matched by the family, weight and style the registry gives it, the ones the SVG names.
+// The face is matched by the family, weight and style the registry gives it, the ones the SVG names. A CFF face can be outlined
+// (only the PDF cannot subset it); a face whose fsType restricts embedding is never outlined: its text stays text.
 function addFace(library, data, family, described) {
   const face = library.addData(data, "fonts", family);
   if (!face || face.outlineStyled) return;
   if (Number.isInteger(described?.weight)) face.weight = described.weight;
   if (typeof described?.italic === "boolean") face.italic = described.italic;
+  if (face.unusable === "pdf-font-unsupported-format" && face.font) face.embeddable = true;
+  if (face.unusable === "pdf-font-embedding-restricted") for (const name of face.names) library.restricted.add(name);
   face.outlineStyled = true;
 }
 
@@ -82,23 +88,30 @@ function decodeBase64(text) {
  * `rootStyle` holds what the <svg> element gives its children (lang), `report(diagnostic)` receives what cannot be outlined
  * and `fail(code, message)` builds the error thrown when no face draws a text. Returns the new content and the <defs> markup.
  */
-export function outlineSlideText(content, { library, rootStyle = {}, report = () => {}, fail }) {
+export function outlineSlideText(content, { library, shaper, rootStyle = {}, report = () => {}, fail }) {
   const defs = new Map();
   const reported = new Set();
   const env = {
     fonts: library,
     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 }) } : {}),
     // The renderer reports its own font substitutions and missing glyphs while it lays the slide out.
     diagnostic: () => {},
     missing: () => {},
     unavailable: (families) => fail("text-as-paths-font-unavailable", `No font face can outline text in ${families.length ? `'${families.join("', '")}'` : "the requested family"}; pass the fonts handle the slide was laid out with.`),
   };
   const base = inheritStyle(ROOT_STYLE, rootStyle);
-  const keep = (family) => {
-    if (reported.has(family)) return;
-    reported.add(family);
-    report({ code: "text-as-paths-kept-text", fontFamily: family, message: `'${family}' is a colour or bitmap font, which has no plain outlines; its text stays text and the SVG embeds the face.` });
+  const REASONS = {
+    "colour-font": "is a colour or bitmap font, which has no plain outlines",
+    restricted: "forbids embedding (OS/2 fsType), so its outlines are not written",
+    shaping: "shapes differently in HarfBuzz and in the layout's measurement on text with no pinned width",
+  };
+  const keep = (family, reason) => {
+    if (reported.has(`${family}|${reason}`)) return;
+    reported.add(`${family}|${reason}`);
+    report({ code: "text-as-paths-fallback", reason, fontFamily: family, message: `'${family}' ${REASONS[reason]}; that text stays text and the SVG embeds its face.` });
   };
   const outlined = content.map((markup) => typeof markup === "string" && markup.includes("<text") ? outlineMarkup(markup, base, env, defs, keep) : markup);
   const definitions = [...defs].map(([id, d]) => `<path id="${id}" d="${d}"/>`).join("");
@@ -150,14 +163,14 @@ function outlineText(source, parentStyle, env, defs, keep) {
   const node = parseXml(`<svg>${source}</svg>`)?.children.find((child) => child.name === "text");
   if (!node) return source;
   const { runs } = layoutText(node, env, parentStyle, null);
-  const colour = runs.find((run) => COLOUR_TABLES.some((table) => run.face.font.directory?.tables?.[table]));
-  if (colour) { keep([...colour.face.names][0]); return source; }
   const attrs = Object.entries(node.attrs).filter(([key]) => !TEXT_ONLY.has(key));
-  const hidden = node.attrs["aria-hidden"] === "true", words = logicalText(runs);
-  const label = hidden || !words ? [] : [["role", "img"], ["aria-label", words]];
-  const groups = [];
+  const hidden = node.attrs["aria-hidden"] === "true";
+  const groups = [], outlined = [];
   for (const run of runs) {
-    const drawn = drawRun(run, defs);
+    const reason = fallbackReason(run, env);
+    if (reason) keep([...run.face.names][0], reason);
+    else outlined.push(run);
+    const drawn = reason ? keptRun(run) : drawRun(run, defs);
     if (!drawn) continue;
     const owner = run.owner !== node && run.owner ? run.owner : null;
     const last = groups.at(-1);
@@ -168,14 +181,53 @@ function outlineText(source, parentStyle, env, defs, keep) {
     const trace = owner ? Object.entries(owner.attrs).filter(([key]) => key.startsWith("data-")) : [];
     return trace.length ? element("g", trace, parts.join("")) : parts.join("");
   }).join("");
-  return element("g", [...attrs, ...label], body);
+  // RR-64 phase 3: the glyphs are hidden from assistive technology and the words are real text again, invisible, one <text> per
+  // line in reading order, pinned to the drawn width: a screen reader reads text (FA-30), and selection, copy and find work.
+  return element("g", attrs, body + (hidden ? "" : readableText(outlined)));
+}
+
+// The invisible text layer of the outlined runs (runs that stayed text are text already): per line, the runs in logical order, at
+// the line's left edge (its right edge for a right-to-left line), in the generic family (no face is embedded for it), sized like
+// the first run and stretched to the runs' drawn width.
+function readableText(runs) {
+  const lines = [];
+  for (const run of runs) { let line = lines.find((item) => item.chunk === run.chunk); if (!line) lines.push(line = { chunk: run.chunk, runs: [] }); line.runs.push(run); }
+  return lines.map(({ chunk, runs: parts }) => {
+    const words = [...parts].sort((a, b) => a.start - b.start).map((run) => run.logical).join("");
+    if (!/\S/.test(words)) return "";
+    const left = Math.min(...parts.map((run) => run.x)), width = parts.reduce((sum, run) => sum + run.width, 0), first = parts[0];
+    return element("text", [["x", fixed(chunk.rtl ? left + width : left)], ["y", fixed(first.y)], ["font-family", "sans-serif"], ["font-size", fixed(first.size)], ["fill", "none"],
+      ["direction", chunk.rtl ? "rtl" : undefined], ["xml:space", "preserve"], ["textLength", fixed(width)], ["lengthAdjust", "spacingAndGlyphs"], ["lang", first.style.lang]], escapeText(words));
+  }).join("");
+}
+
+// Why a run stays text, or null: a colour or bitmap font; a family whose fsType restricts embedding (the run was laid out with
+// another face); or, with HarfBuzz shaping, a run with no pinned width whose HarfBuzz advance differs from the fontkit advance
+// the layout measured by more than 0.1 px (inside a textLength the run is scaled to the measured width, as the browser does).
+function fallbackReason(run, env) {
+  if (COLOUR_TABLES.some((table) => run.face.font.directory?.tables?.[table])) return "colour-font";
+  for (const family of parseFontFamilies(run.style["font-family"])) {
+    if (env.fonts.restricted?.has(family.toLowerCase())) return "restricted";
+    if (run.face.names.has(family.toLowerCase())) break;
+  }
+  if (env.shape && !run.scope) {
+    const direction = run.level % 2 === 1 ? "rtl" : "ltr", language = openTypeLanguage(run.style.lang ?? run.style["xml:lang"]);
+    const measured = fontkitShape(run.face, run.text, { features: featuresOf(run.style), language, direction }).reduce((sum, glyph) => sum + glyph.advance, 0);
+    const shaped = run.glyphs.reduce((sum, glyph) => sum + glyph.advance, 0);
+    if (Math.abs(measured - shaped) * run.scale > 0.1) return "shaping";
+  }
+  return null;
 }
 
-// The text in reading order: runs are placed in visual order, so a right-to-left chunk is read from its logical text.
-function logicalText(runs) {
-  const chunks = [];
-  for (const run of runs) if (!chunks.includes(run.chunk)) chunks.push(run.chunk);
-  return chunks.map((chunk) => chunk.logical).join(" ").replace(/\s+/g, " ").trim();
+// A run that stays text, where layoutText placed it: its own family, size and paint, its width pinned with textLength.
+function keptRun(run) {
+  const style = run.style, rtl = run.level % 2 === 1;
+  const attrs = [["x", fixed(rtl ? run.x + run.width : run.x)], ["y", fixed(run.y)], ["font-family", style["font-family"]], ["font-size", fixed(run.size)],
+    ["font-weight", style["font-weight"]], ["font-style", style["font-style"] === "normal" ? undefined : style["font-style"]], ["fill", style.fill],
+    ["fill-opacity", style["fill-opacity"] === "1" ? undefined : style["fill-opacity"]], ["direction", rtl ? "rtl" : undefined], ["xml:space", "preserve"],
+    ["textLength", fixed(run.width)], ["lengthAdjust", "spacingAndGlyphs"], ["lang", style.lang]];
+  const text = `<text${attrs.filter(([, value]) => value !== undefined && value !== null && value !== "").map(([key, value]) => ` ${key}="${escapeAttribute(value)}"`).join("")}>${escapeAttribute(run.logical)}</text>`;
+  return run.link ? element("a", Object.entries(run.link.node?.attrs ?? { href: run.link.href }), text) : text;
 }
 
 function drawRun(run, defs) {
@@ -204,9 +256,9 @@ function drawRun(run, defs) {
   }
   if (style.visibility && style.visibility !== "visible") paint.push(["visibility", style.visibility]);
   const glyphs = uses.length ? `<g transform="matrix(${precise(scale * scaleX)} 0 0 ${precise(-scale)} ${fixed(run.x)} ${fixed(run.y)})">${uses.join("")}</g>` : "";
-  const drawn = element("g", paint, glyphs + decorations.join(""));
-  // A link inside the text keeps its element's attributes (href, rel, target).
-  return run.link ? element("a", Object.entries(run.link.node?.attrs ?? { href: run.link.href }), drawn) : drawn;
+  const drawn = element("g", [...paint, ["aria-hidden", "true"]], glyphs + decorations.join(""));
+  // A link inside the text keeps its element's attributes (href, rel, target) and is named by its words.
+  return run.link ? element("a", [...Object.entries(run.link.node?.attrs ?? { href: run.link.href }), ["aria-label", run.logical]], drawn) : drawn;
 }
 
 // Underline, line-through and overline in the text colour, from the font's own metrics (the vector PDF draws the same).
@@ -264,15 +316,15 @@ function precise(value) { return String(Number(Number(value).toPrecision(6))); }
 
 
 /**
- * The outline engine a fonts handle carries as `outlines` (RR-64): `renderSvg(deck, { fonts, textAsPaths: true })` draws each
+ * The outline engine a fonts handle carries as `outlines` (RR-64): `toSvg(deck, { fonts, text: "paths" })` draws each
  * slide's text with it. The faces are read from the handle when a slide is outlined, so faces it loads later are used too.
  */
 export function textOutlines(fonts) {
   return Object.freeze({
     outlineSlideText: (content, options) => {
       const library = outlineLibrary(fonts);
-      if (!library) throw options.fail("text-as-paths-needs-fonts", "textAsPaths needs font faces to outline: pass the handle loadFonts() returns as `fonts`.");
-      return outlineSlideText(content, { ...options, library });
+      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 });
     },
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -139,9 +139,10 @@
     "test:preview-a11y-browser": "node test/preview-a11y-browser.mjs"
   },
   "dependencies": {
-    "@openpresentation/opf": "^0.17.0",
+    "@openpresentation/opf": "^0.18.1",
     "bidi-js": "1.1.0",
     "fontkit": "^2.0.4",
+    "harfbuzzjs": "1.6.2",
     "pako": "1.0.11"
   },
   "peerDependencies": {
@@ -387,7 +388,6 @@
     "@resvg/resvg-js": "2.6.2",
     "axe-core": "4.13.0",
     "esbuild": "0.28.2",
-    "harfbuzzjs": "1.6.2",
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.3.289",
     "playwright": "1.63.0",