@openpresentation/opf-render 0.15.0 → 0.17.0

package/dist/svg.js

@@ -540,7 +540,7 @@ function resolveContext(presentation, index, context) {
   }
 }
 
-function bindSlide(presentation, slide, index, context) {
+function bindSlide(presentation, index, context) {
   const slidePath = `slides.${index}`;
   // Core resolves the slide's canvas, layout, theme, colour scheme, font scheme and family names the one way every engine must
   // (slide design, deck design, theme, engine default), from the records the document embeds and the catalogs the host
@@ -548,6 +548,9 @@ function bindSlide(presentation, slide, index, context) {
   // `layout` composes automatically; one whose reference resolves nowhere does too, with an `unresolved-reference` diagnostic,
   // or the render fails under `strictReferences`.
   const slideContext = resolveContext(presentation, index, context);
+  // FA-31: every string the slide draws (titles, body text, table cells, notes) is the substituted slide: {{slide.number}}, {{slide.section}} and
+  // {{deck.slideCount}} hold this slide's number, its section and the deck's slide count, the same values the furniture draws. Core resolved them.
+  const slide = slideContext.slide;
   const layout = slideContext.options.layout;
   const placeholders = Array.isArray(layout?.placeholders) ? layout.placeholders : [];
   const titleBindings = [];
@@ -635,10 +638,14 @@ function bindSlide(presentation, slide, 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.
+// `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).
 function normalizeOptions(options) {
-  const { fonts, ...rest } = options ?? {};
-  return { ...rest, textMeasurement: fonts?.textMeasurement, embeddedFonts: fonts?.embeddedFonts };
+  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 } : {}) };
 }
 
 /**
@@ -656,7 +663,7 @@ function resolveDeck(input, options) {
   }
 
   const context = { presentation, options };
-  const slides = presentation.slides.map((slide, index) => bindSlide(presentation, slide, index, context));
+  const slides = presentation.slides.map((_, index) => bindSlide(presentation, index, context));
 
   return {
     presentation,
@@ -699,7 +706,7 @@ function renderResolvedSlide(resolved, slideIndex, options) {
   const { width, height } = bound.design.dimensions;
   // The title may be TextRun[] (FA-10): the accessible name is its plain text.
   const title = (Array.isArray(bound.slide.title) ? flattenText(bound.slide.title) : bound.slide.title) ?? resolved.presentation.name ?? `Slide ${slideIndex + 1}`;
-  const content = [
+  let content = [
     renderBackground(bound, width, height, options),
     renderBranding(bound, resolved.presentation, width, height, options),
     ...renderSlideContent(bound, width, height, options),
@@ -708,7 +715,14 @@ function renderResolvedSlide(resolved, slideIndex, options) {
     renderFurniture(bound, resolved.presentation, width, height, options, "header"),
     renderFurniture(bound, resolved.presentation, width, height, options, "footer")
   ].filter(Boolean);
-  const children = [renderEmbeddedFonts(embeddedFontsFor(options.embeddedFonts, content)), ...content].filter(Boolean);
+  // RR-64: text as glyph outlines. The used-face rule below then embeds only the faces of text that stays text.
+  let glyphs = "";
+  if (options.outlines) {
+    const outlined = options.outlines.outlineSlideText(content, { rootStyle: lang ? { lang } : {}, report: diagnostic => reportDiagnostic(diagnostic, options), fail: (code, message) => new OPFRenderError(code, message, { slideIndex }) });
+    content = outlined.content;
+    glyphs = outlined.defs;
+  }
+  const children = [glyphs, renderEmbeddedFonts(embeddedFontsFor(options.embeddedFonts, content)), ...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
@@ -720,7 +734,9 @@ function renderResolvedSlide(resolved, slideIndex, options) {
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
+      // FA-30: a labelled container, not an image: role="img" makes every text node inside presentational.
+      role: "group",
+      "aria-roledescription": "slide",
       "aria-label": title,
       viewBox: `0 0 ${width} ${height}`,
       width,
@@ -756,6 +772,7 @@ function renderBackground(bound, width, height, options) {
         y2: `${50+dy}%`
       }, stopTags.join(""))),
       tag("rect", {
+        ...HIDDEN,
         x: 0,
         y: 0,
         width,
@@ -773,9 +790,10 @@ function renderBackground(bound, width, height, options) {
     const runs=patternRuns(preset);
     const mark=runs?tag('path',{d:runs.map(run=>`M${run.x} ${run.y}h${run.width}v1h-${run.width}z`).join(''),fill:color,'shape-rendering':'crispEdges'}):'';
     if(!mark)reportDiagnostic({code:'unsupported-pattern',path:`${bound.path}.design.background.pattern.preset`,message:`Pattern ${preset} is not implemented by the SVG preview.`},options);
-    return tag('g',{opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??'#FFFFFF'})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
+    return tag('g',{...HIDDEN,opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??'#FFFFFF'})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
   }
   return tag("rect", {
+    ...HIDDEN,
     x: 0,
     y: 0,
     width,
@@ -792,9 +810,9 @@ function renderBackground(bound, width, height, options) {
 // and stretch use the shared fit math with the focus point; tile repeats the picture at its intrinsic size (1 picture px = 1
 // reference px) from the canvas top-left. alt is the picture's accessible name; without alt the picture is decorative.
 function renderBackgroundImage(background, bound, width, height, options) {
-  const canvas = tag("rect", { x: 0, y: 0, width, height, fill: bound.design.backgroundColor ?? bound.design.colors.background, ...traceAttrs(options, `${bound.path}.design.background`) });
+  const canvas = tag("rect", { ...HIDDEN, x: 0, y: 0, width, height, fill: bound.design.backgroundColor ?? bound.design.colors.background, ...traceAttrs(options, `${bound.path}.design.background`) });
   const item = { value: background.alt === undefined ? background.src : { src: background.src, alt: background.alt }, path: background.path };
-  const drawOptions = { ...options, imageDecorative: background.alt === undefined };
+  const drawOptions = { ...options, imageDecorative: background.alt === undefined || background.alt === "" };
   const picture = background.fit === "tile"
     ? renderTiledImage(item, background.box, bound, drawOptions)
     : renderImage(item, background.box, bound, { ...drawOptions, imageFit: background.fit, imageFocus: background.focus, imagePicture: background.picture });
@@ -838,7 +856,7 @@ function renderImageBlock(item, bound, options) {
   const children = [defs.length ? tag("defs", {}, defs.join("")) : "", pixels];
   if (image.border) {
     const paint = imagePaint(image.border.color, bound, bound.design.colors.border);
-    children.push(tag("path", { d: shape?.path ?? rectanglePath(image.box), fill: "none", stroke: paint.color, "stroke-opacity": paint.alpha < 1 ? preciseNumber(paint.alpha) : undefined, "stroke-width": stableNumber(image.border.width), "stroke-linejoin": "miter", "stroke-miterlimit": 8 }));
+    children.push(tag("path", { ...HIDDEN, d: shape?.path ?? rectanglePath(image.box), fill: "none", stroke: paint.color, "stroke-opacity": paint.alpha < 1 ? preciseNumber(paint.alpha) : undefined, "stroke-width": stableNumber(image.border.width), "stroke-linejoin": "miter", "stroke-miterlimit": 8 }));
   }
   if (image.overlay) children.push(renderImageOverlay(image.overlay, bound, options));
   if (children.length === 2 && !children[0] && !Object.keys(trace).length) return pixels;
@@ -849,7 +867,7 @@ function renderImageBlock(item, bound, options) {
 // overlay opacity.
 function renderImageOverlay(overlay, bound, options) {
   const paint = imagePaint(overlay.color, bound, bound.design.colors.text);
-  return tag("path", { d: overlay.shape?.path ?? rectanglePath(overlay.box), fill: paint.color, "fill-opacity": preciseNumber(paint.alpha * overlay.opacity), ...(options.trace ? { "data-opf-image-overlay": overlay.path } : {}) });
+  return tag("path", { ...HIDDEN, d: overlay.shape?.path ?? rectanglePath(overlay.box), fill: paint.color, "fill-opacity": preciseNumber(paint.alpha * overlay.opacity), ...(options.trace ? { "data-opf-image-overlay": overlay.path } : {}) });
 }
 
 // The placeholder renderImage draws for a source it cannot resolve.
@@ -885,7 +903,7 @@ function renderSlideContent(bound, width, height, options) {
   for (const diagnostic of [...bound.design.diagnostics, ...bound.geometry.diagnostics]) reportDiagnostic(diagnostic, options);
   return bound.geometry.items.map(item => {
     const frame=item.frameBox;
-    const surface=frame ? tag('rect',{x:frame.x,y:frame.y,width:frame.width,height:frame.height,rx:8*Math.min(width,height)/720,fill:bound.design.colors.surface,stroke:bound.design.colors.border,...traceAttrs(options,item.path)}) : '';
+    const surface=frame ? tag('rect',{...HIDDEN,x:frame.x,y:frame.y,width:frame.width,height:frame.height,rx:8*Math.min(width,height)/720,fill:bound.design.colors.surface,stroke:bound.design.colors.border,...traceAttrs(options,item.path)}) : '';
     // RR-34: a captioned item draws its media in item.box and its caption band after it (src/annotations.js).
     return surface+renderPayload(item, item.box, { ...bound, composition: item.composition }, options)+(item.caption?renderCaption(item,{ ...bound, composition: item.composition },options,drawHelpers):'');
   });
@@ -900,11 +918,13 @@ function reportDiagnostic(diagnostic, options) {
   options.onDiagnostic?.(diagnostic);
 }
 
-// FA-09: Chart.alt is the chart's accessible name: a role="img" group with aria-label, which also makes the drawn marks and labels
-// inside presentational. An empty alt marks the chart decorative (aria-hidden). Without alt the SVG is unchanged.
-function chartText(chart, alt) {
-  if (typeof alt !== "string" || !chart) return chart;
-  return alt === "" ? tag("g", { "aria-hidden": "true" }, chart) : tag("g", { role: "img", "aria-label": alt }, chart);
+// FA-09, FA-27: Chart.alt and Table.alt name the drawn payload with an aria-label on a wrapping group. A chart is a picture: role="img",
+// which also makes its marks and labels presentational. A table's alt is a summary (the cells are real text and stay readable, as in
+// PowerPoint, where descr on a table frame hides nothing): role="group" names it without hiding its children. An empty alt marks the payload
+// decorative (aria-hidden) for both. Without alt the SVG is unchanged.
+function altText(drawn, alt, role) {
+  if (typeof alt !== "string" || !drawn) return drawn;
+  return alt === "" ? tag("g", { "aria-hidden": "true" }, drawn) : tag("g", { role, "aria-label": alt }, drawn);
 }
 
 function renderPayload(item, box, bound, options) {
@@ -912,9 +932,9 @@ function renderPayload(item, box, bound, options) {
   if (item.field === "items" || item.field === "bullets") return renderList(item, box, bound, options);
   switch (item.type) {
     case "chart":
-      return chartText(renderChart(item, box, bound, options), item.value?.alt);
+      return altText(renderChart(item, box, bound, options), item.value?.alt, "img");
     case "table":
-      return renderTable(item, box, bound, options);
+      return altText(renderTable(item, box, bound, options), item.value?.alt, "group");
     case "image":
       return renderImageBlock(item, bound, options);
     case "video":
@@ -999,10 +1019,17 @@ function resolveImageSource(item, bound, options) {
   return { asset, source: svg ?? source, drawable, missingReference };
 }
 
+// FA-30: purely decorative drawing is hidden from assistive technology so the slide's text and real pictures are what a reader meets
+// (background, overlays, card frames, dividers, table cell fills and borders, accent shapes). SVG-AAM already leaves an unnamed shape
+// out of the tree; the attribute states the intent for the readers that do not.
+const HIDDEN = Object.freeze({ "aria-hidden": "true" });
+
 // The accessible name of a drawn picture: its alt text, else the caller's label; a decorative picture (an image background
 // without alt) is hidden from assistive technology.
 function imageAccessibility(asset, options) {
-  if (options.imageDecorative) return { "aria-hidden": "true" };
+  // An empty alt marks the picture decorative (FA-30), as it does a chart; a picture that is only furniture (a header or footer
+  // logo repeated on every slide) is decorative unless the author named it.
+  if (options.imageDecorative || asset.alt === "" || (options.imageUnlabelled && asset.alt === undefined)) return HIDDEN;
   return { role: "img", "aria-label": asset.alt ?? options.imageLabel ?? "Image" };
 }
 
@@ -1227,6 +1254,7 @@ function renderMedia(item, box, bound, options) {
   const iconBox = centeredBox(box, 72, 72);
   const children = [
     tag("rect", {
+      ...HIDDEN,
       x: box.x,
       y: box.y,
       width: box.width,
@@ -1237,6 +1265,7 @@ function renderMedia(item, box, bound, options) {
       ...traceAttrs(options, item.path)
     }),
     tag("circle", {
+      ...HIDDEN,
       cx: iconBox.x + iconBox.width / 2,
       cy: iconBox.y + iconBox.height / 2,
       r: 36,
@@ -1244,6 +1273,7 @@ function renderMedia(item, box, bound, options) {
       ...traceAttrs(options, item.path)
     }),
     tag("path", {
+      ...HIDDEN,
       d: trianglePath(iconBox.x + 28, iconBox.y + 22, 28, 28),
       fill: "#FFFFFF",
       ...traceAttrs(options, item.path)
@@ -1274,6 +1304,7 @@ function renderCode(item, box, bound, options) {
   const highlight = codeHighlight(item, layout, bound);
   const children = [
     tag("rect", {
+      ...HIDDEN,
       x: box.x,
       y: box.y,
       width: box.width,
@@ -1290,6 +1321,7 @@ function renderCode(item, box, bound, options) {
     const body = layout.parts.find(part => part.role === "body");
     for (const band of highlight.bands) {
       children.push(tag("rect", {
+        ...HIDDEN,
         x: stableNumber(box.x + 1), y: stableNumber(body.box.y + band.first * body.fit.lineHeight), width: stableNumber(box.width - 2),
         height: stableNumber((band.last - band.first + 1) * body.fit.lineHeight), fill: highlight.colors.band,
         ...(options.trace ? { "data-opf-code-highlight": "true" } : {})
@@ -1405,16 +1437,16 @@ function renderTimeline(item, box, bound, options) {
   const layout=item.timelineLayout;
   if(!layout)throw new OPFRenderError('missing-timeline-layout','Timeline rendering requires a coordinated core build with shared timeline geometry.',{path:item.path});
   const scale=Math.min(bound.design.dimensions.width,bound.design.dimensions.height)/720;
-  const children=[tag('line',{...layout.connector,stroke:bound.design.colors.border,'stroke-width':3*scale,...traceAttrs(options,item.path)})];
+  const children=[tag('line',{...HIDDEN,...layout.connector,stroke:bound.design.colors.border,'stroke-width':3*scale,...traceAttrs(options,item.path)})];
   // FA-11: status colors come from the deck (core's timelineMarkerShapes / timelineTextColor); a marker with no status draws the plain primary circle.
   const background=bound.design.backgroundColor??bound.design.colors.background;
   const statusColors={background,primary:bound.design.colors.primary,text:bound.design.colors.text,mutedText:bound.design.colors.mutedText};
   for(const marker of layout.markers){
     if(!marker.status){
-      children.push(tag('circle',{cx:marker.x,cy:marker.y,r:marker.radius,fill:bound.design.colors.primary,...traceAttrs(options,marker.path)}));
+      children.push(tag('circle',{...HIDDEN,cx:marker.x,cy:marker.y,r:marker.radius,fill:bound.design.colors.primary,...traceAttrs(options,marker.path)}));
       continue;
     }
-    for(const shape of timelineMarkerShapes(marker,statusColors))children.push(tag('circle',{cx:shape.cx,cy:shape.cy,r:shape.radius,fill:shape.fill??'none',...(shape.stroke?{stroke:shape.stroke.color,'stroke-width':shape.stroke.width}:{}),...traceAttrs(options,marker.path),...(options.trace?{'data-opf-timeline-status':marker.status,'data-opf-timeline-shape':shape.role}:{})}));
+    for(const shape of timelineMarkerShapes(marker,statusColors))children.push(tag('circle',{...HIDDEN,cx:shape.cx,cy:shape.cy,r:shape.radius,fill:shape.fill??'none',...(shape.stroke?{stroke:shape.stroke.color,'stroke-width':shape.stroke.width}:{}),...traceAttrs(options,marker.path),...(options.trace?{'data-opf-timeline-status':marker.status,'data-opf-timeline-shape':shape.role}:{})}));
   }
   for(const part of layout.parts){
     if(!part.fit)throw new OPFRenderError('layout-overflow','Timeline field has no usable space; change the arrangement or paginate events.',{path:part.path,diagnostics:layout.diagnostics});
@@ -1445,6 +1477,7 @@ function renderTable(item, box, bound, options) {
       ? defaultText
       : resolveColorRef(style.color, bound, defaultText);
     children.push(tag("rect", {
+      ...HIDDEN,
       x: stableNumber(cell.box.x), y: stableNumber(cell.box.y),
       width: stableNumber(cell.box.width), height: stableNumber(cell.box.height),
       fill,
@@ -1500,6 +1533,7 @@ function renderTableBorders(defaultEdges, explicitEdges, scale, bound, options)
       ? defaultColor
       : resolveColorRef(border.color, bound, defaultColor);
     return [tag('line', {
+      ...HIDDEN,
       x1:stableNumber(x1), y1:stableNumber(y1), x2:stableNumber(x2), y2:stableNumber(y2),
       stroke, 'stroke-width':stableNumber(width),
       'stroke-dasharray':border?.dash === 'dash' ? `${width*4} ${width*3}` : border?.dash === 'dot' ? `${width} ${width*2}` : undefined,
@@ -1637,7 +1671,7 @@ function renderFurniture(bound, presentation, width, height, options, kind) {
   }
   return tag('g',{},layout.parts.filter(part=>part.kind===kind).map(part=>{
     const trace=options.trace?{'data-opf-furniture-kind':kind,'data-opf-furniture-field':part.field,'data-opf-furniture-generated':String(part.generated),'data-opf-furniture-editable':!part.generated?'true':undefined,'data-opf-furniture-source':part.sourcePath}:{};
-    if(part.type==='image')return tag('g',trace,renderImage({value:part.image,path:part.path},part.box,bound,{...options,imageFit:'contain'}));
+    if(part.type==='image')return tag('g',trace,renderImage({value:part.image,path:part.path},part.box,bound,{...options,imageFit:'contain',imageUnlabelled:true}));
     return tag('g',trace,renderTextBox(part.text,part.box,bound,{path:part.path,fit:part.fit,textStyle:part.style,fontFamily:part.style.fontFamily,align:part.alignment,fill:bound.design.colors.mutedText,diagnosticsHandled:true,options}));
   }).join(''));
 }
@@ -1650,12 +1684,13 @@ function renderBranding(bound,presentation,width,height,options) {
     if(mark){
       const opacity=typeof design.watermark.opacity==='number'&&Number.isFinite(design.watermark.opacity)?Math.min(1,Math.max(0,design.watermark.opacity)):.08;
       const cx=width/2,cy=height/2;
-      pieces.push(tag('g',{opacity:stableNumber(opacity),transform:`rotate(${stableNumber(mark.rotation)} ${stableNumber(cx)} ${stableNumber(cy)})`,...traceAttrs(options,rootFor('watermark'))},
+      pieces.push(tag('g',{...HIDDEN,opacity:stableNumber(opacity),transform:`rotate(${stableNumber(mark.rotation)} ${stableNumber(cx)} ${stableNumber(cy)})`,...traceAttrs(options,rootFor('watermark'))},
         tag('text',{x:stableNumber(cx),y:stableNumber(cy+mark.fontSize*.35),'text-anchor':'middle','font-family':fontStack(mark.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(mark.fontSize),'font-weight':mark.fontWeight,
           fill:bound.design.colors.text,'xml:space':'preserve','text-rendering':'geometricPrecision'},escapeText(mark.text))));
     }
   } else if(design.watermark){
-    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'})));
+    // 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.
   const logo=bound.geometry.logo;
@@ -1710,12 +1745,30 @@ function nestedReset(style, run) {
   return parent && !disabledFeaturesStyle([run.stack ?? run.family].flat()[0]) ? RESET_POLICY_FEATURES : undefined;
 }
 
-function scriptLine(text, style, bound, type, { rtl = false, placement, trace, fontSize } = {}) {
+// RR-59 (#175): bidi rule L1 resets white space at the end of a line (with the isolate marks around it) to the paragraph level. A run
+// drawn as its own text chunk (a <text>, or a tspan with its own x) is such a line, and its paragraph is left to right, so the trailing
+// space of a right-to-left isolate drew at the run's right edge instead of its left, where it separates the run from the next one: at an
+// Arabic/Latin boundary the gap closed up (PowerPoint keeps it). A positioned run of a right-to-left line therefore draws without its
+// trailing white space, its glyphs starting after that white space's measured advance. Returns the white space ("" when there is none,
+// or when the text is all white space).
+function rtlTrailingSpace(text) {
+  const found = /\S(\s+)$/u.exec(text);
+  return found ? found[1] : "";
+}
+
+/**
+ * `runPlacement` ({x, width, fontSize}) positions the runs like `placement`, but only when the text plans into more than one run
+ * (RR-59, #175): a list entry's line has no placed origin from core, and drawn as one chunk of nested tspans resvg shapes the whole
+ * chunk with the outer face first and, when a fallback face covers every character, replaces every glyph with that face's (the Latin
+ * phrase of an Arabic item took a wider fallback face and ran into the bullet).
+ */
+function scriptLine(text, style, bound, type, { rtl = false, placement, runPlacement, trace, fontSize } = {}) {
   const value = String(text ?? "");
   const scripts = (style?.lang && bound.scriptFontsFor?.(style.lang)) || bound.scriptFonts;
   rtl = rtl && value !== "";
   const isolate = content => rtl ? `${RIGHT_TO_LEFT_ISOLATE}${content}${POP_DIRECTIONAL_ISOLATE}` : content;
   const runs = value && scripts ? scripts.plan(value, style) : [{ text: value, own: true }];
+  if (!placement && runPlacement && runs.length > 1) placement = runPlacement;
   // RR-38: PowerPoint's baseline of a line in Arabic Typesetting sits above core's (one em below the line top): the caller moves it up by `baselineShift` em.
   const shiftOf = list => { const shift = baselineShift(list); return shift ? { baselineShift: shift } : {}; };
   // FF-45: symbol runs (Wingdings, Symbol, Webdings codes drawn as their Unicode equivalents) are always positioned when the
@@ -1741,16 +1794,20 @@ function scriptLine(text, style, bound, type, { rtl = false, placement, trace, f
     advance += width;
     const start = offset;
     offset += run.symbol ? run.symbol.source.length : run.text.length;
+    // RR-59: a right-to-left run's trailing white space sits at its left edge (see rtlTrailingSpace); the glyphs draw after it.
+    const trail = rtl && !run.symbol ? rtlTrailingSpace(run.text) : "";
+    const drawn = trail ? run.text.slice(0, -trail.length) : run.text;
+    const gap = trail ? Math.min(width, Math.max(0, width - scripts.runWidths([{ ...run, text: drawn }], placement.fontSize, style)[0] * factor)) : 0;
     // A symbol glyph keeps the open face's shape: it is compressed to its code's advance only when wider, never stretched.
-    const pinned = run.symbol ? natural[index] > width + 1e-6 : width > 0;
+    const pinned = run.symbol ? natural[index] > width + 1e-6 : width - gap > 0;
     return tag("tspan", {
-      x: stableNumber(placement.x + left),
-      textLength: pinned ? stableNumber(width) : undefined, lengthAdjust: pinned ? "spacingAndGlyphs" : undefined,
+      x: stableNumber(placement.x + left + gap),
+      textLength: pinned ? stableNumber(width - gap) : undefined, lengthAdjust: pinned ? "spacingAndGlyphs" : undefined,
       "font-family": run.own ? undefined : fontStack(run.family, type),
       "font-size": adjusted(run),
       style: run.own ? undefined : nestedReset(style, run),
-      ...(trace ? trace(start, offset) : {})
-    }, isolate(escapeText(run.text)));
+      ...(trace ? trace(start, offset - trail.length) : {})
+    }, isolate(escapeText(drawn)));
   }).join("");
   return { content, positioned: true, ...shiftOf(runs) };
 }
