@stll/folio-core 0.25.1 → 0.25.3

package/dist/layout-engine/measure/tableCellGrid.d.ts

@@ -5,10 +5,24 @@ type TableCellGrid = {
   sourceCellsByRow: ReadonlyMap<number, ReadonlyMap<number, TableCell>>;
   sourceColumnsByCell: ReadonlyMap<TableCell, number>;
 };
+type TableCellPlacement = {
+  sourceColumn: number;
+  columnSpan: number;
+  left: number;
+  width: number;
+};
+type TableCellPlacements = ReadonlyMap<TableCell, TableCellPlacement>;
+type BuildTableCellPlacementsOptions = {
+  grid: TableCellGrid;
+  columnWidths: readonly number[];
+  bidi: boolean;
+};
 declare const buildTableCellGrid: (rows: readonly TableRow[], columnCount: number) => TableCellGrid;
 declare const getFirstAvailableColumn: (grid: TableCellGrid, rowIndex: number, startingColumn: number) => number;
 declare const getSourceCellAt: (grid: TableCellGrid, rowIndex: number, columnIndex: number) => TableCell | undefined;
 declare const getSourceCellColumn: (grid: TableCellGrid, cell: TableCell) => number | undefined;
+/** Resolve all source cells to canonical logical columns and physical boxes. */
+declare const buildTableCellPlacements: ({ grid, columnWidths, bidi }: BuildTableCellPlacementsOptions) => TableCellPlacements;
 declare const getTableCellVerticalBorderHeight: (grid: TableCellGrid, cell: TableCell | undefined, rowIndex: number) => number;
 //#endregion
-export { TableCellGrid, buildTableCellGrid, getFirstAvailableColumn, getSourceCellAt, getSourceCellColumn, getTableCellVerticalBorderHeight };
+export { TableCellGrid, TableCellPlacement, TableCellPlacements, buildTableCellGrid, buildTableCellPlacements, getFirstAvailableColumn, getSourceCellAt, getSourceCellColumn, getTableCellVerticalBorderHeight };

package/dist/layout-engine/measure/tableCellGrid.js

