@openpresentation/opf-render 0.8.1 → 0.10.0

package/dist/svg.js

@@ -1,8 +1,13 @@
 import { layoutTable, fitList, fitRichText, composeSlide, resolveCanvasDimensions, resolveFontFamilies, resolveTextStyle, textWidthMeasurer, fitText, textColorForFill, chartColorForFill } from "@openpresentation/opf/composition";
 import {
   catalogs as bundledCatalogs,
+  resolveColorRef as resolveCoreColorRef,
   validatePresentation
 } from "@openpresentation/opf";
+// Optional core exports are read from the namespace so an older published core
+// still loads; resolveScriptFonts ships with core FF-18.
+import * as opfCore from "@openpresentation/opf";
+import { createScriptFonts } from "./script-fonts.js";
 
 export const packageName = "@openpresentation/opf-render";
 
@@ -50,6 +55,12 @@ export const engineDefaults = Object.freeze({
   ])
 });
 
+// Last-resort font scheme shared by every engine (core pagination, opf-editor and
+// opf-pptx): DEFAULT_FONT_SCHEME in @openpresentation/opf. It applies only when the
+// slide, deck and resolved theme name no font scheme. fontScheme.google is kept for a
+// future Google Slides target and is not used by this renderer.
+const DEFAULT_FONT_SCHEME = engineDefaults.fontScheme.pptx.latin;
+
 export class OPFRenderError extends Error {
   constructor(code, message, details = {}) {
     super(message);
@@ -226,12 +237,47 @@ function sourceRecordsFor(kind, source, options) {
 }
 
 function engineDefaultId(kind) {
-  if (kind === "fontSchemes") return engineDefaults.fontScheme.google.latin;
+  if (kind === "fontSchemes") return DEFAULT_FONT_SCHEME;
   if (kind === "chartTypes") return engineDefaults.chartTypes[0];
   const key = kind.endsWith("s") ? kind.slice(0, -1) : kind;
   return engineDefaults[key];
 }
 
+function findCatalogRecord(kind, id, context) {
+  if (!id) return null;
+  const documentCatalog = context.presentation.catalogs?.[kind];
+  return findById(normalizeSourceRecords(documentCatalog), id) ??
+    findById(sourceRecordsFor(kind, documentCatalog?.source, context.options), id) ??
+    findById(normalizeSourceRecords(context.options.catalogs?.[kind]), id) ??
+    findById(sourceRecordsFor(kind, engineDefaults.catalogs[kind]?.source, context.options), id) ??
+    findById(defaultCatalogFor(kind), id);
+}
+
+// Font schemes follow the shared core rule (resolveFontSchemeReference in
+// @openpresentation/opf): an id that matches no record reports one
+// `unresolved-font-scheme` diagnostic and uses the DEFAULT_FONT_SCHEME record as the
+// base, with sibling overrides on top, so preview and PPTX export use the same fonts.
+function resolveFontSchemeRecord(reference, context, path) {
+  const id = referenceId(reference);
+  const found = findCatalogRecord("fontSchemes", id, context);
+  const base = found ?? findCatalogRecord("fontSchemes", DEFAULT_FONT_SCHEME, context) ?? {};
+  const scheme = cloneWithSortedKeys(isPlainObject(reference) ? { ...base, ...reference } : base);
+  if (!id || found) return { scheme };
+  return { scheme, diagnostic: { code: "unresolved-font-scheme", path, id, fallback: DEFAULT_FONT_SCHEME, message: `Font scheme '${id}' is not in the inline or bundled catalogs; using the default font scheme '${DEFAULT_FONT_SCHEME}'.` } };
+}
+
+// Generated socials furniture formats handles in core. Core applies inline
+// document records first; the host supplies the rest in resolution order.
+function socialPlatformRecords(context) {
+  const kind = "socialPlatforms";
+  return [
+    ...sourceRecordsFor(kind, context.presentation.catalogs?.[kind]?.source, context.options),
+    ...normalizeSourceRecords(context.options.catalogs?.[kind]),
+    ...sourceRecordsFor(kind, engineDefaults.catalogs[kind]?.source, context.options),
+    ...defaultCatalogFor(kind)
+  ];
+}
+
 function resolveCatalogRecord(kind, reference, context, path, fallbackId = engineDefaultId(kind)) {
   const id = referenceId(reference) ?? fallbackId;
   const documentCatalog = context.presentation.catalogs?.[kind];
@@ -291,6 +337,32 @@ function normalizeColor(value, fallback) {
   return fallback;
 }
 
+/** Resolve content ColorRef via core; keep authored #RRGGBB / #RRGGBBAA casing. */
+function resolveColorRef(value, bound, fallback) {
+  if (value == null || value === "") return fallback;
+  if (typeof value !== "string") return fallback;
+  const trimmed = value.trim();
+  // Core normalizeHexColor uppercases literals and strips #RRGGBBAA alpha.
+  // Packed-browser editor checks keep toolbar hex like #2563eb as authored.
+  if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(trimmed)) return trimmed;
+  if (/^#[0-9a-fA-F]{3}$/.test(trimmed)) return normalizeColor(trimmed, fallback);
+  const colors = bound.design.colors ?? {};
+  return resolveCoreColorRef(trimmed, {
+    colorScheme: bound.design.colorScheme ?? {},
+    roles: {
+      primary: colors.primary,
+      secondary: colors.secondary,
+      accent: colors.accent,
+      background: colors.background,
+      surface: colors.surface,
+      text: colors.text,
+      textSecondary: colors.mutedText
+    },
+    variables: bound.design.variables,
+    fallback
+  });
+}
+
 function resolveBackground(background, colorScheme) {
   if (!background) return colorFromScheme(colorScheme, "light1", "#FFFFFF");
   if (typeof background === "string") return colorFromScheme(colorScheme, background, "#FFFFFF");
@@ -311,7 +383,7 @@ function colorLuminance(color) {
   return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
 }
 
-function resolveDesign(presentation, slide, context) {
+function resolveDesign(presentation, slide, context, index) {
   const deckDesign = presentation.design ?? {};
   const slideDesign = slide.design ?? {};
 
@@ -327,11 +399,13 @@ function resolveDesign(presentation, slide, context) {
     context,
     "design.colorScheme"
   );
-  const fontScheme = resolveCatalogRecord(
-    "fontSchemes",
-    slideDesign.fontScheme ?? deckDesign.fontScheme ?? theme.fontScheme ?? engineDefaults.fontScheme.google.latin,
+  const fontPath = slideDesign.fontScheme !== undefined ? `slides.${index}.design.fontScheme`
+    : deckDesign.fontScheme !== undefined ? "design.fontScheme"
+    : slideDesign.theme !== undefined ? `slides.${index}.design.theme` : "design.theme";
+  const { scheme: fontScheme, diagnostic: fontSchemeDiagnostic } = resolveFontSchemeRecord(
+    slideDesign.fontScheme ?? deckDesign.fontScheme ?? theme.fontScheme ?? DEFAULT_FONT_SCHEME,
     context,
-    "design.fontScheme"
+    fontPath
   );
   const dimensions = resolveDimensions(slideDesign.dimensions ?? deckDesign.dimensions ?? theme.dimensions);
   const backgroundDefinition = slideDesign.background ?? deckDesign.background ?? theme.background;
@@ -346,6 +420,7 @@ function resolveDesign(presentation, slide, context) {
     colorScheme,
     fontScheme,
     dimensions,
+    variables: presentation.variables ?? {},
     background: backgroundDefinition,
     backgroundColor,
     colors: {
@@ -358,10 +433,58 @@ function resolveDesign(presentation, slide, context) {
       accent: normalizeColor(colorScheme.accent, null) ?? colorFromScheme(colorScheme, "accent3", "#F59E0B"),
       border: colorFromScheme(colorScheme, "accent5", "#CBD5E1")
     },
-    fonts: resolveFontFamilies(fontScheme)
+    fonts: resolveFontFamilies(fontScheme),
+    diagnostics: fontSchemeDiagnostic ? [fontSchemeDiagnostic] : []
+  };
+}
+
+/**
+ * Script font slots, language tags and direction for one slide from core
+ * `resolveScriptFonts` (FF-18). The latin slot is always the renderer's design
+ * font; a script slot that core fills from the latin family follows it too.
+ * Without core support every slot repeats the latin family.
+ */
+function scriptProfile(presentation, index, design, context) {
+  let resolved;
+  if (typeof opfCore.resolveScriptFonts === "function") {
+    try { resolved = opfCore.resolveScriptFonts(presentation, { slideIndex: index }); }
+    catch (error) {
+      reportLanguageDiagnostic(context, { code: "language-preview-unresolved", path: "language",
+        message: "Script fonts could not be resolved (" + (error instanceof Error ? error.message : String(error)) + "), so the preview uses the design font for every script, sets no lang and lays out every paragraph left to right." });
+    }
+  } else if (presentation.language !== undefined) {
+    reportLanguageDiagnostic(context, { code: "language-preview-unavailable", path: "language",
+      message: "The installed @openpresentation/opf has no resolveScriptFonts (FF-18), so the preview uses the design font for every script, sets no lang and lays out every paragraph left to right. Use a core release with the language model." });
+  }
+  if (resolved?.rtl === true && typeof opfCore.paragraphDirection !== "function") {
+    reportLanguageDiagnostic(context, { code: "paragraph-direction-unavailable", path: "language",
+      message: "The installed @openpresentation/opf has no paragraphDirection, so the preview lays out every paragraph of this right-to-left deck left to right, as the PPTX export does. Use a core release that exports it." });
+  }
+  const slots = role => {
+    const latin = design.fonts[role];
+    const slot = key => !resolved || resolved.sources?.[key] === "latin" || resolved.sources?.[key] === "schemeFamily" ? latin : resolved[role]?.[key] ?? latin;
+    return { latin, eastAsian: slot("eastAsian"), complexScript: slot("complexScript") };
+  };
+  return {
+    heading: slots("heading"),
+    body: slots("body"),
+    ...(resolved?.supplement ? { supplement: resolved.supplement } : {}),
+    script: resolved?.script ?? "Zzzz",
+    ...(resolved?.scriptRole ? { scriptRole: resolved.scriptRole } : {}),
+    ...(resolved ? { bcp47: resolved.bcp47, lang: resolved.lang, languageSource: resolved.languageSource, direction: resolved.direction } : {}),
+    rtl: resolved?.rtl === true,
+    serif: design.fontScheme?.type === "serif"
   };
 }
 
+/** Report a language diagnostic once per resolvePresentation call. */
+function reportLanguageDiagnostic(context, diagnostic) {
+  context.languageDiagnostics ??= new Set();
+  if (context.languageDiagnostics.has(diagnostic.code)) return;
+  context.languageDiagnostics.add(diagnostic.code);
+  context.options.onDiagnostic?.(diagnostic);
+}
+
 function inferLayoutId(slide) {
   if (slide.layout) return slide.layout;
   if (slide.blocks?.length) return "blank";
@@ -483,10 +606,16 @@ function bindSlide(presentation, slide, layout, index, context) {
   ];
   const blocks = blockContent(slide, slidePath);
 
-  const design = resolveDesign(presentation, slide, context);
-  for (const role of ["heading","body","code"]) design.fonts[role] = resolveTextStyle({fontFamily:design.fonts[role],fontWeight:role === "heading" ? 700 : 400},context.options.textMeasurement).fontFamily;
-  const geometry = composeSlide(slide, { ...design.dimensions, layout, presentation, slideIndex: index, fonts: design.fonts, contentAlignment:design.contentAlignment, titleAlignment:design.titleAlignment, textRasterPadding:context.options.textRasterPadding, contentBox:design.contentBox, textMeasurement: context.options.textMeasurement });
+  const design = resolveDesign(presentation, slide, context, index);
+  // Script fonts (FF-19): each text run is measured and drawn with its script
+  // slot's face; the latin slot stays the design font scheme's family.
+  const scriptFonts = createScriptFonts(scriptProfile(presentation, index, design, context), context.options.textMeasurement);
+  const textMeasurement = scriptFonts.textMeasurement ?? context.options.textMeasurement;
+  for (const role of ["heading","body","code"]) design.fonts[role] = resolveTextStyle({fontFamily:design.fonts[role],fontWeight:role === "heading" ? 700 : 400},textMeasurement).fontFamily;
+  const geometry = composeSlide(slide, { ...design.dimensions, layout, presentation, slideIndex: index, fonts: design.fonts, contentAlignment:design.contentAlignment, titleAlignment:design.titleAlignment, textRasterPadding:context.options.textRasterPadding, contentBox:design.contentBox, textMeasurement, date: context.options.date, socialPlatforms: socialPlatformRecords(context) });
   return {
+    scriptFonts,
+    textMeasurement,
     geometry,
     assets: presentation.assets ?? {},
     index,
@@ -502,7 +631,9 @@ function bindSlide(presentation, slide, layout, index, context) {
 
 export function resolvePresentation(input, options = {}) {
   const presentation = parseInput(input);
-  assertValidBoundary(presentation);
+  if (options.validate !== false) {
+    assertValidBoundary(presentation);
+  }
 
   const context = { presentation, options };
   const slides = presentation.slides.map((slide, index) => {
@@ -535,13 +666,18 @@ export function renderSvgDeck(input, options = {}) {
 }
 
 function renderResolvedSlide(resolved, slideIndex, options) {
-  options = { ...options, _diagnosticPaths: new Set() };
   const bound = resolved.slides[slideIndex];
+  // Paint with the same script-aware measurement composition used.
+  options = { ...options, ...(bound.textMeasurement ? { textMeasurement: bound.textMeasurement } : {}), _diagnosticPaths: new Set() };
+  const script = bound.scriptFonts?.profile;
+  // Only a language the document names sets lang; the renderer default does not.
+  const lang = script?.languageSource === "document" || script?.languageSource === "option" ? script.bcp47 : undefined;
   const { width, height } = bound.design.dimensions;
   const title = bound.slide.title ?? resolved.presentation.name ?? `Slide ${slideIndex + 1}`;
   const children = [
     renderEmbeddedFonts(options.embeddedFonts),
     renderBackground(bound, width, height, options),
+    renderSlideImage(bound, options),
     renderBranding(bound, resolved.presentation, width, height, options),
     ...renderSlideContent(bound, width, height, options),
     renderFurniture(bound, resolved.presentation, width, height, options, "header"),
@@ -557,6 +693,8 @@ function renderResolvedSlide(resolved, slideIndex, options) {
       viewBox: `0 0 ${width} ${height}`,
       width,
       height,
+      lang,
+      "xml:lang": lang,
       ...traceAttrs(options, bound.path)
     },
     `\n${children.join("\n")}\n`
@@ -604,7 +742,10 @@ function renderBackground(bound, width, height, options) {
   }
   if(isPlainObject(background) && background.type==='pattern'){
     const pattern=background.pattern??{},id=`opf-s${bound.index+1}-pattern`,color=normalizeColor(pattern.foregroundColor,bound.design.colors.text),preset=pattern.preset;
-    const mark=preset==='ltHorz'?tag('path',{d:'M0 4H8',stroke:color,'stroke-width':1}):preset==='diagStripe'?tag('path',{d:'M-2 2L2 -2M0 8L8 0M6 10L10 6',stroke:color,'stroke-width':2}):preset==='pct5'?tag('circle',{cx:2,cy:2,r:.8,fill:color}):'';
+    // 8px cells approximating DrawingML presets. diagStripe is the engine id that
+    // PPTX export writes as wdUpDiag, so both draw the same rising stripe.
+    const stroke=(d,width=1)=>tag('path',{d,fill:'none',stroke:color,'stroke-width':width});
+    const mark=preset==='ltHorz'?tag('path',{d:'M0 4H8',stroke:color,'stroke-width':1}):preset==='diagStripe'||preset==='wdUpDiag'?tag('path',{d:'M-2 2L2 -2M0 8L8 0M6 10L10 6',stroke:color,'stroke-width':2}):preset==='pct5'?tag('circle',{cx:2,cy:2,r:.8,fill:color}):preset==='openDmnd'?stroke('M0 4L4 0L8 4L4 8Z'):preset==='wave'?stroke('M0 4C2 1 2 1 4 4S6 7 8 4'):'';
     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:normalizeColor(pattern.backgroundColor,'#FFFFFF')})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
   }
@@ -619,11 +760,68 @@ function renderBackground(bound, width, height, options) {
   });
 }
 
+// design.slideImage: the shared composition frame, beneath branding and content.
+// crop covers the frame and fit centers the whole image, matching native a:srcRect.
+// Treatments mirror the native picture: the preset mask (core outline), recolor
+// and alphaModFix on the pixels only, the centered line, then the overlay shape.
+function renderSlideImage(bound, options) {
+  const image = bound.geometry.slideImage;
+  if (!image) return '';
+  const trace = options.trace ? { 'data-opf-slide-image': image.path, 'data-opf-slide-image-position': image.position } : {};
+  const value = image.alt === undefined ? image.value : { ...normalizeAsset(image.value), alt: image.alt };
+  const picture = renderImage({ value, path: image.sourcePath }, image.box, bound, { ...options, imageFit: image.fill === 'crop' ? 'cover' : 'contain' });
+  // Unresolved sources keep the ordinary placeholder without treatments, like the export.
+  if (!picture.startsWith('<image')) return tag('g', trace, picture);
+  const id = `opf-s${bound.index + 1}-slide-image`, shape = image.shape, defs = [];
+  const masked = shape && shape.preset !== 'rect';
+  if (masked) defs.push(tag('clipPath', { id: `${id}-clip` }, tag('path', { d: shape.path })));
+  const matrix = slideImageRecolorMatrix(image.recolor, bound);
+  if (matrix) defs.push(tag('filter', { id: `${id}-recolor`, 'color-interpolation-filters': 'sRGB' }, tag('feColorMatrix', { type: 'matrix', values: matrix })));
+  let pixels = matrix || image.opacity !== undefined ? tag('g', { filter: matrix ? `url(#${id}-recolor)` : undefined, opacity: image.opacity === undefined ? undefined : preciseNumber(image.opacity) }, picture) : picture;
+  if (masked) pixels = tag('g', { 'clip-path': `url(#${id}-clip)` }, pixels);
+  const children = [defs.length ? tag('defs', {}, defs.join('')) : '', pixels];
+  if (image.border) {
+    const paint = slideImagePaint(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 }));
+  }
+  if (image.overlay) {
+    const paint = slideImagePaint(image.overlay.color, bound, bound.design.colors.text);
+    children.push(tag('path', { d: image.overlay.shape?.path ?? rectanglePath(image.overlay.box), fill: paint.color, 'fill-opacity': preciseNumber(paint.alpha * image.overlay.opacity), ...(options.trace ? { 'data-opf-slide-image-overlay': `${image.path}.overlay` } : {}) }));
+  }
+  return tag('g', trace, children.filter(Boolean).join(''));
+}
+
+// Native alpha and color-matrix values keep 1/100000 precision; three decimals would drift.
+const preciseNumber = value => String(Math.round(value * 1e6) / 1e6);
+
+function rectanglePath(box) {
+  return `M${stableNumber(box.x)} ${stableNumber(box.y)}H${stableNumber(box.x + box.width)}V${stableNumber(box.y + box.height)}H${stableNumber(box.x)}Z`;
+}
+
+// ColorRef -> opaque #RRGGBB plus the AA byte as alpha, as the native srgbClr + alpha.
+function slideImagePaint(value, bound, fallback) {
+  const hex = resolveColorRef(value, bound, fallback) ?? fallback;
+  const raw = normalizeColor(hex, fallback).slice(1);
+  return { color: `#${raw.slice(0, 6).toUpperCase()}`, alpha: raw.length === 8 ? parseInt(raw.slice(6), 16) / 255 : 1 };
+}
+
+// Rec. 601 luminance on sRGB values; duotone maps it linearly from dark to light.
+function slideImageRecolorMatrix(recolor, bound) {
+  if (!recolor) return undefined;
+  const weights = [0.299, 0.587, 0.114];
+  const channels = recolor.type === 'duotone'
+    ? [slideImagePaint(recolor.dark, bound, '#000000'), slideImagePaint(recolor.light, bound, '#FFFFFF')].map(paint => [1, 3, 5].map(at => parseInt(paint.color.slice(at, at + 2), 16) / 255))
+    : [[0, 0, 0], [1, 1, 1]];
+  const [dark, light] = channels;
+  const rows = [0, 1, 2].map(channel => [...weights.map(weight => preciseNumber((light[channel] - dark[channel]) * weight)), 0, preciseNumber(dark[channel])].join(' '));
+  return [...rows, '0 0 0 1 0'].join(' ');
+}
+
 function renderSlideContent(bound, width, height, options) {
-  for (const diagnostic of bound.geometry.diagnostics) reportDiagnostic(diagnostic, 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}) : '';
+    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)}) : '';
     return surface+renderPayload(item, item.box, { ...bound, composition: item.composition }, options);
   });
 }
@@ -665,7 +863,10 @@ function renderPayload(item, box, bound, options) {
 function renderTextPayload(item, box, bound, options) {
   return (Array.isArray(item.value) ? renderRichTextBox : renderTextBox)(Array.isArray(item.value) ? item.value : flattenText(item.value), box, bound, {
     path: item.path,
-    align: item.field === "title" ? bound.design.titleAlignment : bound.design.contentAlignment,
+    // Core resolves one alignment per composed item for every engine. The
+    // fallback keeps cores published before item.alignment working: titles
+    // follow design.titleAlignment only (unset is left, as in core composition).
+    align: item.alignment ?? (item.field === "title" ? bound.design.titleAlignment ?? "left" : bound.design.contentAlignment),
     fontSize: item.field === "title" ? 54 : item.field === "tag" ? 16 : 25,
     fontFamily: item.field === "title" ? bound.design.fonts.heading : bound.design.fonts.body,
     fontWeight: item.field === "title" ? 700 : 400,
@@ -823,12 +1024,13 @@ function renderCode(item, box, bound, options) {
       'xml:space':'preserve',style:'white-space:pre','text-rendering':'geometricPrecision',fill:part.role==='body'?'#E5E7EB':'#93C5FD',
       ...traceAttrs(options,part.path),...(options.trace?{'data-opf-code-role':part.role,'data-opf-generated':part.generated?'true':undefined,
         'data-opf-text-start':line.start,'data-opf-text-end':line.end,'data-opf-text-next-start':line.nextStart,'data-opf-line-boundary':line.boundary}:{}),
-    },line.segments.map(segment=>tag('tspan',{
+    },line.segments.map(segment=>segmentSpan({
       x:stableNumber(part.box.x+segment.x),
       // SVG's CSS tab-size does not place literal tabs at their measured stops.
       ...(segment.kind==='tab'?{textLength:stableNumber(segment.width),lengthAdjust:'spacingAndGlyphs'}:{}),
       ...(options.trace?{'data-opf-segment':segment.kind,'data-opf-text-start':segment.start,'data-opf-text-end':segment.end}:{}),
-    },escapeText(part.text.slice(segment.start,segment.end)))).join('')));
+      // Code stays left to right; script runs still take their slot fonts.
+    },segment,part.text.slice(segment.start,segment.end),part.style,bound,'monospace',{rtl:false})).join('')));
     children.push(tag('g',{...traceAttrs(options,part.path),...(options.trace?{'data-opf-code-role':part.role,'data-opf-generated':part.generated?'true':undefined,
       'data-opf-box-x':part.box.x,'data-opf-box-y':part.box.y,'data-opf-box-width':part.box.width,'data-opf-box-height':part.box.height}:{}),
       ...(part.fit.overflow?{'data-opf-overflow':'true'}:{})},lines.join('\n')));
@@ -845,18 +1047,32 @@ function renderMetric(item, box, bound, options) {
     if (invalid) throw new OPFRenderError('invalid-metric-text',`Metric text contains U+${invalid[0].codePointAt(0).toString(16).toUpperCase().padStart(4,'0')} at UTF-16 offset ${invalid.index}, which XML cannot represent; edit that character before rendering.`,{path:part.path});
     if (!part.visible) continue;
     if (!part.fit||part.linePositions?.length!==part.fit.sourceLines.length) throw new OPFRenderError('layout-overflow','Metric content has no accepted internal line positions; increase its cell size or coordinate package versions.',{path:part.path,issues:layout.diagnostics});
+    const partRtl=paragraphRtl(bound,part.text);
+    // Anchor untabbed lines at the accepted alignment edge, as PPTX export does,
+    // so a shaper whose advance differs from the accepted width keeps the edge.
+    // Tabbed lines keep their accepted segment origins.
+    const factor=layout.alignment==='right'?1:layout.alignment==='center'?.5:0;
     const lines=part.fit.sourceLines.map((line,index)=>{
       const origin=part.linePositions[index];
+      if(factor&&!line.segments.some(segment=>segment.kind==='tab'))return tag('text',{x:stableNumber(origin.x+line.width*factor),y:stableNumber(origin.baseline),'text-anchor':factor===1?'end':'middle',
+        'font-family':fontStack(part.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(part.fit.fontSize),
+        'font-weight':part.style.fontWeight,'font-style':part.style.italic?'italic':undefined,
+        'xml:space':'preserve',style:'white-space:pre','text-rendering':'geometricPrecision',fill:part.role==='value'?bound.design.colors.primary:bound.design.colors.text,
+        ...traceAttrs(options,part.path),...(options.trace?{'data-opf-metric-role':part.role,'data-opf-text-start':line.start,
+          'data-opf-text-end':line.end,'data-opf-text-next-start':line.nextStart,'data-opf-line-boundary':line.boundary}:{}),
+      },line.segments.map(segment=>segmentSpan({
+        ...(options.trace?{'data-opf-segment':segment.kind,'data-opf-text-start':segment.start,'data-opf-text-end':segment.end}:{}),
+      },segment,part.text.slice(segment.start,segment.end),part.style,bound,bound.design.fontScheme.type,{rtl:partRtl(line.start)})).join(''));
       return tag('text',{x:stableNumber(origin.x),y:stableNumber(origin.baseline),'text-anchor':'start',
         'font-family':fontStack(part.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(part.fit.fontSize),
         'font-weight':part.style.fontWeight,'font-style':part.style.italic?'italic':undefined,
         'xml:space':'preserve',style:'white-space:pre','text-rendering':'geometricPrecision',fill:part.role==='value'?bound.design.colors.primary:bound.design.colors.text,
         ...traceAttrs(options,part.path),...(options.trace?{'data-opf-metric-role':part.role,'data-opf-text-start':line.start,
           'data-opf-text-end':line.end,'data-opf-text-next-start':line.nextStart,'data-opf-line-boundary':line.boundary}:{}),
-      },line.segments.map(segment=>tag('tspan',{x:stableNumber(origin.x+segment.x),
+      },line.segments.map(segment=>segmentSpan({x:stableNumber(origin.x+segment.x),
         ...(segment.kind==='tab'?{textLength:stableNumber(segment.width),lengthAdjust:'spacingAndGlyphs'}:{}),
         ...(options.trace?{'data-opf-segment':segment.kind,'data-opf-text-start':segment.start,'data-opf-text-end':segment.end}:{}),
-      },escapeText(part.text.slice(segment.start,segment.end)))).join(''));
+      },segment,part.text.slice(segment.start,segment.end),part.style,bound,bound.design.fontScheme.type,{rtl:partRtl(line.start)})).join(''));
     });
     children.push(tag('g',{...traceAttrs(options,part.path),...(options.trace?{'data-opf-metric-role':part.role,
       'data-opf-box-x':part.box.x,'data-opf-box-y':part.box.y,'data-opf-box-width':part.box.width,'data-opf-box-height':part.box.height}:{}),
@@ -903,7 +1119,14 @@ function renderTable(item, box, bound, options) {
   const defaultEdges = [], explicitEdges = [];
   for (const row of layout.rows) for (const cell of row.cells) {
     const style = cell.style ?? {};
-    const fill = style.fill ?? (cell.header ? bound.design.colors.primary : bound.design.colors.surface);
+    const defaultFill = cell.header ? bound.design.colors.primary : bound.design.colors.surface;
+    const fill = style.fill == null
+      ? defaultFill
+      : resolveColorRef(style.fill, bound, defaultFill);
+    const defaultText = textColorForFill(fill, cell.header ? "#FFFFFF" : bound.design.colors.text);
+    const textFill = style.color == null
+      ? defaultText
+      : resolveColorRef(style.color, bound, defaultText);
     children.push(tag("rect", {
       x: stableNumber(cell.box.x), y: stableNumber(cell.box.y),
       width: stableNumber(cell.box.width), height: stableNumber(cell.box.height),
@@ -923,17 +1146,18 @@ function renderTable(item, box, bound, options) {
     children.push((cell.rich ? renderRichTextBox : renderTextBox)(cell.rich ? cell.value : flattenText(cell.value ?? ""), cell.textBox, bound, {
       path:cell.path, fontSize:15, fontFamily:bound.design.fonts.body,
       fontWeight:cell.header ? 700 : 400, textStyle:cell.textStyle, fit:cell.fit,
-      fill:style.color ?? textColorForFill(fill, cell.header ? "#FFFFFF" : bound.design.colors.text), align:style.align, options
+      fill:textFill, align:style.align, options
     }));
   }
 
-  return tag("g", traceAttrs(options, item.path), [...children, ...renderTableBorders(defaultEdges, explicitEdges, scale, bound.design.colors.border, options)].join("\n"));
+  return tag("g", traceAttrs(options, item.path), [...children, ...renderTableBorders(defaultEdges, explicitEdges, scale, bound, options)].join("\n"));
 }
 
 // Explicit edges own their shared segment, including invisible/zero-width edges.
 // Split implicit neighbors at merge boundaries so they cannot fill dashed gaps,
 // cover alpha strokes, or reintroduce a border the author removed.
-function renderTableBorders(defaultEdges, explicitEdges, scale, defaultColor, options) {
+function renderTableBorders(defaultEdges, explicitEdges, scale, bound, options) {
+  const defaultColor = bound.design.colors.border;
   const epsilon = 1e-7;
   const segment = ({coordinates:[x1,y1,x2,y2]}) => y1 === y2
     ? {horizontal:true, fixed:y1, start:x1, end:x2}
@@ -955,9 +1179,12 @@ function renderTableBorders(defaultEdges, explicitEdges, scale, defaultColor, op
   return [...defaults,...explicitEdges].flatMap(({coordinates:[x1,y1,x2,y2],border,path}) => {
     const width = border ? border.width * scale : 1;
     if (width === 0) return [];
+    const stroke = border?.color == null
+      ? defaultColor
+      : resolveColorRef(border.color, bound, defaultColor);
     return [tag('line', {
       x1:stableNumber(x1), y1:stableNumber(y1), x2:stableNumber(x2), y2:stableNumber(y2),
-      stroke:border?.color ?? defaultColor, 'stroke-width':stableNumber(width),
+      stroke, 'stroke-width':stableNumber(width),
       'stroke-dasharray':border?.dash === 'dash' ? `${width*4} ${width*3}` : border?.dash === 'dot' ? `${width} ${width*2}` : undefined,
       ...traceAttrs(options,path)
     })];
@@ -996,10 +1223,23 @@ function renderImportedChart(item, box, bound, options) {
     const horizontal=kind==='bar',legendHeight=series.length>1?34:8;
     const plot={x:box.x+(horizontal?100:64),y:box.y+legendHeight+14,width:Math.max(1,box.width-(horizontal?124:84)),height:Math.max(1,box.height-legendHeight-62)};
     const values=series.flatMap(s=>s.values).filter(v=>v!==null),min=Math.min(0,...values),rawMax=Math.max(0,...values),max=rawMax===min?min+1:rawMax,range=max-min;
-    const xValue=v=>plot.x+(v-min)/range*plot.width,yValue=v=>plot.y+(max-v)/range*plot.height;
+    const fraction=(v,reverse=false)=>{
+      const distance=reverse?max-v:v-min;
+      if(Number.isFinite(range)&&Number.isFinite(distance))return distance/range;
+      // Finite endpoints can overflow during subtraction. Keep ordinary
+      // arithmetic unchanged and normalize only that exceptional range.
+      const unit=Math.max(Math.abs(min),Math.abs(max)),low=min/unit,high=max/unit,position=v/unit;
+      return (reverse?high-position:position-low)/(high-low);
+    };
+    const xValue=v=>plot.x+fraction(v)*plot.width,yValue=v=>plot.y+fraction(v,true)*plot.height;
     const zero=horizontal?xValue(0):yValue(0);
     for(let tick=0;tick<=4;tick++){
-      const value=min+range*tick/4,at=horizontal?xValue(value):yValue(value),label=Number(value.toPrecision(4));
+      const direct=min+range*tick/4;
+      const value=Number.isFinite(direct)?direct:min*(1-tick/4)+max*(tick/4);
+      const at=horizontal?xValue(value):yValue(value),rounded=Number(value.toPrecision(4));
+      // Rounding MAX_VALUE to four digits can overflow although the tick is
+      // finite. Its exact shortest decimal remains truthful and parseable.
+      const label=Number.isFinite(rounded)?rounded:String(value);
       children.push(tag('line',{x1:horizontal?at:plot.x,x2:horizontal?at:plot.x+plot.width,y1:horizontal?plot.y:at,y2:horizontal?plot.y+plot.height:at,stroke:bound.design.colors.border,'stroke-width':1}));
       children.push(text(label,horizontal?{x:at-32,y:plot.y+plot.height+6,width:64,height:26}:{x:box.x+4,y:at-12,width:52,height:24},item.path,13,horizontal?'center':'right'));
     }
@@ -1161,7 +1401,75 @@ function renderBranding(bound,presentation,width,height,options) {
 
 function fontStack(family, type) {
   const fallback = type === "serif" ? "serif" : type === "monospace" ? "monospace" : "sans-serif";
-  return `${family}, ${fallback}`;
+  return `${[family].flat().join(", ")}, ${fallback}`;
+}
+
+// Unicode directional isolates (FF-19): each paragraph (text between hard line
+// breaks) of a right-to-left-language deck takes one base direction from
+// paragraphDirection(text, deckDirection), the rule the PPTX export uses for
+// a:pPr rtl. Every wrapped line of a right-to-left paragraph is laid out as a
+// right-to-left isolate, so its lines never differ in direction. Absolute
+// alignment and measured advances are unchanged.
+const RIGHT_TO_LEFT_ISOLATE = "\u2067", POP_DIRECTIONAL_ISOLATE = "\u2069";
+// Core owns the rule (paragraphDirection, core #134), so preview and export agree.
+// Without it (published core 0.11.0) every paragraph is left to right, as in export.
+const coreParagraphDirection = typeof opfCore.paragraphDirection === "function" ? opfCore.paragraphDirection : null;
+/** Maps a source offset of the text to whether its paragraph is right to left. */
+function paragraphRtl(bound, text) {
+  if (bound.scriptFonts?.rtl !== true || !coreParagraphDirection) return () => false;
+  const source = String(text ?? ""), spans = [];
+  let start = 0;
+  for (const match of source.matchAll(/\r\n|\r|\n/g)) { spans.push([start, match.index]); start = match.index + match[0].length; }
+  spans.push([start, source.length]);
+  const rtl = spans.map(([from, to]) => coreParagraphDirection(source.slice(from, to), "rtl") === "rtl");
+  return offset => { for (let index = spans.length - 1; index >= 0; index--) if (offset >= spans[index][0]) return rtl[index]; return rtl[0]; };
+}
+
+/**
+ * SVG content for `text` drawn in `style` (FF-19). Text in the style's own
+ * family is emitted unchanged. A single run in another family returns that
+ * family for the enclosing element. Several runs become tspans naming their
+ * script slot's family. With `placement` ({x, width, fontSize}) the runs are
+ * positioned at their measured advances, each with its own textLength, because
+ * a textLength spanning differently fonted tspans does not rasterize reliably;
+ * the caller then drops its own textLength and anchors at the start.
+ */
+function scriptLine(text, style, bound, type, { rtl = false, placement, trace } = {}) {
+  const value = String(text ?? "");
+  const scripts = 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 (runs.length === 1) {
+    const [run] = runs;
+    return { content: isolate(escapeText(value)), family: run.own ? undefined : fontStack(run.stack ?? run.family, type) };
+  }
+  const widths = placement && placement.width > 0 ? scripts.runWidths(runs, placement.fontSize, style) : undefined;
+  if (!widths) {
+    return { content: isolate(runs.map(run => run.own ? escapeText(run.text)
+      : tag("tspan", { "font-family": fontStack(run.stack ?? run.family, type) }, escapeText(run.text))).join("")) };
+  }
+  const total = widths.reduce((sum, width) => sum + width, 0), factor = total > 0 ? placement.width / total : 1;
+  let advance = 0, offset = 0;
+  const content = runs.map((run, index) => {
+    const width = widths[index] * factor, left = rtl ? placement.width - advance - width : advance;
+    advance += width;
+    const start = offset;
+    offset += run.text.length;
+    return tag("tspan", {
+      x: stableNumber(placement.x + left),
+      textLength: width > 0 ? stableNumber(width) : undefined, lengthAdjust: width > 0 ? "spacingAndGlyphs" : undefined,
+      "font-family": run.own ? undefined : fontStack(run.family, type),
+      ...(trace ? trace(start, offset) : {})
+    }, isolate(escapeText(run.text)));
+  }).join("");
+  return { content, positioned: true };
+}
+
+/** One positioned code/metric segment tspan; its script runs flow inside it (no textLength). */
+function segmentSpan(attrs, segment, text, style, bound, type, options) {
+  const scripted = segment.kind === "tab" ? { content: escapeText(text) } : scriptLine(text, style, bound, type, options);
+  return tag("tspan", { ...attrs, "font-family": scripted.family }, scripted.content);
 }
 
 function renderEmbeddedFonts(fonts = []) {
@@ -1185,22 +1493,51 @@ function renderRichLines(value,fit,box,bound,config) {
   const alignment=fit.placement?.alignment??config.align??bound.design.contentAlignment;
   let textOffset=0;
   const runOffsets=value.map(run=>{const start=textOffset;textOffset+=(typeof run==='string'?run:run.text).length;return start;});
+  const richRtl=paragraphRtl(bound,value.map(run=>typeof run==='string'?run:run.text).join(''));
   // With no measurement provider, fragment advances are estimates. Let SVG
   // shape adjacent runs naturally inside each estimated line instead of turning
   // those estimates into visible gaps. Supplied measurements keep exact origins.
-  const flow=!config.options.textMeasurement?.measure&&!fit.placement;
+  const naturalFlow=!config.options.textMeasurement?.measure&&!fit.placement;
+  const hasTabs=fit.richLines.some(line=>line.fragments.some(fragment=>fragment.kind==='tab'));
   const content=fit.richLines.map((line,lineIndex)=>{
-    const fragments=line.fragments.map(fragment=>{
-    const run=fragment.run,offset=alignment==='right'?box.width-line.width:alignment==='center'?(box.width-line.width)/2:0;
+    const lineHasTab=line.fragments.some(fragment=>fragment.kind==='tab');
+    const flow=naturalFlow&&!lineHasTab;
+    const offset=alignment==='right'?box.width-line.width:alignment==='center'?(box.width-line.width)/2:0;
     const placed=fit.placement?.lines[lineIndex];
+    const originX=placed?.x??box.x+offset,baseline=placed?.baseline??box.y+line.baseline;
+    const firstFragment=line.fragments[0],rtl=richRtl(firstFragment?runOffsets[firstFragment.runIndex]+firstFragment.start:0);
+    const renderFragment=(fragment,asFlow,edges={})=>{
+    const run=fragment.run;
     // Accepted outline placement owns the horizontal advance. Geometric precision
     // avoids hinted browser advances; textLength also removes fractional-size
     // quantization drift. Height and baseline retain the selected font size.
-    const position=flow?{'baseline-shift':fragment.baselineShift?stableNumber(-fragment.baselineShift):undefined}:{x:stableNumber((placed?.x??box.x+offset)+fragment.x),y:stableNumber((placed?.baseline??box.y+line.baseline)+fragment.baselineShift)};
-    const rendered=tag(flow?'tspan':'text',{...(config.options.trace?{'data-opf-text-start':runOffsets[fragment.runIndex]+fragment.start,'data-opf-text-end':runOffsets[fragment.runIndex]+fragment.end}:{}),...position,'xml:space':'preserve','text-rendering':flow?undefined:'geometricPrecision',textLength:placed&&fragment.width>0?stableNumber(fragment.width):undefined,lengthAdjust:placed&&fragment.width>0?'spacingAndGlyphs':undefined,'font-family':fontStack(fragment.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(fragment.fontSize),'font-weight':fragment.style.fontWeight,'font-style':fragment.style.italic?'italic':flow?'normal':undefined,'text-decoration':[run.underline?'underline':'',run.strikethrough?'line-through':''].filter(Boolean).join(' ')||undefined,fill:/^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(run.color??'')?run.color:config.fill},escapeText(fragment.text));
+    // A right-to-left line places its fragments from the right edge (FF-19).
+    // Estimated (natural-flow) lines keep logical order; the browser reorders them.
+    const fragmentX=rtl&&!naturalFlow?line.width-fragment.x-fragment.width:fragment.x;
+    const position=asFlow?{'baseline-shift':fragment.baselineShift?stableNumber(-fragment.baselineShift):undefined}:{x:stableNumber(originX+fragmentX),y:stableNumber(baseline+fragment.baselineShift)};
+    const runFill = run.color == null
+      ? config.fill
+      : resolveColorRef(run.color, bound, config.fill);
+    let fixedAdvance=(fragment.kind==='tab'||placed)&&fragment.width>0;
+    const scripted=fragment.kind==='tab'?{content:escapeText(fragment.text)}:scriptLine(fragment.text,fragment.style,bound,bound.design.fontScheme.type,{rtl:rtl&&!asFlow,
+      placement:fixedAdvance&&!asFlow?{x:originX+fragmentX,width:fragment.width,fontSize:fragment.fontSize}:undefined});
+    if(scripted.positioned)fixedAdvance=false;
+    const content=`${edges.first?RIGHT_TO_LEFT_ISOLATE:''}${scripted.content}${edges.last?POP_DIRECTIONAL_ISOLATE:''}`;
+    const rendered=tag(asFlow?'tspan':'text',{...(config.options.trace?{'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,bound.design.fontScheme.type),'font-size':stableNumber(fragment.fontSize),'font-weight':fragment.style.fontWeight,'font-style':fragment.style.italic?'italic':asFlow?'normal':undefined,'text-decoration':[run.underline?'underline':'',run.strikethrough?'line-through':''].filter(Boolean).join(' ')||undefined,fill:runFill},content);
     if(run.link&&/^(https?:|mailto:)/i.test(run.link))return tag('a',{href:run.link,target:'_blank',rel:'noopener noreferrer'},rendered);
     return rendered;
-    });
+    };
+    if(naturalFlow&&lineHasTab) {
+      const chunks=[];let textChunk=[];
+      const flush=()=>{if(!textChunk.length)return;const first=textChunk[0];chunks.push(tag('text',{x:stableNumber(originX+first.x),y:stableNumber(baseline),'xml:space':'preserve'},textChunk.map((fragment,index)=>renderFragment(fragment,true,{first:rtl&&!index,last:rtl&&index===textChunk.length-1})).join('')));textChunk=[];};
+      for(const fragment of line.fragments) {
+        if(fragment.kind==='tab'){flush();chunks.push(renderFragment(fragment,false));}
+        else textChunk.push(fragment);
+      }
+      flush();return chunks.join('\n');
+    }
+    // A flowing right-to-left line is one isolate across its fragments.
+    const fragments=line.fragments.map((fragment,index)=>renderFragment(fragment,flow,flow?{first:rtl&&!index,last:rtl&&index===line.fragments.length-1}:{}));
     if(!flow)return fragments.join('\n');
     const x=alignment==='right'?box.x+box.width:alignment==='center'?box.x+box.width/2:box.x;
     const first=line.fragments[0];
@@ -1213,9 +1550,11 @@ function renderRichLines(value,fit,box,bound,config) {
     const start=cursor;cursor+=(fit.lines[index]??'').length;
     const offset=alignment==='right'?box.width-line.width:alignment==='center'?(box.width-line.width)/2:0;
     const placed=fit.placement?.lines[index];
-    return {start,end:cursor,x:placed?.x??box.x+offset,y:placed?.y??box.y+line.y,height:placed?.height??line.height};
+    return {start,end:cursor,x:placed?.x??box.x+offset,y:placed?.y??box.y+line.y,height:placed?.height??line.height,
+      ...(naturalFlow&&line.fragments.some(fragment=>fragment.kind==='tab')?{spacing:'natural-chunks-estimated-tabs'}:{})};
   }):undefined;
-  return tag('g',{...traceAttrs(config.options,config.path),...(config.options.trace?{'data-opf-box-width':box.width,'data-opf-rich-text':config.rich===false?undefined:'true','data-opf-rich-lines':JSON.stringify(lineTrace),'data-opf-rich-spacing':flow?'natural':'measured'}:{}),...(fit.overflow?{'data-opf-overflow':'true'}:{})},content.join('\n'));
+  const spacing=naturalFlow?(hasTabs?'mixed-estimated-tabs':'natural'):'measured';
+  return tag('g',{...traceAttrs(config.options,config.path),...(config.options.trace?{'data-opf-box-width':box.width,'data-opf-rich-text':config.rich===false?undefined:'true','data-opf-rich-lines':JSON.stringify(lineTrace),'data-opf-rich-spacing':spacing}:{}),...(fit.overflow?{'data-opf-overflow':'true'}:{})},content.join('\n'));
 }
 
 function renderTextBox(text, box, bound, config) {
@@ -1238,21 +1577,39 @@ function renderTextBox(text, box, bound, config) {
   const alignment=fit.placement?.alignment??config.align??bound.design.contentAlignment;
   const anchor = alignment === "center" ? "middle" : alignment === "right" ? "end" : "start";
   const x = alignment === "center" ? box.x + box.width / 2 : alignment === "right" ? box.x + box.width : box.x;
+  const type = config.fontFamily === bound.design.fonts.code ? "monospace" : bound.design.fontScheme.type;
+  const source = String(text ?? ""), boxRtl = paragraphRtl(bound, source);
+  let cursor = 0;
   const lines = fit.lines.map((line, index) => {
     const sourceLine=fit.sourceLines?.[index],placed=fit.placement?.lines[index],factor=alignment==='right'?1:alignment==='center'?.5:0;
+    // The line's paragraph decides its direction: source offsets when layout has them, else the next match.
+    const found=sourceLine?sourceLine.start:source.indexOf(line,cursor),lineStart=found>=0?found:cursor;cursor=lineStart+line.length;
+    const rtl=boxRtl(lineStart);
     const origin=placed?.x??x-(sourceLine?.width??0)*factor;
     const tabs=sourceLine?.segments.some(segment=>segment.kind==='tab');
-    const content=tabs?sourceLine.segments.map(segment=>tag('tspan',{
-      x:stableNumber(origin+segment.x),textLength:segment.kind==='tab'||placed?stableNumber(segment.width):undefined,
-      lengthAdjust:segment.kind==='tab'||placed?'spacingAndGlyphs':undefined,
-      ...(config.options.trace?{'data-opf-source-start':segment.start,'data-opf-source-end':segment.end,'data-opf-segment':segment.kind}:{}),
-    },escapeText(line.slice(segment.start-sourceLine.start,segment.end-sourceLine.start)))).join(''):escapeText(line);
+    let content,family,positioned=false;
+    if(tabs) content=sourceLine.segments.map(segment=>{
+      const segmentText=line.slice(segment.start-sourceLine.start,segment.end-sourceLine.start),fixed=segment.kind==='tab'||placed;
+      const traced=(start,end)=>config.options.trace?{'data-opf-source-start':start,'data-opf-source-end':end,'data-opf-segment':segment.kind}:{};
+      const scripted=segment.kind==='tab'?{content:escapeText(segmentText)}:scriptLine(segmentText,style,bound,type,{rtl,
+        placement:placed?{x:origin+segment.x,width:segment.width,fontSize:size}:undefined,
+        trace:config.options.trace?(start,end)=>traced(segment.start+start,segment.start+end):undefined});
+      if(scripted.positioned)return scripted.content;
+      return tag('tspan',{
+        x:stableNumber(origin+segment.x),textLength:fixed?stableNumber(segment.width):undefined,
+        lengthAdjust:fixed?'spacingAndGlyphs':undefined,'font-family':scripted.family,
+        ...traced(segment.start,segment.end),
+      },scripted.content);
+    }).join('');
+    else ({content,family,positioned=false}=scriptLine(line,style,bound,type,{rtl,placement:placed?.width>0?{x:placed.x,width:placed.width,fontSize:size}:undefined}));
+    // Positioned script runs carry their own x and textLength (FF-19).
+    const start=tabs||positioned;
     return tag("text", {
-    x: stableNumber(tabs?origin:placed?placed.x+placed.width*factor:x), y: stableNumber(placed?.baseline??startY + index * fit.lineHeight),
-    "text-anchor": tabs?'start':anchor, "font-family": fontStack(style.fontFamily, config.fontFamily === bound.design.fonts.code ? "monospace" : bound.design.fontScheme.type),
+    x: stableNumber(tabs?origin:positioned?placed.x:placed?placed.x+placed.width*factor:x), y: stableNumber(placed?.baseline??startY + index * fit.lineHeight),
+    "text-anchor": start?'start':anchor, "font-family": family ?? fontStack(style.fontFamily, type),
     "font-size": stableNumber(size), "font-weight": style.fontWeight, "font-style": style.italic ? "italic" : undefined, fill: config.fill,
     'xml:space':'preserve',style:'white-space:pre','text-rendering':config.options.textMeasurement?.measure?'geometricPrecision':undefined,
-    textLength:!tabs&&placed?.width>0?stableNumber(placed.width):undefined,lengthAdjust:!tabs&&placed?.width>0?'spacingAndGlyphs':undefined,
+    textLength:!start&&placed?.width>0?stableNumber(placed.width):undefined,lengthAdjust:!start&&placed?.width>0?'spacingAndGlyphs':undefined,
     ...traceAttrs(config.options, config.path),
     ...(config.options.trace&&sourceLine?{'data-opf-source-start':sourceLine.start,'data-opf-source-end':sourceLine.end,'data-opf-source-next-start':sourceLine.nextStart,'data-opf-line-boundary':sourceLine.boundary}:{}),
   }, content);