@stll/folio-core 0.62.0 → 0.63.1

package/dist/layout-painter/renderParagraph.js

@@ -1,10 +1,11 @@
 import { ommlToMathml } from "../docx/mathToMathml.js";
 import { parseXmlDocument } from "../docx/xmlParser.js";
 import { evaluateFieldInstruction } from "../fields/evaluateField.js";
+import { automaticRunGap, automaticTextSpacingGaps } from "../layout-engine/measure/automaticTextSpacing.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 { DEFAULT_FONT_FAMILY, docxScriptFontSize } from "../layout-engine/measure/measureHelpers.js";
+import { DEFAULT_FONT_FAMILY, buildRunFontStyle, docxScriptFontSize } from "../layout-engine/measure/measureHelpers.js";
 import { SMALL_CAPS_SCALE, smallCapsSegments } from "../layout-engine/measure/smallCapsCasing.js";
 import { calculateTabWidth } from "../layout-engine/measure/tabCalculator.js";
 import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode, toPaintedText } from "../layout-engine/measure/textMeasurementPolicy.js";
@@ -15,18 +16,20 @@ import { resolveFontFamily } from "../utils/fontResolver.js";
 import "../utils/fontWeights.js";
 import { underlineDecorationCss } from "../utils/formatToStyle.js";
 import { getHorizontalScaleFactor } from "../utils/horizontalScale.js";