@@ -6,10 +6,11 @@ const buildTableCellGrid = (rows, columnCount) => {
 	for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
 		const row = rows[rowIndex];
 		if (!row) continue;
-		let columnIndex = firstAvailableColumn(occupiedColumnsByRow.get(rowIndex), row.gridBefore ?? 0);
+		const gridBefore = Math.max(0, Math.min(columnCount, Math.trunc(row.gridBefore ?? 0)));
+		let columnIndex = firstAvailableColumn(occupiedColumnsByRow.get(rowIndex), gridBefore);
 		for (const cell of row.cells) {
-			const columnSpan = cell.colSpan ?? 1;
-			const rowSpan = cell.rowSpan ?? 1;
+			const columnSpan = Math.max(1, Math.trunc(cell.colSpan ?? 1));
+			const rowSpan = Math.max(1, Math.trunc(cell.rowSpan ?? 1));
 			sourceColumnsByCell.set(cell, columnIndex);
 			const rowEnd = Math.min(rows.length, rowIndex + rowSpan);
 			const columnEnd = Math.min(columnCount, columnIndex + columnSpan);
@@ -17,9 +18,9 @@ const buildTableCellGrid = (rows, columnCount) => {
 				const cellsByColumn = getOrCreateCellRow(sourceCellsByRow, gridRowIndex);
 				for (let gridColumnIndex = columnIndex; gridColumnIndex < columnEnd; gridColumnIndex++) cellsByColumn.set(gridColumnIndex, cell);
 			}
-			if (rowSpan > 1) for (let spannedRowIndex = rowIndex + 1; spannedRowIndex < rowIndex + rowSpan; spannedRowIndex++) {
+			if (rowSpan > 1) for (let spannedRowIndex = rowIndex + 1; spannedRowIndex < rowEnd; spannedRowIndex++) {
 				const occupied = getOrCreateOccupiedRow(occupiedColumnsByRow, spannedRowIndex);
-				for (let columnOffset = 0; columnOffset < columnSpan; columnOffset++) occupied.add(columnIndex + columnOffset);
+				for (let gridColumnIndex = columnIndex; gridColumnIndex < columnEnd; gridColumnIndex++) occupied.add(gridColumnIndex);
 			}
 			columnIndex = firstAvailableColumn(occupiedColumnsByRow.get(rowIndex), columnIndex + columnSpan);
 		}
@@ -33,6 +34,28 @@ const buildTableCellGrid = (rows, columnCount) => {
 const getFirstAvailableColumn = (grid, rowIndex, startingColumn) => firstAvailableColumn(grid.occupiedColumnsByRow.get(rowIndex), startingColumn);
 const getSourceCellAt = (grid, rowIndex, columnIndex) => grid.sourceCellsByRow.get(rowIndex)?.get(columnIndex);
 const getSourceCellColumn = (grid, cell) => grid.sourceColumnsByCell.get(cell);
+/** Resolve all source cells to canonical logical columns and physical boxes. */
+const buildTableCellPlacements = ({ grid, columnWidths, bidi }) => {
+	const columnOffsets = [0];
+	for (const columnWidth of columnWidths) columnOffsets.push((columnOffsets.at(-1) ?? 0) + columnWidth);
+	const tableWidth = columnOffsets.at(-1) ?? 0;
+	const placements = /* @__PURE__ */ new Map();
+	for (const [cell, sourceColumn] of grid.sourceColumnsByCell) {
+		if (sourceColumn < 0 || sourceColumn >= columnWidths.length) continue;
+		const declaredColumnSpan = Math.max(1, Math.trunc(cell.colSpan ?? 1));
+		const columnSpan = Math.min(declaredColumnSpan, columnWidths.length - sourceColumn);
+		const logicalLeft = columnOffsets.at(sourceColumn) ?? 0;
+		const logicalRight = columnOffsets.at(sourceColumn + columnSpan) ?? logicalLeft;
+		const width = logicalRight - logicalLeft;
+		placements.set(cell, {
+			sourceColumn,
+			columnSpan,
+			left: bidi ? tableWidth - logicalRight : logicalLeft,
+			width
+		});
+	}
+	return placements;
+};
 const getTableCellVerticalBorderHeight = (grid, cell, rowIndex) => {
 	const sourceColumn = cell ? getSourceCellColumn(grid, cell) : void 0;
 	const aboveBottom = (sourceColumn === void 0 ? void 0 : getSourceCellAt(grid, rowIndex - 1, sourceColumn))?.borders?.bottom;
@@ -59,4 +82,4 @@ const getOrCreateOccupiedRow = (occupiedColumnsByRow, rowIndex) => {
 	return occupiedColumns;
 };
 //#endregion
-export { buildTableCellGrid, getFirstAvailableColumn, getSourceCellAt, getSourceCellColumn, getTableCellVerticalBorderHeight };
+export { buildTableCellGrid, buildTableCellPlacements, getFirstAvailableColumn, getSourceCellAt, getSourceCellColumn, getTableCellVerticalBorderHeight };

package/dist/layout-engine/measure/tableInlinePlacement.d.ts

@@ -0,0 +1,12 @@
+import { TableBlock } from "../types.js";
+//#region src/layout-engine/measure/tableInlinePlacement.d.ts
+type TableInlinePlacement = {
+  alignment: "center";
+} | {
+  alignment: "left" | "right";
+  offset: number;
+};
+/** Resolve an inline table's horizontal anchor without losing RTL leading-edge semantics. */
+declare const resolveTableInlinePlacement: (table: Pick<TableBlock, "bidi" | "indent" | "justification" | "rows">) => TableInlinePlacement;
+//#endregion
+export { resolveTableInlinePlacement };

package/dist/layout-engine/measure/tableInlinePlacement.js

@@ -0,0 +1,22 @@
+import { resolveTableCellPadding } from "../types.js";
+//#region src/layout-engine/measure/tableInlinePlacement.ts
+/** Resolve an inline table's horizontal anchor without losing RTL leading-edge semantics. */
+const resolveTableInlinePlacement = (table) => {
+	if (table.justification === "center") return { alignment: "center" };
+	if (table.justification === "right") return {
+		alignment: "right",
+		offset: 0
+	};
+	const firstCell = table.rows.at(0)?.cells.at(0);
+	const firstCellPadding = firstCell ? resolveTableCellPadding(firstCell) : void 0;
+	if (table.justification === "left" || table.bidi !== true) return {
+		alignment: "left",
+		offset: table.indent ?? -(firstCellPadding?.left ?? 0)
+	};
+	return {
+		alignment: "right",
+		offset: table.indent ?? -(firstCellPadding?.right ?? 0)
+	};
+};
+//#endregion
+export { resolveTableInlinePlacement };

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

@@ -632,7 +632,7 @@ type TableBlock = {
   layout?: "fixed" | "autofit";
   /** Table horizontal alignment */
   justification?: "left" | "center" | "right";
-  /** Table indent from left margin (in pixels, from w:tblInd) */
+  /** Table indent from the leading margin (in pixels, from w:tblInd). */
   indent?: number;
   /** Right-to-left column order (w:bidiVisual): logical column 0 paints on the right. */
   bidi?: boolean;

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

@@ -1,5 +1,6 @@
 import { HyperlinkInfo, MeasuredLine, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphMeasure, Run, TabStop } from "../layout-engine/types.js";
 import { RenderContext } from "./renderUtils.js";
+import { PhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
 //#region src/layout-painter/renderParagraph.d.ts
 /**
  * CSS class names for paragraph rendering
@@ -70,6 +71,8 @@ type RenderLineOptions = {
   firstLineIndentPx?: number;
   /** Paragraph base direction for logical first-line indentation. */
   isRtl?: boolean;
+  /** Explicit alignment after resolving authored bidi physical sides. */
+  explicitAlignment?: PhysicalParagraphInlineLayout["explicitAlignment"];
   /** Full paragraph content-box width before physical indents. */
   contentWidthPx?: number;
   /** Line-specific floating image margins (calculated per-line based on Y overlap) */

package/dist/layout-painter/renderParagraph.js

@@ -2,6 +2,7 @@ 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 { 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 { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode, toPaintedText } from "../layout-engine/measure/textMeasurementPolicy.js";
@@ -10,7 +11,7 @@ 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 { isRtlParagraph } from "../utils/paragraphBaseDirection.js";
+import { resolvePhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 import { SCRIPT_CLASS, hasCjk, hasComplexScript, segmentByScript } from "../utils/scriptSegments.js";
@@ -49,6 +50,9 @@ function isTextRun(run) {
 	return run.kind === "text";
 }
 function hyperlinksMatch(left, right) {
+	const leftInstanceIndex = getHyperlinkInstanceIndex(left);
+	const rightInstanceIndex = getHyperlinkInstanceIndex(right);
+	if (leftInstanceIndex !== void 0 || rightInstanceIndex !== void 0) return leftInstanceIndex === rightInstanceIndex;
 	return left.href === right.href && left.tooltip === right.tooltip && left.noDefaultStyle === right.noDefaultStyle;
 }
 function collectLeftToRightDisplayedUrlHyperlinks(runs) {
@@ -1097,7 +1101,7 @@ function renderLine(block, line, alignment, doc, options) {
 		return runEl;
 	};
 	const onlyRun = runsForLine.length === 1 ? runsForLine[0] : void 0;
-	if (onlyRun && isMathRun(onlyRun) && onlyRun.display === "block" && block.attrs?.alignment !== "right") lineEl.style.textAlign = "center";
+	if (onlyRun && isMathRun(onlyRun) && onlyRun.display === "block" && (options?.explicitAlignment ?? resolvePhysicalParagraphInlineLayout(block).explicitAlignment) !== "right") lineEl.style.textAlign = "center";
 	if (runsForLine.length === 1 && isImageRun(runsForLine[0])) {
 		lineEl.style.display = "flex";
 		lineEl.style.alignItems = "center";
@@ -1342,26 +1346,15 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 	if (fragment.continuesFromPrev) fragmentEl.dataset["continuesFromPrev"] = "true";
 	if (fragment.continuesOnNext) fragmentEl.dataset["continuesOnNext"] = "true";
 	const lines = measure.lines.slice(fragment.fromLine, fragment.toLine);
-	const alignment = block.attrs?.alignment;
+	const inlineLayout = resolvePhysicalParagraphInlineLayout(block);
+	const { alignment, indentLeft, indentRight, isRtl } = inlineLayout;
 	if (block.attrs?.styleId) fragmentEl.dataset["styleId"] = block.attrs.styleId;
-	const isRtl = isRtlParagraph(block);
 	if (isRtl) fragmentEl.dir = "rtl";
-	if (alignment) if (alignment === "center") fragmentEl.style.textAlign = "center";
-	else if (alignment === "right") fragmentEl.style.textAlign = "right";
-	else if (alignment === "left") fragmentEl.style.textAlign = "left";
-	else fragmentEl.style.textAlign = isRtl ? "right" : "left";
-	else if (isRtl) fragmentEl.style.textAlign = "right";
-	const effectiveAlignment = alignment ?? (isRtl ? "right" : void 0);
+	let fragmentAlignment = alignment;
+	if (alignment === "justify") fragmentAlignment = isRtl ? "right" : "left";
+	fragmentEl.style.textAlign = fragmentAlignment;
+	const effectiveAlignment = alignment;
 	const indent = block.attrs?.indent;
-	let indentLeft = 0;
-	let indentRight = 0;
-	if (indent) if (isRtl) {
-		if (indent.left !== void 0) indentRight = indent.left;
-		if (indent.right !== void 0) indentLeft = indent.right;
-	} else {
-		if (indent.left !== void 0) indentLeft = indent.left;
-		if (indent.right !== void 0) indentRight = indent.right;
-	}
 	const borders = block.attrs?.borders;
 	if (borders) {
 		const borderStyleToCss = (style) => {
@@ -1448,6 +1441,7 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			tabLeftIndentPx: indent?.left ?? 0,
 			firstLineIndentPx: isFirstLine ? firstLineIndentPx : 0,
 			isRtl,
+			...inlineLayout.explicitAlignment === void 0 ? {} : { explicitAlignment: inlineLayout.explicitAlignment },
 			contentWidthPx: fragment.width,
 			context,
 			floatingMargins: {

package/dist/layout-painter/renderTable.js

@@ -1,7 +1,9 @@
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
 import { buildTableCellFloatingZones, getTableCellContentWidth, getTableCellFloatingImages } from "../layout-engine/measure/tableCellFloating.js";
 import { createTableCellFlowState, finishTableCellFlow, placeTableCellBlock } from "../layout-engine/measure/tableCellFlow.js";
-import { getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, resolveTableCellPadding, tableColumnsArePinned } from "../layout-engine/types.js";
+import { buildTableCellGrid, buildTableCellPlacements, getSourceCellAt } from "../layout-engine/measure/tableCellGrid.js";
+import { resolveTableInlinePlacement } from "../layout-engine/measure/tableInlinePlacement.js";
+import { isFloatingImageRun, isFloatingTextBoxBlock, resolveTableCellPadding, tableColumnsArePinned } from "../layout-engine/types.js";
 import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 import { emuToPixels } from "../utils/units.js";
 import { resolveAnchoredImagePosition } from "./anchoredImagePosition.js";
@@ -228,11 +230,14 @@ function renderNestedTable(block, measure, context, doc) {
 	tableEl.style.position = "relative";
 	tableEl.style.width = `${measure.totalWidth}px`;
 	tableEl.style.display = "block";
-	if (block.justification === "center") {
+	const placement = resolveTableInlinePlacement(block);
+	if (placement.alignment === "center") {
 		tableEl.style.marginLeft = "auto";
 		tableEl.style.marginRight = "auto";
-	} else if (block.justification === "right") tableEl.style.marginLeft = "auto";
-	else if (block.indent) tableEl.style.marginLeft = `${block.indent}px`;
+	} else if (placement.alignment === "right") {
+		tableEl.style.marginLeft = "auto";
+		tableEl.style.marginRight = `${placement.offset}px`;
+	} else tableEl.style.marginLeft = `${placement.offset}px`;
 	tableEl.dataset["blockId"] = String(block.id);
 	if (block.pmStart !== void 0) tableEl.dataset["pmStart"] = String(block.pmStart);
 	if (block.pmEnd !== void 0) tableEl.dataset["pmEnd"] = String(block.pmEnd);
@@ -243,9 +248,13 @@ function renderNestedTable(block, measure, context, doc) {
 		yPos += i_item.height;
 	}
 	rowYPositions.push(yPos);
-	const spanningCells = /* @__PURE__ */ new Map();
 	const columnsPinned = tableColumnsArePinned(block);
-	const cellGrid = buildTableCellGrid(block, measure.columnWidths.length);
+	const cellGrid = buildTableCellGrid(block.rows, measure.columnWidths.length);
+	const cellPlacements = buildTableCellPlacements({
+		grid: cellGrid,
+		columnWidths: measure.columnWidths,
+		bidi: block.bidi === true
+	});
 	let y = 0;
 	for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex++) {
 		const row = block.rows[rowIndex];
@@ -264,11 +273,11 @@ function renderNestedTable(block, measure, context, doc) {
 			totalRows: block.rows.length,
 			context,
 			doc,
-			spanningCells,
 			rowYPositions,
 			bidi: block.bidi === true,
 			columnsPinned,
-			cellGrid
+			cellGrid,
+			cellPlacements
 		});
 		tableEl.append(rowEl);
 		y += rowMeasure.height;
@@ -320,13 +329,13 @@ function renderCellDiagonalBorder({ border, direction, cellWidth, cellHeight, do
 	}
 	return line;
 }
-function renderTableCell({ cell, cellMeasure, x, rowHeight, borderFlags, columnsPinned, context, doc, contentClip, pageContentPosition }) {
+function renderTableCell({ cell, cellMeasure, x, width, rowHeight, borderFlags, columnsPinned, context, doc, contentClip, pageContentPosition }) {
 	const cellEl = doc.createElement("div");
 	cellEl.className = TABLE_CLASS_NAMES.cell;
 	cellEl.style.position = "absolute";
 	cellEl.style.left = `${x}px`;
 	cellEl.style.top = "0";
-	cellEl.style.width = `${cellMeasure.width}px`;
+	cellEl.style.width = `${width}px`;
 	cellEl.style.height = `${rowHeight}px`;
 	cellEl.style.overflow = "hidden";
 	cellEl.style.boxSizing = "border-box";
@@ -396,7 +405,7 @@ function renderTableCell({ cell, cellMeasure, x, rowHeight, borderFlags, columns
 	const topLeftToBottomRight = renderCellDiagonalBorder({
 		border: cell.borders?.topLeftToBottomRight,
 		direction: "top-left-to-bottom-right",
-		cellWidth: cellMeasure.width,
+		cellWidth: width,
 		cellHeight: rowHeight,
 		doc
 	});
@@ -404,7 +413,7 @@ function renderTableCell({ cell, cellMeasure, x, rowHeight, borderFlags, columns
 	const topRightToBottomLeft = renderCellDiagonalBorder({
 		border: cell.borders?.topRightToBottomLeft,
 		direction: "top-right-to-bottom-left",
-		cellWidth: cellMeasure.width,
+		cellWidth: width,
 		cellHeight: rowHeight,
 		doc
 	});
@@ -423,52 +432,23 @@ function renderTableCell({ cell, cellMeasure, x, rowHeight, borderFlags, columns
 	}
 	return cellEl;
 }
-const tableCellGridKey = (rowIndex, columnIndex) => `${rowIndex}:${columnIndex}`;
-function buildTableCellGrid(block, columnCount) {
-	const grid = /* @__PURE__ */ new Map();
-	for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex++) {
-		const row = block.rows[rowIndex];
-		if (!row) continue;
-		let columnIndex = 0;
-		for (const cell of row.cells) {
-			while (grid.has(tableCellGridKey(rowIndex, columnIndex))) columnIndex += 1;
-			const colSpan = cell.colSpan ?? 1;
-			const rowSpan = cell.rowSpan ?? 1;
-			const rowEnd = Math.min(block.rows.length, rowIndex + rowSpan);
-			const columnEnd = Math.min(columnCount, columnIndex + colSpan);
-			for (let gridRow = rowIndex; gridRow < rowEnd; gridRow++) for (let gridColumn = columnIndex; gridColumn < columnEnd; gridColumn++) grid.set(tableCellGridKey(gridRow, gridColumn), cell);
-			columnIndex += colSpan;
-		}
-	}
-	return grid;
-}
 const hasVisibleBorder = (border) => border !== void 0 && border.style !== "none" && border.style !== "nil";
-function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, spanningCells, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, contentClip, pageContentPosition }) {
+function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, cellPlacements, contentClip, pageContentPosition }) {
 	const rowEl = doc.createElement("div");
 	rowEl.className = TABLE_CLASS_NAMES.row;
-	const tableWidth = bidi ? columnWidths.reduce((sum, columnWidth) => sum + columnWidth, 0) : 0;
 	rowEl.style.position = "absolute";
 	rowEl.style.left = "0";
 	rowEl.style.top = `${y}px`;
 	rowEl.style.width = "100%";
 	rowEl.style.height = `${rowMeasure.height}px`;
 	rowEl.dataset["rowIndex"] = String(rowIndex);
-	const occupiedColumns = /* @__PURE__ */ new Set();
-	if (spanningCells) {
-		for (const [, spanCell] of spanningCells) if (spanCell.startRow < rowIndex && spanCell.startRow + spanCell.rowSpan > rowIndex) for (let c = 0; c < spanCell.colSpan; c++) occupiedColumns.add(spanCell.columnIndex + c);
-	}
-	const gridBefore = row.gridBefore ?? 0;
-	let x = getTableRowLeadingWidth(row, columnWidths);
-	let columnIndex = gridBefore;
-	while (occupiedColumns.has(columnIndex)) {
-		x += columnWidths[columnIndex] ?? 0;
-		columnIndex++;
-	}
 	for (let cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
 		const cell = row.cells[cellIndex];
 		const cellMeasure = rowMeasure.cells[cellIndex];
 		if (!cell || !cellMeasure) continue;
-		const colSpan = cell.colSpan ?? 1;
+		const placement = cellPlacements.get(cell);
+		if (!placement) continue;
+		const { sourceColumn: columnIndex, columnSpan: colSpan, left: cellLeft, width } = placement;
 		const rowSpan = cell.rowSpan ?? 1;
 		let cellHeight = rowMeasure.height;
 		if (rowSpan > 1 && rowYPositions) {
@@ -476,24 +456,21 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 			for (let r = rowIndex; r < rowIndex + rowSpan && r < rowYPositions.length - 1; r++) cellHeight += (rowYPositions[r + 1] ?? 0) - (rowYPositions[r] ?? 0);
 			if (cellHeight === 0) cellHeight = rowMeasure.height * rowSpan;
 		}
-		let cellWidth = 0;
-		for (let c = 0; c < colSpan && columnIndex + c < columnWidths.length; c++) cellWidth += columnWidths[columnIndex + c] ?? 0;
-		const cellLeft = bidi ? tableWidth - x - cellWidth : x;
 		const isFirstRow = rowIndex === 0 || isFirstRowInFragment === true;
 		const isLastRow = rowIndex + rowSpan >= totalRows;
 		const atLogicalStart = columnIndex === 0;
 		const atLogicalEnd = columnIndex + colSpan >= columnWidths.length;
 		const isFirstCol = bidi ? atLogicalEnd : atLogicalStart;
 		const isLastCol = bidi ? atLogicalStart : atLogicalEnd;
-		const aboveCell = cellGrid?.get(tableCellGridKey(rowIndex - 1, columnIndex));
-		const leftNeighborColumn = bidi ? columnIndex + colSpan : columnIndex - 1;
-		const leftCell = cellGrid?.get(tableCellGridKey(rowIndex, leftNeighborColumn));
+		const aboveCell = getSourceCellAt(cellGrid, rowIndex - 1, columnIndex);
+		const leftCell = getSourceCellAt(cellGrid, rowIndex, bidi ? columnIndex + colSpan : columnIndex - 1);
 		const drawTop = isFirstRow || !hasVisibleBorder(aboveCell?.borders?.bottom);
 		const drawLeft = isFirstCol || !hasVisibleBorder(leftCell?.borders?.right);
 		const cellEl = renderTableCell({
 			cell,
 			cellMeasure,
 			x: cellLeft,
+			width,
 			rowHeight: cellHeight,
 			borderFlags: {
 				drawTop,
@@ -515,25 +492,6 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 		cellEl.dataset["columnIndex"] = String(columnIndex);
 		if (rowSpan > 1) cellEl.dataset["rowSpan"] = String(rowSpan);
 		rowEl.append(cellEl);
-		if (rowSpan > 1 && spanningCells) {
-			const key = `${rowIndex}-${columnIndex}`;
-			spanningCells.set(key, {
-				cell,
-				cellMeasure,
-				columnIndex,
-				startRow: rowIndex,
-				rowSpan,
-				colSpan,
-				x: cellLeft,
-				totalHeight: cellHeight
-			});
-		}
-		x += cellWidth;
-		columnIndex += colSpan;
-		while (occupiedColumns.has(columnIndex)) {
-			x += columnWidths[columnIndex] ?? 0;
-			columnIndex++;
-		}
 	}
 	return rowEl;
 }
@@ -592,9 +550,13 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 		yPos += i_item.height;
 	}
 	rowYPositions.push(yPos);
-	const spanningCells = /* @__PURE__ */ new Map();
 	const columnsPinned = tableColumnsArePinned(block);
-	const cellGrid = buildTableCellGrid(block, measure.columnWidths.length);
+	const cellGrid = buildTableCellGrid(block.rows, measure.columnWidths.length);
+	const cellPlacements = buildTableCellPlacements({
+		grid: cellGrid,
+		columnWidths: measure.columnWidths,
+		bidi: block.bidi === true
+	});
 	const headerRowCount = fragment.headerRowCount ?? 0;
 	let y = 0;
 	if (headerRowCount > 0 && fragment.continuesFromPrev) for (let hdrIdx = 0; hdrIdx < headerRowCount; hdrIdx++) {
@@ -614,12 +576,12 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			totalRows: block.rows.length,
 			context,
 			doc,
-			spanningCells,
 			rowYPositions,
 			isFirstRowInFragment: hdrIdx === 0,
 			bidi: block.bidi === true,
 			columnsPinned,
 			cellGrid,
+			cellPlacements,
 			...tablePageContentPosition ? { pageContentPosition: {
 				...tablePageContentPosition,
 				y: tablePageContentPosition.y + y
@@ -667,12 +629,12 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			totalRows: block.rows.length,
 			context,
 			doc,
-			spanningCells,
 			rowYPositions,
 			isFirstRowInFragment,
 			bidi: block.bidi === true,
 			columnsPinned,
 			cellGrid,
+			cellPlacements,
 			...contentClip ? { contentClip } : {},
 			...tablePageContentPosition ? { pageContentPosition: {
 				...tablePageContentPosition,