@@ -1798,21 +1855,26 @@ function codeSyntax(item, layout, bound, options) {
   return { tokens, palette: codeSyntaxPaletteForScheme(bound.design.colorScheme) };
 }
 
-// Faces flagged embed:"used" (the vendored open, Intos and script-pack faces) are embedded only when the slide's own markup draws
-// them: the family in a font-family list, at a font-weight and font-style some text of the slide takes (attributes are
-// inherited down the element tree, as in SVG). A used family none of whose faces matches a drawn weight and style keeps all
-// its faces, so the browser can always choose. Every other face (the npm packs) is embedded as before.
+// RR-61: a face is embedded only when the slide's own markup draws it: the family in a font-family list, at a font-weight and
+// font-style some text of the slide takes (attributes are inherited down the element tree, as in SVG). A drawn family none of
+// whose faces matches a drawn weight and style keeps all its faces, so the browser can always choose. A face no font-family of
+// 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) {
-  if (!fonts.some(font => font?.embed === "used")) return fonts;
+  if (!fonts.length) return fonts;
+  fonts.forEach(assertEmbeddableFont);
   const drawn = drawnFaces(content.join("\n"));
   const wanted = font => {
     const triples = drawn.get(String(font.family).toLowerCase());
     if (!triples) return false;
-    const family = fonts.filter(other => other?.embed === "used" && String(other.family).toLowerCase() === String(font.family).toLowerCase());
-    const matching = family.filter(other => triples.has(`${other.weight}|${other.italic ? "italic" : "normal"}`));
-    return matching.length ? matching.includes(font) : true;
+    const family = fonts.filter(other => String(other?.family).toLowerCase() === String(font.family).toLowerCase());
+    return [...triples].some(triple => {
+      const matching = family.filter(other => triple === `${other.weight}|${other.italic ? "italic" : "normal"}`);
+      return matching.length ? matching.includes(font) : true;
+    });
   };