-import { resolvePhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
+import { getParagraphFrame } from "../utils/paragraphFrame.js";
+import { inlinePictureClipInsets, resolveParagraphLineGeometryForBlock, resolvePhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { sanitizeImageSrc } from "../utils/sanitizeImageSrc.js";
-import { SCRIPT_CLASS, eastAsiaHintApplies, hasComplexScript, hasEastAsiaSlotText, segmentByScript } from "../utils/scriptSegments.js";
+import { SCRIPT_CLASS, eastAsiaHintApplies, hasComplexScript, hasDistinctHAnsiFont, hasEastAsiaSlotText, hasHAnsiSlotText, segmentByScript } from "../utils/scriptSegments.js";
+import { applyTextAdvanceGaps } from "../utils/textAdvanceGapsDom.js";
 import { trailingSpaceStart } from "../utils/trailingText.js";
 import { anchorTargetAttrs, sanitizeExternalUrl } from "../utils/urlSecurity.js";
 import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
 import { planCursiveJoiners, withCursiveJoiners } from "./cursiveJoiners.js";
 import { getAutomaticTextColorForBackground, setAuthoredBackgroundColor, setAuthoredTextColor } from "./documentColors.js";
 import { applyImageBorder, applyImageColorAttrs, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
-import { resolveImageLineAlign } from "./renderUtils.js";
 import { applySdtDataAttrs } from "./sdtBoundary.js";
+import { panic } from "better-result";
 //#region src/layout-painter/renderParagraph.ts
 /**
 * Paragraph Fragment Renderer
@@ -192,7 +195,8 @@ const UNICODE_BIDI_BY_WRAPPER_CONTROL = {
 function applyRunStyles(element, run) {
 	if (run.fontFamily) element.style.fontFamily = resolveFontFamily(run.fontFamily, {
 		alternateFontName: run.alternateFontFamily,
-		embeddedFontFamilyMap: run.embeddedFontFamilyMap
+		embeddedFontFamilyMap: run.embeddedFontFamilyMap,
+		documentFontFacts: run.documentFontFacts
 	}).cssFallback;
 	if (run.fontSize) element.style.fontSize = `${fontSizePtToPx(run.fontSize)}px`;
 	if (run.bold) element.style.fontWeight = "700";
@@ -252,7 +256,11 @@ function applyRunStyles(element, run) {
 	if (run.underline) {
 		const authored = typeof run.underline === "object" ? run.underline.style : void 0;
 		const underline = authored === void 0 ? void 0 : underlineDecorationCss(authored);
-		if ((underline === void 0 || underline.decorationStyle !== void 0) && !isNoteReferenceRun(run)) decorations.push("underline");
+		if ((underline === void 0 || underline.decorationStyle !== void 0) && !isNoteReferenceRun(run)) {
+			decorations.push("underline");
+			element.style.setProperty("text-decoration-skip-ink", "none");
+			element.style.setProperty("text-decoration-skip-spaces", "none");
+		}
 		if (underline?.decorationStyle !== void 0) {
 			element.style.textDecorationStyle = underline.decorationStyle;
 			explicitDecorationStyle = true;
@@ -448,6 +456,12 @@ function renderTextRun(run, doc, options) {
 		...contractedWordSpacing !== void 0 ? { contractedWordSpacing } : {},
 		...smallCapsFontSizePx !== void 0 ? { smallCapsFontSizePx } : {}
 	});
+	const gaps = automaticTextSpacingGaps(paintedText, buildRunFontStyle(run, DEFAULT_FONT_FAMILY, 11));
+	if ((options?.trailingAutomaticSpacingPx ?? 0) > 0) gaps.push({
+		offset: paintedText.length,
+		advancePx: options?.trailingAutomaticSpacingPx ?? 0
+	});
+	applyTextAdvanceGaps(span, gaps);
 	applyWhitespaceUnderline(span, run);
 	return span;
 }
@@ -543,10 +557,7 @@ function getLeaderChar(leader) {
 		default: return null;
 	}
 }
-/**
-* Render an inline image run (flows with text)
-*/
-function renderInlineImageRun(run, doc) {
+function renderInlineImageRun({ run, doc, sizing }) {
 	const img = doc.createElement("img");
 	img.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.image}`;
 	applyImageRunSource(img, run.src);
@@ -597,7 +608,7 @@ function renderInlineImageRun(run, doc) {
 	if (hasImageVisualAttrs(run)) applyImageVisualAttrs(img, run);
 	img.style.display = "inline";
 	img.style.verticalAlign = "middle";
-	if (run.width > 0 && run.height > 0) {
+	if (run.width > 0 && run.height > 0 && sizing === "textColumnFit") {
 		img.style.height = "auto";
 		img.style.aspectRatio = `${run.width} / ${run.height}`;
 		img.style.maxWidth = "100%";
@@ -663,15 +674,36 @@ function renderBlockImage(run, doc) {
 	container.append(img);
 	return container;
 }
-/**
-* Render an image run based on its display mode
-* Note: Floating images (square/tight/through) are handled separately at paragraph level,
-* not through this function. If they reach here, render as block.
-*/
-function renderImageRun(run, doc) {
+const clipInlineImageToViewport = ({ content, doc, insets }) => {
+	if (insets.left === 0 && insets.right === 0) return content;
+	const wrapper = doc.createElement("span");
+	wrapper.className = PARAGRAPH_CLASS_NAMES.run;
+	wrapper.style.display = "inline-block";
+	wrapper.style.verticalAlign = "middle";
+	wrapper.style.clipPath = `inset(0px ${insets.right}px 0px ${insets.left}px)`;
+	wrapper.append(content);
+	return wrapper;
+};
+const inlinePictureSizingForParagraph = (block, context) => getParagraphFrame(block) === void 0 ? context?.inlinePictureSizing ?? "textColumnFit" : "textColumnFit";
+function renderImageRun({ run, doc, context, sizing, imageLeft }) {
 	let el;
 	if (isFloatingImageRun(run) || run.displayMode === "block" || run.wrapType === "topAndBottom") el = renderBlockImage(run, doc);
-	else el = renderInlineImageRun(run, doc);
+	else {
+		el = renderInlineImageRun({
+			run,
+			doc,
+			sizing
+		});
+		if (context?.inlinePictureViewport !== void 0) el = clipInlineImageToViewport({
+			content: el,
+			doc,
+			insets: inlinePictureClipInsets({
+				pictureLeft: imageLeft,
+				pictureWidth: inlineImageBoundingBox(run).width,
+				viewport: context.inlinePictureViewport
+			})
+		});
+	}
 	applyImageRevisionStyle(getImageRevisionStyleTarget(el), run);
 	return el;
 }
@@ -765,7 +797,10 @@ function renderFieldRun(run, doc, { context, visualSpaceContractionPx }) {
 		const horizontalScaleFactor = getHorizontalScaleFactor(resolvedRun.horizontalScale);
 		applyHorizontalScaleTransform(wrapper, resolvedRun.horizontalScale);
 		const { pmStart: _pmStart, pmEnd: _pmEnd, horizontalScale: _horizontalScale, ...segmentBase } = resolvedRun;
-		for (const segment of segmentByScript(text, eastAsiaHintApplies(resolvedRun))) {
+		for (const segment of segmentByScript(text, {
+			eastAsiaHint: eastAsiaHintApplies(resolvedRun),
+			hasHAnsiFont: hasDistinctHAnsiFont(resolvedRun)
+		})) {
 			const segmentRun = formatTextRunForScript({
 				...segmentBase,
 				text: segment.text
@@ -806,6 +841,7 @@ function renderMathRun(run, doc) {
 		host.style.verticalAlign = "middle";
 	}
 	host.style.fontFamily = "\"Cambria Math\", \"Latin Modern Math\", \"STIX Two Math\", serif";
+	applyMathFontSize(host, run);
 	applyHorizontalScaleTransform(host, run.horizontalScale);
 	try {
 		host.innerHTML = mathml;
@@ -828,18 +864,25 @@ function renderMathFallback(run, doc, fallbackText, errorFlag) {
 	}
 	span.style.fontStyle = "italic";
 	span.style.fontFamily = "\"Cambria Math\", \"Latin Modern Math\", \"STIX Two Math\", serif";
+	applyMathFontSize(span, run);
 	applyHorizontalScaleTransform(span, run.horizontalScale);
 	span.textContent = fallbackText;
 	applyPmPositions(span, run.pmStart, run.pmEnd);
 	return span;
 }
-/**
-* Render a single run (for non-tab runs)
-*/
-function renderRun(run, doc, context) {
+function applyMathFontSize(element, run) {
+	if (run.fontSize !== void 0) element.style.fontSize = `${fontSizePtToPx(run.fontSize)}px`;
+}
+function renderRun({ run, doc, context, sizing, imageLeft }) {
 	if (isTextRun(run)) return renderTextRun(run, doc);
 	if (isTabRun(run)) return renderTabRun(run, doc, 48);
-	if (isImageRun(run)) return renderImageRun(run, doc);
+	if (isImageRun(run)) return renderImageRun({
+		run,
+		doc,
+		...context === void 0 ? {} : { context },
+		sizing,
+		imageLeft
+	});
 	if (isLineBreakRun(run)) return renderLineBreakRun(run, doc);
 	if (isFieldRun(run) && context) return renderFieldRun(run, doc, { context });
 	if (isMathRun(run)) return renderMathRun(run, doc);
@@ -902,6 +945,15 @@ const formatTextRunForScript = (run, script) => {
 		if (run.eastAsiaAlternateFontFamily !== void 0) result.alternateFontFamily = run.eastAsiaAlternateFontFamily;
 		return result;
 	}
+	if (script === SCRIPT_CLASS.hAnsi && run.hAnsiFontFamily !== void 0) {
+		const result = {
+			...run,
+			fontFamily: run.hAnsiFontFamily
+		};
+		delete result.alternateFontFamily;
+		if (run.hAnsiAlternateFontFamily !== void 0) result.alternateFontFamily = run.hAnsiAlternateFontFamily;
+		return result;
+	}
 	return run;
 };
 /**
@@ -913,6 +965,7 @@ const formatTextRunForScript = (run, script) => {
 const needsPerScriptSpans = (run) => {
 	if (run.letterSpacing) return false;
 	if (run.eastAsiaFontFamily !== void 0 && hasEastAsiaSlotText(run.text, eastAsiaHintApplies(run))) return true;
+	if (hasDistinctHAnsiFont(run) && hasHAnsiSlotText(run.text, { eastAsiaHint: eastAsiaHintApplies(run) })) return true;
 	return hasComplexScriptFormatting(run) && hasComplexScript(run.text);
 };
 /**
@@ -936,7 +989,10 @@ function splitTextRunsByEastAsia(runs) {
 			continue;
 		}
 		let offset = 0;
-		for (const segment of segmentByScript(run.text, eastAsiaHintApplies(run))) {
+		for (const segment of segmentByScript(run.text, {
+			eastAsiaHint: eastAsiaHintApplies(run),
+			hasHAnsiFont: hasDistinctHAnsiFont(run)
+		})) {
 			result.push(formatTextRunForScript({
 				...run,
 				text: segment.text,
@@ -1046,7 +1102,9 @@ function runVisualSpaceContraction({ text, horizontalScale, visualSpaceContracti
 */
 function runMeasureStyle(run) {
 	return {
+		...buildRunFontStyle(run, DEFAULT_FONT_FAMILY, 11),
 		...run.embeddedFontFamilyMap ? { embeddedFontFamilyMap: run.embeddedFontFamilyMap } : {},
+		...run.documentFontFacts ? { documentFontFacts: run.documentFontFacts } : {},
 		...run.bold !== void 0 ? { bold: run.bold } : {},
 		...run.italic !== void 0 ? { italic: run.italic } : {},
 		...run.letterSpacing !== void 0 ? { letterSpacing: run.letterSpacing } : {},
@@ -1077,6 +1135,7 @@ function measureFollowingContentWidth(runs, tabRunIndex, measureText, context) {
 		const run = runs[i];
 		if (isTabRun(run) || isLineBreakRun(run)) break;
 		if (isTextRun(run)) {
+			width += automaticRunGap(runs[i - 1], run);
 			const text = run.allCaps ? run.text.toLocaleUpperCase() : run.text;
 			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 		} else if (isFieldRun(run)) {
@@ -1110,6 +1169,7 @@ 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) {
+			width += automaticRunGap(runs[i - 1], run);
 			const horizontalScaleFactor = getHorizontalScaleFactor(run.horizontalScale);
 			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * horizontalScaleFactor;
 		}
@@ -1163,7 +1223,7 @@ function applyLetterSpacingToMeasuredWidth(width, text, letterSpacing) {
 }
 function createTextMeasurer(doc) {
 	const ctx = doc.createElement("canvas").getContext("2d");
-	return (text, fontSize = 11, fontFamily = DEFAULT_FONT_FAMILY, style = {}) => {
+	const naturalWidth = (text, fontSize = 11, fontFamily = DEFAULT_FONT_FAMILY, style = {}) => {
 		if (!ctx) return applyLetterSpacingToMeasuredWidth(text.length * 7, text, style.letterSpacing);
 		ctx.fontKerning = getFontKerningMode(style);
 		const fontString = (family, size, bold, italic, alternateFamily) => {
@@ -1174,7 +1234,8 @@ function createTextMeasurer(doc) {
 			fontPrefixParts.push(`${size * 96 / 72}px`);
 			return `${fontPrefixParts.join(" ")} ${resolveFontFamily(family, {
 				alternateFontName: alternateFamily,
-				embeddedFontFamilyMap: style.embeddedFontFamilyMap
+				embeddedFontFamilyMap: style.embeddedFontFamilyMap,
+				documentFontFacts: style.documentFontFacts
 			}).cssFallback}`;
 		};
 		const baseFont = fontString(fontFamily, fontSize, style.bold, style.italic, style.alternateFontFamily);
@@ -1184,10 +1245,14 @@ function createTextMeasurer(doc) {
 			ctx.font = complexFont;
 			return applyLetterSpacingToMeasuredWidth(ctx.measureText(text).width, text, style.letterSpacing);
 		}
-		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasEastAsiaSlotText(text, style.eastAsiaHint) || hasComplexScriptFormatting(style) && hasComplexScript(text))) {
+		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasEastAsiaSlotText(text, style.eastAsiaHint) || hasDistinctHAnsiFont(style) && hasHAnsiSlotText(text, { eastAsiaHint: style.eastAsiaHint }) || hasComplexScriptFormatting(style) && hasComplexScript(text))) {
 			let segmentedWidth = 0;
-			for (const segment of segmentByScript(text, style.eastAsiaHint)) {
+			for (const segment of segmentByScript(text, {
+				eastAsiaHint: style.eastAsiaHint,
+				hasHAnsiFont: hasDistinctHAnsiFont(style)
+			})) {
 				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.hAnsi && style.hAnsiFontFamily) ctx.font = fontString(style.hAnsiFontFamily, fontSize, style.bold, style.italic, style.hAnsiAlternateFontFamily);
 				else if (segment.script === SCRIPT_CLASS.complex) ctx.font = complexFont;
 				else ctx.font = baseFont;
 				segmentedWidth += ctx.measureText(segment.text).width;
@@ -1197,6 +1262,15 @@ function createTextMeasurer(doc) {
 		ctx.font = baseFont;
 		return applyLetterSpacingToMeasuredWidth(ctx.measureText(text).width, text, style.letterSpacing);
 	};
+	return (text, fontSize = 11, fontFamily = DEFAULT_FONT_FAMILY, style = {}) => {
+		let width = naturalWidth(text, fontSize, fontFamily, style);
+		for (const gap of automaticTextSpacingGaps(text, {
+			...style,
+			fontSize,
+			fontFamily
+		})) width += gap.advancePx;
+		return width;
+	};
 }
 /**
 * Render a single line
@@ -1218,7 +1292,10 @@ function renderLine(block, line, alignment, doc, options) {
 	const splitRuns = splitTextRunsByEastAsia(sliceRunsForLine(block, line));
 	const { runs: runsForLine, collapsedLeadingRuns: collapsedLeadingSpaceRuns, collapsedTrailingRuns: collapsedTrailingSpaceRuns } = splitCollapsibleLineEdgeSpaces(splitRuns, startsAfterSoftWrap(block, line));
 	const isCollapsedLineEdgeSpaceRun = (run) => collapsedLeadingSpaceRuns.has(run) || collapsedTrailingSpaceRuns.has(run);
-	const collapsedSpaceMeasureText = collapsedLeadingSpaceRuns.size > 0 || collapsedTrailingSpaceRuns.size > 0 ? createTextMeasurer(doc) : void 0;
+	const hasCollapsedLineEdgeSpaceRuns = collapsedLeadingSpaceRuns.size > 0 || collapsedTrailingSpaceRuns.size > 0;
+	const trailingAutomaticSpacing = new Map(runsForLine.map((run, index) => [run, automaticRunGap(run, runsForLine.at(index + 1))]));
+	const trailingAutomaticSpacingOf = (run) => trailingAutomaticSpacing.get(run) ?? panic("Missing automatic spacing for a run on this line.");
+	const collapsedSpaceMeasureText = hasCollapsedLineEdgeSpaceRuns ? createTextMeasurer(doc) : void 0;
 	const applyJoinerRunStyles = (element, run) => {
 		if (isTextRun(run) || isTabRun(run)) applyRunStyles(element, run);
 	};
@@ -1236,6 +1313,7 @@ function renderLine(block, line, alignment, doc, options) {
 	const renderLineTextRun = (run) => {
 		const hyperlinkDirection = run.hyperlink && options?.leftToRightDisplayedUrlHyperlinks?.has(run.hyperlink) ? LEFT_TO_RIGHT_DIRECTION : void 0;
 		const runEl = renderTextRun(run, doc, {
+			trailingAutomaticSpacingPx: trailingAutomaticSpacingOf(run),
 			...hyperlinkDirection !== void 0 ? { hyperlinkDirection } : {},
 			...visualSpaceContractionPx !== void 0 ? { visualSpaceContractionPx } : {}
 		});
@@ -1255,7 +1333,7 @@ function renderLine(block, line, alignment, doc, options) {
 	if (runsForLine.length === 1 && isImageRun(runsForLine[0])) {
 		lineEl.style.display = "flex";
 		lineEl.style.alignItems = "center";
-		const imageAlign = resolveImageLineAlign(runsForLine[0], alignment);
+		const imageAlign = alignment;
 		if (imageAlign === "center") lineEl.style.justifyContent = "center";
 		else if (imageAlign === "right") lineEl.style.justifyContent = "flex-end";
 	} else if (runsForLine.some((r) => isImageRun(r) && !isFloatingImageRun(r))) {
@@ -1281,7 +1359,7 @@ function renderLine(block, line, alignment, doc, options) {
 		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 hasVisibleListMarker = options.isFirstLine && block.attrs?.listMarker != null && !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;
@@ -1332,6 +1410,8 @@ function renderLine(block, line, alignment, doc, options) {
 		const markerInlineWidth = getListMarkerInlineWidth(block);
 		currentX = tabLeftIndentPx + firstLineIndentPx + markerInlineWidth + floatingLeftOffsetPx;
 	} else currentX = tabLeftIndentPx + floatingLeftOffsetPx;
+	const imageFlowStartX = currentX;
+	const imageLeftAtCurrentX = () => options?.inlineImageLineStartX === void 0 ? (options?.imageOriginX ?? 0) + currentX : options.inlineImageLineStartX + currentX - imageFlowStartX;
 	for (let i = 0; i < runsForLine.length; i++) {
 		const run = runsForLine[i];
 		if (isTabRun(run) && tabContext && measureText) {
@@ -1385,9 +1465,21 @@ function renderLine(block, line, alignment, doc, options) {
 						const imageKey = getInlineImageRunKey(next);
 						if (!options?.renderedInlineImageKeys?.has(imageKey)) {
 							options?.renderedInlineImageKeys?.add(imageKey);
-							lineEl.append(renderImageRun(next, doc));
+							lineEl.append(renderImageRun({
+								run: next,
+								doc,
+								...options?.context === void 0 ? {} : { context: options.context },
+								sizing: inlinePictureSizingForParagraph(block, options?.context),
+								imageLeft: imageLeftAtCurrentX()
+							}));
 						}
-					} else lineEl.append(renderRun(next, doc, options?.context));
+					} else lineEl.append(renderRun({
+						run: next,
+						doc,
+						...options?.context === void 0 ? {} : { context: options.context },
+						sizing: inlinePictureSizingForParagraph(block, options?.context),
+						imageLeft: imageLeftAtCurrentX()
+					}));
 				}
 				break;
 			}
@@ -1417,12 +1509,19 @@ function renderLine(block, line, alignment, doc, options) {
 				...run.horizontalScale !== void 0 ? { horizontalScale: run.horizontalScale } : {},
 				...runContractionPx > 0 ? { visualSpaceContractionPx: runContractionPx } : {}
 			});
+			currentX += trailingAutomaticSpacingOf(run);
 		} else if (isImageRun(run)) {
 			if (isFloatingImageRun(run)) continue;
 			const imageKey = getInlineImageRunKey(run);
 			if (options?.renderedInlineImageKeys?.has(imageKey)) continue;
 			options?.renderedInlineImageKeys?.add(imageKey);
-			const runEl = renderImageRun(run, doc);
+			const runEl = renderImageRun({
+				run,
+				doc,
+				...options?.context === void 0 ? {} : { context: options.context },
+				sizing: inlinePictureSizingForParagraph(block, options?.context),
+				imageLeft: imageLeftAtCurrentX()
+			});
 			lineEl.append(runEl);
 			if (run.displayMode !== "block" && run.wrapType !== "topAndBottom") currentX += inlineImageBoundingBox(run).width;
 		} else if (isLineBreakRun(run)) {
@@ -1461,7 +1560,13 @@ function renderLine(block, line, alignment, doc, options) {
 				...run.horizontalScale !== void 0 ? { horizontalScale: run.horizontalScale } : {}
 			});
 		} else {
-			const runEl = renderRun(run, doc, options?.context);
+			const runEl = renderRun({
+				run,
+				doc,
+				...options?.context === void 0 ? {} : { context: options.context },
+				sizing: inlinePictureSizingForParagraph(block, options?.context),
+				imageLeft: imageLeftAtCurrentX()
+			});
 			lineEl.append(runEl);
 		}
 	}
@@ -1520,6 +1625,15 @@ const paragraphHasTrackedChanges = (block) => block.reviewIndicator === "change-
 */
 function renderParagraphFragment(fragment, block, measure, context, options = {}) {
 	const doc = options.document ?? document;
+	const renderContext = getParagraphFrame(block) === void 0 ? context : {
+		...context,
+		inlinePictureSizing: "textColumnFit",
+		inlinePictureViewport: {
+			left: fragment.x,
+			right: fragment.x + fragment.width
+		},
+		inlinePictureOriginX: fragment.x
+	};
 	const fragmentEl = doc.createElement("div");
 	fragmentEl.className = PARAGRAPH_CLASS_NAMES.fragment;
 	fragmentEl.style.position = "relative";
@@ -1540,7 +1654,6 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 	let fragmentAlignment = alignment;
 	if (alignment === "justify") fragmentAlignment = isRtl ? "right" : "left";
 	fragmentEl.style.textAlign = fragmentAlignment;
-	const effectiveAlignment = alignment;
 	const indent = block.attrs?.indent;
 	const borders = block.attrs?.borders;
 	if (borders) {
@@ -1601,7 +1714,14 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 		const lineLeftOffset = line.leftOffset ?? 0;
 		const lineRightOffset = line.rightOffset ?? 0;
 		const lineAvailableWidth = availableWidth;
-		const lineEl = renderLine(block, line, effectiveAlignment, doc, {
+		const lineGeometry = resolveParagraphLineGeometryForBlock({
+			fragment,
+			block,
+			line,
+			lineTopYPx: fragment.y + _cumulativeLineY + (line.floatSkipBefore ?? 0),
+			isFirstLine
+		});
+		const lineEl = renderLine(block, line, lineGeometry.alignment, doc, {
 			availableWidth: lineAvailableWidth - lineLeftOffset - lineRightOffset,
 			isLastLine,
 			isFirstLine,
@@ -1613,7 +1733,9 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			isRtl,
 			...inlineLayout.explicitAlignment === void 0 ? {} : { explicitAlignment: inlineLayout.explicitAlignment },
 			contentWidthPx: fragment.width,
-			context,
+			context: renderContext,
+			imageOriginX: renderContext.inlinePictureOriginX ?? fragment.x,
+			inlineImageLineStartX: (renderContext.inlinePictureOriginX ?? fragment.x) + lineGeometry.paintStartXPx - fragment.x,
 			floatingMargins: {
 				leftMargin: lineLeftOffset,
 				rightMargin: lineRightOffset
@@ -1644,7 +1766,7 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			else if (hasFirstLine && !isFlexLine) lineEl.style.textIndent = `${indent.firstLine ?? 0}px`;
 		} else if (indentLeft > 0) lineEl.style.paddingLeft = `${indentLeft}px`;
 		if (indentRight > 0) lineEl.style.paddingRight = `${indentRight}px`;
-		if (isFirstLine && block.attrs?.listMarker && !block.attrs.listMarkerHidden) {
+		if (isFirstLine && block.attrs?.listMarker != null && !block.attrs.listMarkerHidden) {
 			const hanging = indent?.hanging ?? 0;
 			const firstLine = indent?.firstLine ?? 0;
 			const markerPhysicalStart = isRtl ? "right" : "left";
@@ -1665,8 +1787,10 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 				physicalStart: markerPhysicalStart
 			});
 			const markerMarginLeft = markerStart - (markerPhysicalStart === "right" ? Math.min(indentRight, 0) : Math.min(indentLeft, 0));
-			if (markerMarginLeft < 0) if (markerPhysicalStart === "right") marker.style.marginRight = `${markerMarginLeft}px`;
-			else marker.style.marginLeft = `${markerMarginLeft}px`;
+			if (markerMarginLeft < 0) {
+				if (markerPhysicalStart === "right") marker.style.marginRight = `${markerMarginLeft}px`;
+				else marker.style.marginLeft = `${markerMarginLeft}px`;
+			}
 			lineEl.prepend(marker);
 		}
 		fragmentEl.append(lineEl);
@@ -1679,12 +1803,28 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	span.style.display = "inline-block";
 	span.style.fontFamily = resolveFontFamily(formatting.fontFamily, {
 		alternateFontName: formatting.alternateFontFamily,
-		embeddedFontFamilyMap: formatting.embeddedFontFamilyMap
+		embeddedFontFamilyMap: formatting.embeddedFontFamilyMap,
+		documentFontFacts: formatting.documentFontFacts
 	}).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";
 	if (formatting.rtl !== void 0) span.dir = formatting.rtl ? "rtl" : "ltr";
+	const appendMarkerText = (container, text) => {
+		if (!hasDistinctHAnsiFont(formatting)) {
+			container.textContent = text;
+			return;
+		}
+		for (const segment of segmentByScript(text, { hasHAnsiFont: true })) {
+			const part = doc.createElement("span");
+			if (segment.script === SCRIPT_CLASS.hAnsi) part.style.fontFamily = resolveFontFamily(formatting.hAnsiFontFamily ?? formatting.fontFamily, {
+				alternateFontName: formatting.hAnsiAlternateFontFamily,
+				embeddedFontFamilyMap: formatting.embeddedFontFamilyMap
+			}).cssFallback;
+			part.textContent = segment.text;
+			container.append(part);
+		}
+	};
 	const markerColor = revision ? void 0 : getRenderableListMarkerColor(formatting.color);
 	if (markerColor) setAuthoredTextColor(span.style, markerColor);
 	span.style.textAlign = physicalStart;
@@ -1715,10 +1855,10 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	const tabIdx = marker.indexOf("	");
 	if (tabIdx !== -1 && secondSlotOffsetTwips !== void 0) {
 		const firstSlot = doc.createElement("span");
-		firstSlot.textContent = marker.slice(0, tabIdx);
+		appendMarkerText(firstSlot, marker.slice(0, tabIdx));
 		firstSlot.style.display = "inline-block";
 		const secondSlot = doc.createElement("span");
-		secondSlot.textContent = marker.slice(tabIdx + 1);
+		appendMarkerText(secondSlot, marker.slice(tabIdx + 1));
 		secondSlot.style.display = "inline-block";
 		span.style.position = "relative";
 		secondSlot.style.position = "absolute";
@@ -1728,7 +1868,7 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 		span.append(firstSlot, secondSlot);
 		return span;
 	}
-	span.textContent = marker;
+	appendMarkerText(span, marker);
 	return span;
 }
 //#endregion

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

@@ -1,12 +1,12 @@
 import { TableBlock, TableFragment, TableMeasure } from "../layout-engine/types.js";
-import { RenderContext } from "./renderUtils.js";
 import { PageGeometry } from "./anchoredImagePosition.js";
+import { RenderContext } from "./renderUtils.js";
 import { TextDirection } from "@stll/docx-core/model";
 //#region src/layout-painter/renderTable.d.ts
 /**
  * CSS class names for table elements
  */
-declare const TABLE_CLASS_NAMES: {
+export declare const TABLE_CLASS_NAMES: {
   table: string;
   row: string;
   cell: string;
@@ -17,18 +17,18 @@ declare const TABLE_CLASS_NAMES: {
   tableEdgeHandleRight: string;
 };
 /** The quarter turn a cell's `w:textDirection` puts on its content. */
-declare const cellTextRotationDegrees: (direction: TextDirection | undefined) => number;
+export declare const cellTextRotationDegrees: (direction: TextDirection | undefined) => number;
 /**
  * Options for rendering a table fragment
  */
-type RenderTableFragmentOptions = {
+export type RenderTableFragmentOptions = {
   document?: Document;
   pageGeometry?: PageGeometry;
 };
 /**
  * Render a nested table (within a cell)
  */
-declare function renderNestedTable(block: TableBlock, measure: TableMeasure, context: RenderContext, doc: Document, frameWidth?: number): HTMLElement;
+export declare function renderNestedTable(block: TableBlock, measure: TableMeasure, context: RenderContext, doc: Document, frameWidth?: number): HTMLElement;
 /**
  * Render a table fragment to DOM
  *
@@ -39,6 +39,5 @@ declare function renderNestedTable(block: TableBlock, measure: TableMeasure, con
  * @param options - Rendering options
  * @returns The table DOM element
  */
-declare function renderTableFragment(fragment: TableFragment, block: TableBlock, measure: TableMeasure, context: RenderContext, options?: RenderTableFragmentOptions): HTMLElement;
-//#endregion
-export { RenderTableFragmentOptions, TABLE_CLASS_NAMES, cellTextRotationDegrees, renderNestedTable, renderTableFragment };
+export declare function renderTableFragment(fragment: TableFragment, block: TableBlock, measure: TableMeasure, context: RenderContext, options?: RenderTableFragmentOptions): HTMLElement;
+//#endregion