@stll/folio-core 0.29.0 → 0.30.0

package/dist/layout-engine/types.d.ts

@@ -29,6 +29,8 @@ type RunFormatting = {
    */
   shading?: string;
   fontFamily?: string;
+  /** OOXML `w:altName` fallback for `fontFamily`, used only when the primary face is absent. */
+  alternateFontFamily?: string;
   /**
    * Resolved East-Asian font (`w:eastAsia` / `eastAsiaTheme`). CJK code points
    * in this run measure and paint with this font; non-CJK keeps `fontFamily`
@@ -37,6 +39,8 @@ type RunFormatting = {
    * to `fontFamily`.
    */
   eastAsiaFontFamily?: string;
+  /** OOXML alternate-name fallback for `eastAsiaFontFamily`. */
+  eastAsiaAlternateFontFamily?: string;
   /**
    * Resolved complex-script font (`w:cs` / `cstheme`). Arabic, Hebrew, Indic
    * and South-East Asian code points in this run measure and paint with this
@@ -46,6 +50,8 @@ type RunFormatting = {
    * does NOT do and is why this slot has to reach layout at all.
    */
   complexScriptFontFamily?: string;
+  /** OOXML alternate-name fallback for `complexScriptFontFamily`. */
+  complexScriptAlternateFontFamily?: string;
   /** Independent complex-script size (`w:szCs`), in points. */
   complexScriptFontSize?: number;
   /** Independent complex-script weight (`w:bCs`). */
@@ -127,7 +133,7 @@ type RunFormatting = {
   /** Groups a suggestion's runs for accept/reject and scroll-to. */
   suggestionId?: string;
 };
-type ListMarkerFormatting = Pick<RunFormatting, "fontFamily" | "eastAsiaFontFamily" | "complexScriptFontFamily" | "fontSize" | "complexScriptFontSize" | "bold" | "complexScriptBold" | "italic" | "complexScriptItalic" | "rtl" | "forceComplexScript">;
+type ListMarkerFormatting = Pick<RunFormatting, "fontFamily" | "alternateFontFamily" | "eastAsiaFontFamily" | "eastAsiaAlternateFontFamily" | "complexScriptFontFamily" | "complexScriptAlternateFontFamily" | "fontSize" | "complexScriptFontSize" | "bold" | "complexScriptBold" | "italic" | "complexScriptItalic" | "rtl" | "forceComplexScript">;
 /**
  * Hyperlink information for a run.
  */
@@ -500,6 +506,8 @@ type ParagraphAttrs = {
   listMarkerSecondSlotOffsetTwips?: number;
   defaultFontSize?: number;
   defaultFontFamily?: string;
+  /** OOXML alternate-name fallback for `defaultFontFamily`. */
+  defaultAlternateFontFamily?: string;
   /**
    * Document-wide `w:defaultTabStop` (§17.6.13) in twips. Read by the list
    * marker tab-stop math so long markers align body text at the document's
@@ -591,6 +599,8 @@ type TableRow = {
   gridAfter?: number;
   height?: number;
   heightRule?: "auto" | "atLeast" | "exact";
+  /** Effective row-level table justification after OOXML precedence. */
+  justification?: "left" | "center" | "right";
   isHeader?: boolean;
   /** `w:cantSplit`: keep this row in one flow region. */
   cantSplit?: boolean;
@@ -765,6 +775,8 @@ type TextBoxBlock = {
   autoFit?: ShapeTextBody["autoFit"];
   /** Horizontal text wrapping inside the box */
   textWrap?: ShapeTextBody["textWrap"];
+  /** Vertical text alignment inside the box */
+  verticalAlign?: ShapeTextBody["anchor"];
   /** Fill/background color */
   fillColor?: string;
   /** Border width in pixels */
@@ -868,6 +880,11 @@ type MeasuredLine = {
   descent: number;
   /** Total line height in pixels. */
   lineHeight: number;
+  /** Paint adjustment admitted by measurement for this line. */
+  justificationPaint?: {
+    type: "space-contraction";
+    contractionPx: number;
+  };
   /** Left offset from floating images (pixels from content left edge). */
   leftOffset?: number;
   /** Right offset from floating images (pixels from content right edge). */

package/dist/layout-engine/types.js

@@ -1,5 +1,5 @@
 import { __exportAll } from "../_virtual/_rolldown/runtime.js";
-import { isFloatingWrapType, isWrapNone } from "../docx/wrapTypes.js";
+import { isFloatingWrapType, isWrapNone } from "../types/wrap.js";
 //#region src/layout-engine/types.ts
 var types_exports = /* @__PURE__ */ __exportAll({
 	DEFAULT_TEXTBOX_MARGINS: () => DEFAULT_TEXTBOX_MARGINS,

package/dist/layout-painter/imageLayout.d.ts

@@ -1,7 +1,7 @@
 import { FlowBlock, Measure } from "../layout-engine/types.js";
 import { ImageAttrs } from "../prosemirror/schema/nodes.js";
 import { BlockLookup } from "./index.js";
-import { WrapType } from "../docx/wrapTypes.js";
+import { WrapType } from "../types/wrap.js";
 //#region src/layout-painter/imageLayout.d.ts
 /**
  * Anchored wrap-type targets — the OOXML wrap types except `inline`.

package/dist/layout-painter/renderPage.js

@@ -4,6 +4,7 @@ import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
 import { floatingTextBoxReservesBand, floatingTextBoxWrapsText, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import { borderToStyle } from "../utils/formatToStyle.js";
+import { normalizeHorizontalScalePercent } from "../utils/horizontalScale.js";
 import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 import { eighthsToPixels, pointsToPixels } from "../utils/units.js";
 import { resolveAnchoredImagePosition as resolveAnchoredImagePosition$1 } from "./anchoredImagePosition.js";
@@ -1335,12 +1336,15 @@ function runContentKey(run) {
 	if (run.color) parts.push(`c:${run.color}`);
 	if (run.highlight) parts.push(`hi:${run.highlight}`);
 	if (run.fontFamily) parts.push(`ff:${run.fontFamily}`);
+	if (run.alternateFontFamily) parts.push(`ff-alt:${run.alternateFontFamily}`);
 	if (run.complexScriptFontFamily) parts.push(`cs:${run.complexScriptFontFamily}`);
+	if (run.complexScriptAlternateFontFamily) parts.push(`cs-alt:${run.complexScriptAlternateFontFamily}`);
 	if (run.complexScriptFontSize !== void 0) parts.push(`cs-size:${run.complexScriptFontSize}`);
 	if (run.complexScriptBold !== void 0) parts.push(`cs-bold:${run.complexScriptBold}`);
 	if (run.complexScriptItalic !== void 0) parts.push(`cs-italic:${run.complexScriptItalic}`);
 	if (run.forceComplexScript !== void 0) parts.push(`cs-force:${run.forceComplexScript}`);
 	if (run.eastAsiaFontFamily) parts.push(`ea:${run.eastAsiaFontFamily}`);
+	if (run.eastAsiaAlternateFontFamily) parts.push(`ea-alt:${run.eastAsiaAlternateFontFamily}`);
 	if (run.fontSize !== void 0) parts.push(`fs:${run.fontSize}`);
 	if (run.letterSpacing !== void 0) parts.push(`ls:${run.letterSpacing}`);
 	if (run.superscript) parts.push("sup");
@@ -1348,7 +1352,8 @@ function runContentKey(run) {
 	if (run.allCaps) parts.push("ac");
 	if (run.smallCaps) parts.push("sc");
 	if (run.positionPx !== void 0) parts.push(`pp:${run.positionPx}`);
-	if (run.horizontalScale !== void 0 && run.horizontalScale !== 100) parts.push(`hs:${run.horizontalScale}`);
+	const horizontalScale = normalizeHorizontalScalePercent(run.horizontalScale);
+	if (horizontalScale !== void 0 && horizontalScale !== 100) parts.push(`hs:${horizontalScale}`);
 	if (run.imprint) parts.push("imp");
 	if (run.emboss) parts.push("emb");
 	if (run.textShadow) parts.push("sh");

package/dist/layout-painter/renderParagraph.js

@@ -1,16 +1,17 @@
 import { ommlToMathml } from "../docx/mathToMathml.js";
 import { parseXmlDocument } from "../docx/xmlParser.js";
 import { evaluateFieldInstruction } from "../fields/evaluateField.js";
-import { hasComplexScriptFormatting, resolveComplexScriptFormatting } from "../layout-engine/measure/complexScriptFormatting.js";
+import { applyComplexScriptFormatting, hasComplexScriptFormatting, resolveComplexScriptFormatting } from "../layout-engine/measure/complexScriptFormatting.js";
 import { getHyperlinkInstanceIndex } from "../layout-engine/measure/hyperlinkInstance.js";
 import { getListMarkerInlineWidth, getListMarkerVisualOffset, resolveListMarkerFont } from "../layout-engine/measure/listMarkerWidth.js";
 import { DOCX_SCRIPT_FONT_SCALE } from "../layout-engine/measure/measureHelpers.js";
+import { calculateTabWidth } from "../layout-engine/measure/tabCalculator.js";
 import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode, toPaintedText } from "../layout-engine/measure/textMeasurementPolicy.js";
 import { isFloatingImageRun } from "../layout-engine/types.js";
-import { calculateTabWidth } from "../prosemirror/utils/tabCalculator.js";
 import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import "../utils/fontWeights.js";
+import { getHorizontalScaleFactor } from "../utils/horizontalScale.js";
 import { resolvePhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
@@ -153,11 +154,18 @@ function getRaisedRunFontSize(run) {
 	if (run.fontSize) return `${fontSizePtToPx(run.fontSize) * DOCX_SCRIPT_FONT_SCALE}px`;
 	return `${DOCX_SCRIPT_FONT_SCALE}em`;
 }
+function applyHorizontalScaleTransform(element, horizontalScale) {
+	const horizontalScaleFactor = getHorizontalScaleFactor(horizontalScale);
+	if (horizontalScaleFactor === 1) return;
+	element.style.display = "inline-block";
+	element.style.transform = `scaleX(${horizontalScaleFactor})`;
+	element.style.transformOrigin = "left center";
+}
 /**
 * Apply text run styles to an element
 */
 function applyRunStyles(element, run) {
-	if (run.fontFamily) element.style.fontFamily = resolveFontFamily(run.fontFamily).cssFallback;
+	if (run.fontFamily) element.style.fontFamily = resolveFontFamily(run.fontFamily, run.alternateFontFamily).cssFallback;
 	if (run.fontSize) element.style.fontSize = `${fontSizePtToPx(run.fontSize)}px`;
 	if (run.bold) element.style.fontWeight = "700";
 	if (run.italic) element.style.fontStyle = "italic";
@@ -172,11 +180,7 @@ function applyRunStyles(element, run) {
 	if (run.allCaps) element.style.textTransform = "uppercase";
 	if (run.smallCaps) element.style.fontVariant = "small-caps";
 	if (run.positionPx) element.style.verticalAlign = `${run.positionPx}px`;
-	if (run.horizontalScale && run.horizontalScale !== 100) {
-		element.style.display = "inline-block";
-		element.style.transform = `scaleX(${run.horizontalScale / 100})`;
-		element.style.transformOrigin = "left center";
-	}
+	applyHorizontalScaleTransform(element, run.horizontalScale);
 	element.style.fontKerning = getRunFontKerningMode(run, 11);
 	if (run.emboss) element.style.textShadow = "1px 1px 1px rgba(255,255,255,0.5), -1px -1px 1px rgba(0,0,0,0.3)";
 	if (run.imprint) element.style.textShadow = "-1px -1px 1px rgba(255,255,255,0.5), 1px 1px 1px rgba(0,0,0,0.3)";
@@ -293,9 +297,11 @@ function applyRunStyles(element, run) {
 		element.style.fontSize = getRaisedRunFontSize(run);
 	}
 }
-function reserveScaledAdvance(element, unscaledWidth, horizontalScale) {
-	if (horizontalScale === void 0 || horizontalScale === 100) return;
-	element.style.width = `${unscaledWidth * (horizontalScale / 100)}px`;
+function reserveScaledAdvance({ element, unscaledWidth, horizontalScale, visualSpaceContractionPx }) {
+	const horizontalScaleFactor = getHorizontalScaleFactor(horizontalScale);
+	const visualAdvance = Math.max(0, unscaledWidth * horizontalScaleFactor - (visualSpaceContractionPx ?? 0));
+	if (horizontalScaleFactor !== 1) element.style.width = `${visualAdvance}px`;
+	return visualAdvance;
 }
 /**
 * Apply PM position data attributes
@@ -304,10 +310,28 @@ function applyPmPositions(element, pmStart, pmEnd) {
 	if (pmStart !== void 0) element.dataset["pmStart"] = String(pmStart);
 	if (pmEnd !== void 0) element.dataset["pmEnd"] = String(pmEnd);
 }
-/**
-* Render a text run
-*/
-function renderTextRun(run, doc, hyperlinkDirection) {
+const NON_COMPRESSIBLE_WHITESPACE_PATTERN = /([^\S ]+)/gu;
+const HAS_NON_COMPRESSIBLE_WHITESPACE_PATTERN = /[^\S ]/u;
+function appendPaintedText({ host, text, doc, contractedWordSpacing }) {
+	if (!contractedWordSpacing) {
+		host.textContent = text;
+		return;
+	}
+	if (!HAS_NON_COMPRESSIBLE_WHITESPACE_PATTERN.test(text)) {
+		host.textContent = text;
+		host.style.wordSpacing = countCompressibleSpaces(text) > 0 ? contractedWordSpacing : "0";
+		return;
+	}
+	host.style.wordSpacing = "0";
+	for (const segment of text.split(NON_COMPRESSIBLE_WHITESPACE_PATTERN)) {
+		if (segment.length === 0) continue;
+		const segmentEl = doc.createElement("span");
+		segmentEl.textContent = segment;
+		segmentEl.style.wordSpacing = countCompressibleSpaces(segment) > 0 ? contractedWordSpacing : "0";
+		host.append(segmentEl);
+	}
+}
+function renderTextRun(run, doc, options) {
 	const span = doc.createElement("span");
 	span.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.text}`;
 	if (run.footnoteRefId !== void 0) {
@@ -324,18 +348,26 @@ function renderTextRun(run, doc, hyperlinkDirection) {
 	applyRunStyles(span, run);
 	applyPmPositions(span, run.pmStart, run.pmEnd);
 	const paintedText = toPaintedText(run.text);
+	const visualSpaceContractionPx = options?.visualSpaceContractionPx;
+	const effectiveHorizontalScaleFactor = getHorizontalScaleFactor(run.horizontalScale) * (options?.ancestorHorizontalScaleFactor ?? 1);
+	const contractedWordSpacing = visualSpaceContractionPx === void 0 || effectiveHorizontalScaleFactor === 0 ? void 0 : `${-visualSpaceContractionPx / effectiveHorizontalScaleFactor}px`;
 	const isBookmarkTarget = run.hyperlink?.href.startsWith("#") === true;
 	const hyperlinkHref = resolveHyperlinkHref(run.hyperlink?.href, isBookmarkTarget);
 	if (run.hyperlink && hyperlinkHref !== void 0) {
 		const anchor = doc.createElement("a");
 		anchor.href = hyperlinkHref;
-		if (hyperlinkDirection || DISPLAYED_URL_PATTERN.test(paintedText.trim())) anchor.dir = LEFT_TO_RIGHT_DIRECTION;
+		if (options?.hyperlinkDirection || DISPLAYED_URL_PATTERN.test(paintedText.trim())) anchor.dir = LEFT_TO_RIGHT_DIRECTION;
 		if (!isBookmarkTarget) {
 			anchor.target = "_blank";
 			anchor.rel = "noopener noreferrer";
 		}
 		if (run.hyperlink.tooltip) anchor.title = run.hyperlink.tooltip;
-		anchor.textContent = paintedText;
+		appendPaintedText({
+			host: anchor,
+			text: paintedText,
+			doc,
+			...contractedWordSpacing !== void 0 ? { contractedWordSpacing } : {}
+		});
 		if (!run.hyperlink.noDefaultStyle) {
 			const hyperlinkColor = getHyperlinkTextColor(run, span.style.color);
 			anchor.style.color = hyperlinkColor;
@@ -349,7 +381,12 @@ function renderTextRun(run, doc, hyperlinkDirection) {
 			}
 		}
 		span.append(anchor);
-	} else span.textContent = paintedText;
+	} else appendPaintedText({
+		host: span,
+		text: paintedText,
+		doc,
+		...contractedWordSpacing !== void 0 ? { contractedWordSpacing } : {}
+	});
 	applyWhitespaceUnderline(span, run);
 	return span;
 }
@@ -648,40 +685,36 @@ function resolveFieldText(run, context) {
 		...run.fldLock ? { locked: true } : {}
 	});
 }
-function renderFieldRun(run, doc, context) {
+function renderFieldRun(run, doc, { context, visualSpaceContractionPx }) {
 	const text = resolveFieldText(run, context);
 	const resolvedRun = {
 		...run,
 		kind: "text",
 		text
 	};
-	if (resolvedRun.forceComplexScript && hasComplexScriptFormatting(resolvedRun)) return renderTextRun({
-		...resolvedRun,
-		...resolveComplexScriptFormatting(resolvedRun)
-	}, doc);
+	if (resolvedRun.forceComplexScript && hasComplexScriptFormatting(resolvedRun)) return renderTextRun(applyComplexScriptFormatting(resolvedRun, resolvedRun), doc, { ...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {} });
 	if (needsPerScriptSpans({
 		...resolvedRun,
 		text
 	})) {
 		const wrapper = doc.createElement("span");
 		applyPmPositions(wrapper, resolvedRun.pmStart, resolvedRun.pmEnd);
-		if (resolvedRun.horizontalScale && resolvedRun.horizontalScale !== 100) {
-			wrapper.style.display = "inline-block";
-			wrapper.style.transform = `scaleX(${resolvedRun.horizontalScale / 100})`;
-			wrapper.style.transformOrigin = "left center";
-		}
+		const horizontalScaleFactor = getHorizontalScaleFactor(resolvedRun.horizontalScale);
+		applyHorizontalScaleTransform(wrapper, resolvedRun.horizontalScale);
 		const { pmStart: _pmStart, pmEnd: _pmEnd, horizontalScale: _horizontalScale, ...segmentBase } = resolvedRun;
 		for (const segment of segmentByScript(text)) {
-			const segmentRun = {
+			const segmentRun = formatTextRunForScript({
 				...segmentBase,
-				text: segment.text,
-				...scriptFormattingOverride(resolvedRun, segment.script)
-			};
-			wrapper.append(renderTextRun(segmentRun, doc));
+				text: segment.text
+			}, segment.script);
+			wrapper.append(renderTextRun(segmentRun, doc, {
+				...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {},
+				ancestorHorizontalScaleFactor: horizontalScaleFactor
+			}));
 		}
 		return wrapper;
 	}
-	return renderTextRun(resolvedRun, doc);
+	return renderTextRun(resolvedRun, doc, { ...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {} });
 }
 /**
 * Render an OMML math run by converting it to MathML and injecting a
@@ -710,6 +743,7 @@ function renderMathRun(run, doc) {
 		host.style.verticalAlign = "middle";
 	}
 	host.style.fontFamily = "\"Cambria Math\", \"Latin Modern Math\", \"STIX Two Math\", serif";
+	applyHorizontalScaleTransform(host, run.horizontalScale);
 	try {
 		host.innerHTML = mathml;
 	} catch {
@@ -731,6 +765,7 @@ function renderMathFallback(run, doc, fallbackText, errorFlag) {
 	}
 	span.style.fontStyle = "italic";
 	span.style.fontFamily = "\"Cambria Math\", \"Latin Modern Math\", \"STIX Two Math\", serif";
+	applyHorizontalScaleTransform(span, run.horizontalScale);
 	span.textContent = fallbackText;
 	applyPmPositions(span, run.pmStart, run.pmEnd);
 	return span;
@@ -743,7 +778,7 @@ function renderRun(run, doc, context) {
 	if (isTabRun(run)) return renderTabRun(run, doc, 48);
 	if (isImageRun(run)) return renderImageRun(run, doc);
 	if (isLineBreakRun(run)) return renderLineBreakRun(run, doc);
-	if (isFieldRun(run) && context) return renderFieldRun(run, doc, context);
+	if (isFieldRun(run) && context) return renderFieldRun(run, doc, { context });
 	if (isMathRun(run)) return renderMathRun(run, doc);
 	if (run.kind === "renderedPageBreak") {
 		const span = doc.createElement("span");
@@ -793,10 +828,18 @@ function sliceRunsForLine(block, line) {
 * The font a script segment paints with, mirroring the measurer's
 * `scriptFontFamily`. Returning undefined leaves the run's own `fontFamily`.
 */
-const scriptFormattingOverride = (run, script) => {
-	if (run.forceComplexScript || script === SCRIPT_CLASS.complex) return resolveComplexScriptFormatting(run);
-	if (script === SCRIPT_CLASS.eastAsia && run.eastAsiaFontFamily !== void 0) return { fontFamily: run.eastAsiaFontFamily };
-	return {};
+const formatTextRunForScript = (run, script) => {
+	if (run.forceComplexScript || script === SCRIPT_CLASS.complex) return applyComplexScriptFormatting(run, run);
+	if (script === SCRIPT_CLASS.eastAsia && run.eastAsiaFontFamily !== void 0) {
+		const result = {
+			...run,
+			fontFamily: run.eastAsiaFontFamily
+		};
+		delete result.alternateFontFamily;
+		if (run.eastAsiaAlternateFontFamily !== void 0) result.alternateFontFamily = run.eastAsiaAlternateFontFamily;
+		return result;
+	}
+	return run;
 };
 /**
 * Whether a run needs per-script sibling spans: it carries a script-specific
@@ -822,10 +865,7 @@ function splitTextRunsByEastAsia(runs) {
 	const result = [];
 	for (const run of runs) {
 		if (isTextRun(run) && run.forceComplexScript && hasComplexScriptFormatting(run)) {
-			result.push({
-				...run,
-				...resolveComplexScriptFormatting(run)
-			});
+			result.push(applyComplexScriptFormatting(run, run));
 			continue;
 		}
 		if (!isTextRun(run) || !needsPerScriptSpans(run)) {
@@ -834,15 +874,14 @@ function splitTextRunsByEastAsia(runs) {
 		}
 		let offset = 0;
 		for (const segment of segmentByScript(run.text)) {
-			result.push({
+			result.push(formatTextRunForScript({
 				...run,
 				text: segment.text,
-				...scriptFormattingOverride(run, segment.script),
 				...run.pmStart !== void 0 ? {
 					pmStart: run.pmStart + offset,
 					pmEnd: run.pmStart + offset + segment.text.length
 				} : {}
-			});
+			}, segment.script));
 			offset += segment.text.length;
 		}
 	}
@@ -926,10 +965,19 @@ const startsAfterSoftWrap = (block, line) => {
 const RIGHT_EDGE_EPSILON_PX = .5;
 function countShrinkableSpaces(runs, context) {
 	let count = 0;
-	for (const run of runs) if (isTextRun(run)) count += countCompressibleSpaces(run.text ?? "");
-	else if (isFieldRun(run)) count += countCompressibleSpaces(resolveFieldText(run, context));
+	for (const run of runs) if (isTextRun(run)) {
+		if (getHorizontalScaleFactor(run.horizontalScale) === 0) continue;
+		count += countCompressibleSpaces(run.text ?? "");
+	} else if (isFieldRun(run)) {
+		if (getHorizontalScaleFactor(run.horizontalScale) === 0) continue;
+		count += countCompressibleSpaces(resolveFieldText(run, context));
+	}
 	return count;
 }
+function runVisualSpaceContraction({ text, horizontalScale, visualSpaceContractionPx }) {
+	if (visualSpaceContractionPx === void 0 || getHorizontalScaleFactor(horizontalScale) === 0) return 0;
+	return countCompressibleSpaces(text) * visualSpaceContractionPx;
+}
 /**
 * Build the shared measurement style from a paintable text run.
 */
@@ -939,8 +987,11 @@ function runMeasureStyle(run) {
 		...run.italic !== void 0 ? { italic: run.italic } : {},
 		...run.letterSpacing !== void 0 ? { letterSpacing: run.letterSpacing } : {},
 		...run.smallCaps !== void 0 ? { smallCaps: run.smallCaps } : {},
+		...run.alternateFontFamily !== void 0 ? { alternateFontFamily: run.alternateFontFamily } : {},
 		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {},
+		...run.eastAsiaAlternateFontFamily !== void 0 ? { eastAsiaAlternateFontFamily: run.eastAsiaAlternateFontFamily } : {},
 		...run.complexScriptFontFamily !== void 0 ? { complexScriptFontFamily: run.complexScriptFontFamily } : {},
+		...run.complexScriptAlternateFontFamily !== void 0 ? { complexScriptAlternateFontFamily: run.complexScriptAlternateFontFamily } : {},
 		...run.complexScriptFontSize !== void 0 ? { complexScriptFontSize: run.complexScriptFontSize } : {},
 		...run.complexScriptBold !== void 0 ? { complexScriptBold: run.complexScriptBold } : {},
 		...run.complexScriptItalic !== void 0 ? { complexScriptItalic: run.complexScriptItalic } : {},
@@ -960,15 +1011,14 @@ function measureFollowingContentWidth(runs, tabRunIndex, measureText, context) {
 	for (let i = tabRunIndex + 1; i < runs.length; i++) {
 		const run = runs[i];
 		if (isTabRun(run) || isLineBreakRun(run)) break;
-		const scale = run.horizontalScale ?? 100;
 		if (isTextRun(run)) {
 			const text = run.allCaps ? run.text.toLocaleUpperCase() : run.text;
-			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * (scale / 100);
+			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 		} else if (isFieldRun(run)) {
 			const fieldText = resolveFieldText(run, context);
-			width += measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * (scale / 100);
+			width += measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 		} else if (isImageRun(run) && !isFloatingImageRun(run)) width += inlineImageBoundingBox(run).width || 0;
-		else if (isMathRun(run)) width += measureText(run.plainText, run.fontSize ?? 11, run.fontFamily ?? "Cambria Math", runMeasureStyle(run)) * (scale / 100);
+		else if (isMathRun(run)) width += measureText(run.plainText, run.fontSize ?? 11, run.fontFamily ?? "Cambria Math", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 	}
 	return width;
 }
@@ -995,8 +1045,8 @@ function measureDecimalPrefixWidth(runs, tabRunIndex, decimalIndex, measureText,
 		else runText = run.allCaps ? run.text.toLocaleUpperCase() : run.text;
 		const take = Math.min(runText.length, decimalIndex - consumed);
 		if (take > 0) {
-			const scale = run.horizontalScale ?? 100;
-			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * (scale / 100);
+			const horizontalScaleFactor = getHorizontalScaleFactor(run.horizontalScale);
+			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * horizontalScaleFactor;
 		}
 		consumed += runText.length;
 	}
@@ -1051,17 +1101,17 @@ function createTextMeasurer(doc) {
 	return (text, fontSize = 11, fontFamily = "Calibri", style = {}) => {
 		if (!ctx) return applyLetterSpacingToMeasuredWidth(text.length * 7, text, style.letterSpacing);
 		ctx.fontKerning = getFontKerningMode(style);
-		const fontString = (family, size, bold, italic) => {
+		const fontString = (family, size, bold, italic, alternateFamily) => {
 			const fontPrefixParts = [];
 			if (italic) fontPrefixParts.push("italic");
 			if (style.smallCaps) fontPrefixParts.push("small-caps");
 			if (bold) fontPrefixParts.push("700");
 			fontPrefixParts.push(`${size * 96 / 72}px`);
-			return `${fontPrefixParts.join(" ")} ${resolveFontFamily(family).cssFallback}`;
+			return `${fontPrefixParts.join(" ")} ${resolveFontFamily(family, alternateFamily).cssFallback}`;
 		};
-		const baseFont = fontString(fontFamily, fontSize, style.bold, style.italic);
+		const baseFont = fontString(fontFamily, fontSize, style.bold, style.italic, style.alternateFontFamily);
 		const complex = resolveComplexScriptFormatting(style);
-		const complexFont = fontString(complex.fontFamily ?? fontFamily, complex.fontSize ?? fontSize, complex.bold ?? style.bold, complex.italic ?? style.italic);
+		const complexFont = fontString(complex.fontFamily ?? fontFamily, complex.fontSize ?? fontSize, complex.bold ?? style.bold, complex.italic ?? style.italic, complex.alternateFontFamily ?? style.alternateFontFamily);
 		if (style.forceComplexScript) {
 			ctx.font = complexFont;
 			return applyLetterSpacingToMeasuredWidth(ctx.measureText(text).width, text, style.letterSpacing);
@@ -1069,7 +1119,7 @@ function createTextMeasurer(doc) {
 		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasCjk(text) || hasComplexScriptFormatting(style) && hasComplexScript(text))) {
 			let segmentedWidth = 0;
 			for (const segment of segmentByScript(text)) {
-				if (segment.script === SCRIPT_CLASS.eastAsia && style.eastAsiaFontFamily) ctx.font = fontString(style.eastAsiaFontFamily, fontSize, style.bold, style.italic);
+				if (segment.script === SCRIPT_CLASS.eastAsia && style.eastAsiaFontFamily) ctx.font = fontString(style.eastAsiaFontFamily, fontSize, style.bold, style.italic, style.eastAsiaAlternateFontFamily);
 				else if (segment.script === SCRIPT_CLASS.complex) ctx.font = complexFont;
 				else ctx.font = baseFont;
 				segmentedWidth += ctx.measureText(segment.text).width;
@@ -1114,12 +1164,17 @@ function renderLine(block, line, alignment, doc, options) {
 		if (lineEl.style.display === "flex") return [runEl];
 		return withCursiveJoiners(runEl, run, cursiveJoinerPlan, applyJoinerRunStyles, doc);
 	};
+	let visualSpaceContractionPx;
 	const renderLineTextRun = (run) => {
-		const runEl = renderTextRun(run, doc, run.hyperlink && options?.leftToRightDisplayedUrlHyperlinks?.has(run.hyperlink) ? LEFT_TO_RIGHT_DIRECTION : void 0);
+		const hyperlinkDirection = run.hyperlink && options?.leftToRightDisplayedUrlHyperlinks?.has(run.hyperlink) ? LEFT_TO_RIGHT_DIRECTION : void 0;
+		const runEl = renderTextRun(run, doc, {
+			...hyperlinkDirection !== void 0 ? { hyperlinkDirection } : {},
+			...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {}
+		});
 		if (collapsedLeadingSpaceRuns.has(run)) runEl.dataset["collapsedLeadingSpaces"] = "true";
 		if (collapsedTrailingSpaceRuns.has(run)) runEl.dataset["collapsedTrailingSpaces"] = "true";
 		if (isCollapsedLineEdgeSpaceRun(run)) {
-			const spaceAdvance = (collapsedSpaceMeasureText?.(" ", run.fontSize || 11, run.fontFamily || "Calibri", runMeasureStyle(run)) ?? 0) * ((run.horizontalScale ?? 100) / 100);
+			const spaceAdvance = (collapsedSpaceMeasureText?.(" ", run.fontSize || 11, run.fontFamily || "Calibri", runMeasureStyle(run)) ?? 0) * getHorizontalScaleFactor(run.horizontalScale);
 			runEl.dataset["collapsedSpaceAdvance"] = String(spaceAdvance);
 			runEl.style.fontSize = "0";
 			runEl.style.letterSpacing = "0";
@@ -1155,19 +1210,24 @@ function renderLine(block, line, alignment, doc, options) {
 	}
 	const hasTabRuns = runsForLine.some(isTabRun);
 	if (alignment === "justify" && options) {
-		if (!options.isLastLine || options.paragraphEndsWithLineBreak) {
-			const firstLineIndentPx = options.isFirstLine ? options.firstLineIndentPx ?? 0 : 0;
-			const firstLinePositiveIndentPx = Math.max(0, firstLineIndentPx);
-			const firstLineHangingPx = Math.max(0, -firstLineIndentPx);
-			const hasVisibleListMarker = options.isFirstLine && block.attrs?.listMarker && !block.attrs.listMarkerHidden;
-			const firstLineHangingExpansionPx = hasVisibleListMarker ? Math.min(firstLineHangingPx, Math.max(0, options.leftIndentPx ?? 0)) : firstLineHangingPx;
-			const justifyCapacityPx = options.availableWidth - firstLinePositiveIndentPx + firstLineHangingExpansionPx;
-			const overfullPx = line.width - justifyCapacityPx;
-			const shrinkableSpaces = countShrinkableSpaces(runsForLine.filter((run) => !isTextRun(run) || !isCollapsedLineEdgeSpaceRun(run)), options.context);
-			if (overfullPx > RIGHT_EDGE_EPSILON_PX && shrinkableSpaces > 0) {
+		const firstLineIndentPx = options.isFirstLine ? options.firstLineIndentPx ?? 0 : 0;
+		const firstLinePositiveIndentPx = Math.max(0, firstLineIndentPx);
+		const firstLineHangingPx = Math.max(0, -firstLineIndentPx);
+		const hasVisibleListMarker = options.isFirstLine && block.attrs?.listMarker && !block.attrs.listMarkerHidden;
+		const firstLineHangingExpansionPx = hasVisibleListMarker ? Math.min(firstLineHangingPx, Math.max(0, options.leftIndentPx ?? 0)) : firstLineHangingPx;
+		const justifyCapacityPx = options.availableWidth - firstLinePositiveIndentPx + firstLineHangingExpansionPx;
+		const overfullPx = line.width - justifyCapacityPx;
+		const shrinkableSpaces = countShrinkableSpaces(runsForLine.filter((run) => !isTextRun(run) || !isCollapsedLineEdgeSpaceRun(run)), options.context);
+		const shouldJustify = !options.isLastLine || options.paragraphEndsWithLineBreak;
+		const finalContractionPx = line.justificationPaint?.type === "space-contraction" ? line.justificationPaint.contractionPx : void 0;
+		const shouldCompressFinalLine = options.isLastLine && finalContractionPx !== void 0 && finalContractionPx > RIGHT_EDGE_EPSILON_PX && overfullPx > RIGHT_EDGE_EPSILON_PX && shrinkableSpaces > 0;
+		if (shouldJustify || shouldCompressFinalLine) {
+			const contractionPx = shouldCompressFinalLine ? finalContractionPx : overfullPx;
+			if (contractionPx > RIGHT_EDGE_EPSILON_PX && shrinkableSpaces > 0) {
 				lineEl.style.textAlign = "left";
 				lineEl.style.textAlignLast = "auto";
-				lineEl.style.wordSpacing = `${-overfullPx / shrinkableSpaces}px`;
+				visualSpaceContractionPx = contractionPx / shrinkableSpaces;
+				lineEl.style.wordSpacing = "0";
 			} else if (hasTabRuns && shrinkableSpaces > 0 && -overfullPx > RIGHT_EDGE_EPSILON_PX) {
 				lineEl.style.textAlign = "left";
 				lineEl.style.textAlignLast = "auto";
@@ -1183,7 +1243,7 @@ function renderLine(block, line, alignment, doc, options) {
 	lineEl.style.whiteSpace = "pre";
 	lineEl.style.overflow = "visible";
 	let tabContext;
-	const hasScaledTextRun = runsForLine.some((run) => (isTextRun(run) || isFieldRun(run) || isMathRun(run)) && run.horizontalScale !== void 0 && run.horizontalScale !== 100);
+	const hasScaledTextRun = runsForLine.some((run) => (isTextRun(run) || isFieldRun(run) || isMathRun(run)) && getHorizontalScaleFactor(run.horizontalScale) !== 1);
 	const measureText = collapsedSpaceMeasureText ?? (hasTabRuns || hasScaledTextRun ? createTextMeasurer(doc) : void 0);
 	if (hasTabRuns) {
 		const explicitStops = options?.tabStops?.map(convertTabStopToCalc);
@@ -1244,7 +1304,10 @@ function renderLine(block, line, alignment, doc, options) {
 					const next = runsForLine[j];
 					if (isTabRun(next) || isLineBreakRun(next)) break;
 					if (isTextRun(next)) lineEl.append(...withJoiners(renderLineTextRun(next), next));
-					else if (isFieldRun(next) && options?.context) lineEl.append(renderFieldRun(next, doc, options.context));
+					else if (isFieldRun(next) && options?.context) lineEl.append(renderFieldRun(next, doc, {
+						context: options.context,
+						...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {}
+					}));
 					else if (isImageRun(next)) {
 						if (isFloatingImageRun(next)) continue;
 						const imageKey = getInlineImageRunKey(next);
@@ -1272,8 +1335,17 @@ function renderLine(block, line, alignment, doc, options) {
 			const fontSize = run.fontSize || 11;
 			const fontFamily = run.fontFamily || "Calibri";
 			const measuredWidth = measureText(run.allCaps ? run.text.toLocaleUpperCase() : run.text, fontSize, fontFamily, runMeasureStyle(run));
-			reserveScaledAdvance(runEl, measuredWidth, run.horizontalScale);
-			currentX += measuredWidth * ((run.horizontalScale ?? 100) / 100);
+			const runContractionPx = runVisualSpaceContraction({
+				text: run.text,
+				...run.horizontalScale !== void 0 ? { horizontalScale: run.horizontalScale } : {},
+				...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {}
+			});
+			currentX += reserveScaledAdvance({
+				element: runEl,
+				unscaledWidth: measuredWidth,
+				...run.horizontalScale !== void 0 ? { horizontalScale: run.horizontalScale } : {},
+				...runContractionPx > 0 ? { visualSpaceContractionPx: runContractionPx } : {}
+			});
 		} else if (isImageRun(run)) {
 			if (isFloatingImageRun(run)) continue;
 			const imageKey = getInlineImageRunKey(run);
@@ -1286,22 +1358,37 @@ function renderLine(block, line, alignment, doc, options) {
 			const runEl = renderLineBreakRun(run, doc);
 			lineEl.append(runEl);
 		} else if (isFieldRun(run) && options?.context) {
-			const runEl = renderFieldRun(run, doc, options.context);
+			const runEl = renderFieldRun(run, doc, {
+				context: options.context,
+				...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {}
+			});
 			lineEl.append(runEl);
 			if (!measureText) continue;
 			const fieldText = resolveFieldText(run, options.context);
 			const fontSize = run.fontSize || 11;
 			const fontFamily = run.fontFamily || "Calibri";
 			const measuredWidth = measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, fontSize, fontFamily, runMeasureStyle(run));
-			reserveScaledAdvance(runEl, measuredWidth, run.horizontalScale);
-			currentX += measuredWidth * ((run.horizontalScale ?? 100) / 100);
+			const runContractionPx = runVisualSpaceContraction({
+				text: fieldText,
+				...run.horizontalScale !== void 0 ? { horizontalScale: run.horizontalScale } : {},
+				...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {}
+			});
+			currentX += reserveScaledAdvance({
+				element: runEl,
+				unscaledWidth: measuredWidth,
+				...run.horizontalScale !== void 0 ? { horizontalScale: run.horizontalScale } : {},
+				...runContractionPx > 0 ? { visualSpaceContractionPx: runContractionPx } : {}
+			});
 		} else if (isMathRun(run)) {
 			const runEl = renderMathRun(run, doc);
 			lineEl.append(runEl);
 			if (!measureText) continue;
 			const measuredWidth = measureText(run.plainText, run.fontSize ?? 11, run.fontFamily ?? "Cambria Math", runMeasureStyle(run));
-			reserveScaledAdvance(runEl, measuredWidth, run.horizontalScale);
-			currentX += measuredWidth * ((run.horizontalScale ?? 100) / 100);
+			currentX += reserveScaledAdvance({
+				element: runEl,
+				unscaledWidth: measuredWidth,
+				...run.horizontalScale !== void 0 ? { horizontalScale: run.horizontalScale } : {}
+			});
 		} else {
 			const runEl = renderRun(run, doc, options?.context);
 			lineEl.append(runEl);
@@ -1534,7 +1621,7 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	const span = doc.createElement("span");
 	span.className = "layout-list-marker";
 	span.style.display = "inline-block";
-	span.style.fontFamily = resolveFontFamily(formatting.fontFamily).cssFallback;
+	span.style.fontFamily = resolveFontFamily(formatting.fontFamily, formatting.alternateFontFamily).cssFallback;
 	if (formatting.fontSize) span.style.fontSize = `${formatting.fontSize * 96 / 72}px`;
 	if (formatting.bold !== void 0) span.style.fontWeight = formatting.bold ? "700" : "normal";
 	if (formatting.italic !== void 0) span.style.fontStyle = formatting.italic ? "italic" : "normal";

package/dist/layout-painter/renderTable.d.ts

@@ -25,7 +25,7 @@ type RenderTableFragmentOptions = {
 /**
  * Render a nested table (within a cell)
  */
-declare function renderNestedTable(block: TableBlock, measure: TableMeasure, context: RenderContext, doc: Document): HTMLElement;
+declare function renderNestedTable(block: TableBlock, measure: TableMeasure, context: RenderContext, doc: Document, frameWidth?: number): HTMLElement;
 /**
  * Render a table fragment to DOM
  *