-  return fonts.filter(font => font?.embed !== "used" || wanted(font));
+  return fonts.filter(font => font?.embed === "always" || wanted(font));
 }
 
 const FONT_WEIGHT_KEYWORDS = { normal: "400", bold: "700" };
@@ -1841,10 +1903,21 @@ function drawnFaces(markup) {
   return drawn;
 }
 
+// Every supplied face is checked, drawn or not, so a bad entry fails on any slide. The data URI check is remembered per face
+// object while its dataUrl is unchanged: the handle's list holds the same objects on every slide, and its URIs run to tens of
+// megabytes.
+const checkedDataUrls = new WeakMap();
+function assertEmbeddableFont(font) {
+  const valid = typeof font?.family === "string" && !/[\u0000-\u001f"'\\<>;]/.test(font.family) && Number.isInteger(font.weight) && font.weight >= 1 && font.weight <= 1000
+    && (checkedDataUrls.get(font) === font.dataUrl || /^data:font\/(ttf|otf|woff|woff2);base64,[A-Za-z0-9+/=]+$/.test(font.dataUrl));
+  if (!valid) throw new OPFRenderError("invalid-embedded-font", "Embedded fonts require a plain family name, valid weight, and a font data URI.");
+  checkedDataUrls.set(font, font.dataUrl);
+}
+
 function renderEmbeddedFonts(fonts = []) {
   if (!fonts.length) return "";
   const css = fonts.map(font => {
-    if (typeof font.family !== "string" || /[\u0000-\u001f"'\\<>;]/.test(font.family) || !/^data:font\/(ttf|otf|woff|woff2);base64,[A-Za-z0-9+/=]+$/.test(font.dataUrl) || !Number.isInteger(font.weight) || font.weight < 1 || font.weight > 1000) throw new OPFRenderError("invalid-embedded-font", "Embedded fonts require a plain family name, valid weight, and a font data URI.");
+    assertEmbeddableFont(font);
     return `@font-face{font-family:"${font.family}";font-weight:${font.weight};font-style:${font.italic ? "italic" : "normal"};src:url("${font.dataUrl}")}`;
   }).join("\n");
   const licenses = [...new Set(fonts.map(font=>font.license).filter(Boolean))];
@@ -1921,16 +1994,29 @@ function renderRichLines(value,fit,box,bound,config) {
       ? (linked ? bound.design.colors.hyperlink : config.fill)
       : resolveColorRef(run.color, bound, config.fill);
     let fixedAdvance=(fragment.kind==='tab'||placed)&&fragment.width>0;
+    // RR-59 (#175): measured fragments of a line core did not place (a list entry) keep their measured origin; a mixed-script one
+    // positions its runs (scriptLine runPlacement) as a placed line does.
+    const measuredLine=!asFlow&&!naturalFlow&&fragment.kind!=='tab'&&fragment.width>0;
+    // A right-to-left fragment draws without its trailing white space, after that white space's measured advance (rtlTrailingSpace).
+    const trail=rtl&&measuredLine&&fragment.kind!=='marker'?rtlTrailingSpace(fragment.text):'';
+    let gap=0;
+    if(trail){
+      const measure=textWidthMeasurer(fragment.style,config.options.textMeasurement),full=measure(fragment.text,fragment.fontSize);
+      gap=full>0?Math.min(fragment.width,Math.max(0,fragment.width*(1-measure(fragment.text.slice(0,-trail.length),fragment.fontSize)/full))):0;
+      if(!asFlow)position.x=stableNumber(originX+fragmentX+gap);
+    }
+    const drawnText=trail?fragment.text.slice(0,-trail.length):fragment.text,drawnWidth=fragment.width-gap;
     // FA-13: an inline code run falls back to a monospace face, and a run with its own language declares it.
     const runLang=fragment.kind!=='tab'&&fragment.style.lang?(bound.scriptFontsFor?.(fragment.style.lang)?.profile.bcp47??fragment.style.lang):undefined;
-    const scripted=fragment.kind==='tab'?{content:escapeText(fragment.text)}:scriptLine(fragment.text,fragment.style,bound,run.code===true?'monospace':bound.design.fontScheme.type,{rtl:rtl&&!asFlow,
-      placement:fixedAdvance&&!asFlow?{x:originX+fragmentX,width:fragment.width,fontSize:fragment.fontSize}:undefined,fontSize:fragment.fontSize});
+    const scripted=fragment.kind==='tab'?{content:escapeText(fragment.text)}:scriptLine(drawnText,fragment.style,bound,run.code===true?'monospace':bound.design.fontScheme.type,{rtl:rtl&&!asFlow,
+      placement:fixedAdvance&&!asFlow?{x:originX+fragmentX+gap,width:drawnWidth,fontSize:fragment.fontSize}:undefined,
+      runPlacement:measuredLine&&!fixedAdvance?{x:originX+fragmentX+gap,width:drawnWidth,fontSize:fragment.fontSize}:undefined,fontSize:fragment.fontSize});
     if(scripted.positioned)fixedAdvance=false;
     const content=`${edges.first?RIGHT_TO_LEFT_ISOLATE:''}${scripted.content}${edges.last?POP_DIRECTIONAL_ISOLATE:''}`;
     // RR-34: a citation/footnote marker is generated text (no source range): it is traced as a marker
     // segment without text offsets, so editors never read it as part of the run, and it is not linked.
     const marker=fragment.kind==='marker';
-    const rendered=tag(asFlow?'tspan':'text',{...(runLang?{lang:runLang,'xml:lang':runLang}:{}),...(config.options.trace?marker?{'data-opf-segment':'marker','data-opf-marker':fragment.text}:{'data-opf-text-start':runOffsets[fragment.runIndex]+fragment.start,'data-opf-text-end':runOffsets[fragment.runIndex]+fragment.end,'data-opf-segment':fragment.kind}:{}),...position,'xml:space':'preserve','text-rendering':asFlow?undefined:'geometricPrecision',textLength:fixedAdvance?stableNumber(fragment.width):undefined,lengthAdjust:fixedAdvance?'spacingAndGlyphs':undefined,'font-family':scripted.family??fontStack(fragment.style.fontFamily,run.code===true?'monospace':bound.design.fontScheme.type),'font-size':stableNumber(adjustedFontSize(fragment.fontSize,scripted.sizeAdjust)),'font-weight':fragment.style.fontWeight,'font-style':fragment.style.italic?'italic':asFlow?'normal':undefined,'text-decoration':marker?undefined:[run.underline||linked?'underline':'',run.strikethrough?'line-through':''].filter(Boolean).join(' ')||undefined,fill:runFill},content);
+    const rendered=tag(asFlow?'tspan':'text',{...(runLang?{lang:runLang,'xml:lang':runLang}:{}),...(config.options.trace?marker?{'data-opf-segment':'marker','data-opf-marker':fragment.text}:{'data-opf-text-start':runOffsets[fragment.runIndex]+fragment.start,'data-opf-text-end':runOffsets[fragment.runIndex]+fragment.end-trail.length,'data-opf-segment':fragment.kind}:{}),...position,'xml:space':'preserve','text-rendering':asFlow?undefined:'geometricPrecision',textLength:fixedAdvance?stableNumber(drawnWidth):undefined,lengthAdjust:fixedAdvance?'spacingAndGlyphs':undefined,'font-family':scripted.family??fontStack(fragment.style.fontFamily,run.code===true?'monospace':bound.design.fontScheme.type),'font-size':stableNumber(adjustedFontSize(fragment.fontSize,scripted.sizeAdjust)),'font-weight':fragment.style.fontWeight,'font-style':fragment.style.italic?'italic':asFlow?'normal':undefined,'text-decoration':marker?undefined:[run.underline||linked?'underline':'',run.strikethrough?'line-through':''].filter(Boolean).join(' ')||undefined,fill:runFill},content);
     if(linked)return tag('a',{href:run.link,target:'_blank',rel:'noopener noreferrer'},rendered);
     return rendered;
     };