docxodus 12.6.4 → 13.0.0

package/dist/pagination.js

@@ -5,6 +5,7 @@
  * and flows it across fixed-size page containers based on document dimensions.
  */
 import { formatPageNumber } from "./page-number-format.js";
+import { alignExactLineBaselines, insetClipBounds, preserveExactLineInk } from "./line-metrics.js";
 import { DEFAULT_MARGIN, DEFAULT_PAGE_WIDTH, parseSectionDimensions, ptToPx, pxToPt, resolvePageBands, } from "./page-geometry.js";
 /**
  * Whether two sections describe the same physical page box. A continuous section
@@ -124,6 +125,198 @@ const MAX_FOOTNOTE_AREA_RATIO = 0.6; // 60% of content height
 const FOOTNOTE_MEASUREMENT_GUARD_PT = 2;
 /** Internal provenance retained only while a note element waits between pages. */
 const FOOTNOTE_SOURCE_POSITION_ATTR = "data-pagination-footnote-source-position";
+/**
+ * The top and bottom margins a block occupies in its parent's flow, in CSS px, AFTER CSS margin
+ * collapsing through its first and last in-flow children (CSS 2.1 §8.3.1). getBoundingClientRect()
+ * excludes such a collapsed-through margin, and getComputedStyle() reports only the element's own:
+ * the converter wraps a table in an unstyled `div`, so the table's own top margin collapses
+ * through the wrapper and occupies page height that neither of those reads accounted for. The
+ * paginator's budget then fell a few pixels to a line short of the laid-out page, and the export
+ * refused the clipped page (issue #848).
+ *
+ * A margin collapses with a parent's while the parent is an ordinary block box (display block or
+ * list-item, overflow visible, not floated or absolutely positioned — anything else establishes
+ * its own formatting context) with no border or padding on that side, the child is the parent's
+ * first (last) in-flow block-level child, and no line content precedes (follows) it. For the
+ * bottom edge the parent must also have an automatic height. Positive margins combine by maximum
+ * and negative ones by minimum, as CSS collapses them.
+ */
+export function collapsedBlockMarginsPx(view, element) {
+    return {
+        topPx: collapseMarginChain(view, element, "top"),
+        bottomPx: collapseMarginChain(view, element, "bottom"),
+    };
+}
+function collapseMarginChain(view, element, edge) {
+    const margins = [];
+    let current = element;
+    while (current) {
+        const style = view.getComputedStyle(current);
+        margins.push(parseFloat(edge === "top" ? style.marginTop : style.marginBottom) || 0);
+        current = collapsesThroughTo(view, current, style, edge);
+    }
+    const positive = Math.max(0, ...margins);
+    const negative = Math.min(0, ...margins);
+    return positive + negative;
+}
+/** The child whose `edge` margin collapses through `parent`'s, or null when none does. */
+function collapsesThroughTo(view, parent, style, edge) {
+    const ordinaryBlock = (style.display === "block" || style.display === "list-item")
+        && style.overflowX === "visible" && style.overflowY === "visible"
+        && style.float === "none" && style.position !== "absolute" && style.position !== "fixed";
+    if (!ordinaryBlock)
+        return null;
+    // Column boxes establish a formatting context: child margins stay inside the multicol
+    // box and are already included in its measured height (CSS Multi-column Layout §2).
+    if (style.columnCount !== "auto" || style.columnWidth !== "auto")
+        return null;
+    const border = parseFloat(edge === "top" ? style.borderTopWidth : style.borderBottomWidth) || 0;
+    const padding = parseFloat(edge === "top" ? style.paddingTop : style.paddingBottom) || 0;
+    if (border !== 0 || padding !== 0)
+        return null;
+    if (edge === "bottom" && parent.style.height !== "")
+        return null;
+    const nodes = Array.from(parent.childNodes);
+    if (edge === "bottom")
+        nodes.reverse();
+    for (const node of nodes) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            if ((node.textContent ?? "").trim() !== "")
+                return null; // line content comes first
+            continue;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            continue;
+        const child = node;
+        const childStyle = view.getComputedStyle(child);
+        if (childStyle.display === "none")
+            continue;
+        if (childStyle.position === "absolute" || childStyle.position === "fixed" || childStyle.float !== "none")
+            continue;
+        const blockLevel = childStyle.display === "block" || childStyle.display === "list-item"
+            || childStyle.display === "table" || childStyle.display === "flow-root"
+            || childStyle.display === "flex" || childStyle.display === "grid";
+        return blockLevel ? child : null; // an inline-level child starts a line box
+    }
+    return null;
+}
+/**
+ * Set by the paginator on a floating drawing it promotes out of its paragraph into the page box;
+ * the value is the `data-source-anchor-id` of the element that hosted it. It survives into the
+ * standalone export, whose offline re-verification measures through the same function.
+ */
+export const DRAWING_HOST_ATTRIBUTE = "data-docx-anchor-host";
+/**
+ * Set on a source-anchored element a floating drawing was promoted out of, so
+ * {@link measureRenderedSource} looks up promoted drawings only for elements that have them.
+ */
+export const HOSTS_PROMOTED_DRAWING_ATTRIBUTE = "data-docx-hosts-promoted-drawing";
+/** True when `element` shows no text (beyond white space) and no image, SVG or canvas. */
+function rendersOnlyItsLine(element) {
+    return (element.textContent ?? '').replace(/[\s\u00a0]/g, '') === ''
+        && element.querySelector('img, svg, canvas, [data-docx-drawing-anchor]') === null;
+}
+/** Self-contained closure for trusted host evaluation in the script-disabled print context. */
+function createRenderedSourceMeasurer(clipInset, drawingHostAttribute, hostsPromotedDrawingAttribute) {
+    /**
+     * Intersect a box with the page and with every ancestor that establishes an overflow clip before
+     * the page root. getBoundingClientRect() reports layout outside those clips, which is not rendered
+     * and therefore must not satisfy PageMap completeness or inflate portable geometry.
+     */
+    function visibleWithinPage(view, element, page, pageRect, rect) {
+        let left = Math.max(rect.left, pageRect.left);
+        let top = Math.max(rect.top, pageRect.top);
+        let right = Math.min(rect.right, pageRect.right);
+        let bottom = Math.min(rect.bottom, pageRect.bottom);
+        const clips = (value) => value === "hidden" || value === "clip" || value === "scroll" || value === "auto";
+        for (let ancestor = element.parentElement; ancestor && ancestor !== page; ancestor = ancestor.parentElement) {
+            const style = view.getComputedStyle(ancestor);
+            const clipsX = clips(style.overflowX);
+            const clipsY = clips(style.overflowY);
+            if (!clipsX && !clipsY && !style.clipPath.startsWith("inset("))
+                continue;
+            const ancestorRect = ancestor.getBoundingClientRect();
+            const scale = ancestorRect.width / ancestor.offsetWidth || 1;
+            const inset = clipInset(style.clipPath, ancestorRect, scale);
+            if (inset) {
+                left = Math.max(left, inset.left);
+                top = Math.max(top, inset.top);
+                right = Math.min(right, inset.right);
+                bottom = Math.min(bottom, inset.bottom);
+            }
+            if (clipsX) {
+                left = Math.max(left, ancestorRect.left);
+                right = Math.min(right, ancestorRect.right);
+            }
+            if (clipsY) {
+                top = Math.max(top, ancestorRect.top);
+                bottom = Math.min(bottom, ancestorRect.bottom);
+            }
+        }
+        return { left, top, right, bottom };
+    }
+    return function measureRenderedSource(view, element, page, pageRect = page.getBoundingClientRect()) {
+        const own = element.getBoundingClientRect();
+        const ownResult = () => ({ rect: own, visible: visibleWithinPage(view, element, page, pageRect, own) });
+        const ownMeasurable = own.width > 0 && own.height > 0;
+        const hostsPromotedDrawing = element.hasAttribute(hostsPromotedDrawingAttribute);
+        if (ownMeasurable && !hostsPromotedDrawing)
+            return ownResult();
+        const hostAnchorId = element.dataset.sourceAnchorId;
+        const promoted = hostAnchorId
+            ? Array.from(page.querySelectorAll(`[${drawingHostAttribute}]`))
+                .filter((drawing) => drawing.getAttribute(drawingHostAttribute) === hostAnchorId)
+            : [];
+        if (ownMeasurable && promoted.length === 0)
+            return ownResult();
+        const rendered = [
+            ...(ownMeasurable ? [element] : Array.from(element.querySelectorAll("*"))),
+            ...promoted.flatMap((drawing) => [drawing, ...Array.from(drawing.querySelectorAll("*"))]),
+        ];
+        let left = Infinity;
+        let top = Infinity;
+        let right = -Infinity;
+        let bottom = -Infinity;
+        for (const child of rendered) {
+            const style = view.getComputedStyle(child);
+            if (style.display === "none" || style.visibility === "hidden")
+                continue;
+            const childRect = child.getBoundingClientRect();
+            if (childRect.width <= 0 || childRect.height <= 0)
+                continue;
+            const visible = visibleWithinPage(view, child, page, pageRect, childRect);
+            if (visible.right <= visible.left || visible.bottom <= visible.top)
+                continue;
+            left = Math.min(left, visible.left);
+            top = Math.min(top, visible.top);
+            right = Math.max(right, visible.right);
+            bottom = Math.max(bottom, visible.bottom);
+        }
+        if (!(left < right && top < bottom))
+            return ownResult();
+        return { rect: new DOMRect(left, top, right - left, bottom - top), visible: { left, top, right, bottom } };
+    };
+}
+/**
+ * Where a source-anchored element renders on `page`: `rect` is its layout box and `visible` the
+ * part of it the page shows. Normally that is the element's own border box. An element the
+ * paginator promoted floating drawings out of measures as the union of what it renders — its own
+ * box (or, when that is empty, its descendants) and the drawings promoted out of it (linked by
+ * {@link DRAWING_HOST_ATTRIBUTE}) — each clipped along its OWN ancestor chain, since a promoted
+ * drawing sits outside the text column that clips its host (issue #849). Such a paragraph keeps a
+ * line of its own when the drawing was its only content (issue #880), and its fragment still
+ * encloses the drawing. Returns the element's own degenerate box when none of that renders.
+ *
+ * Fragment-identity normalization, PageMap materialization and the standalone export's offline
+ * re-verification all measure through this one function, so they agree on which elements are
+ * measurable and where.
+ */
+export const measureRenderedSource = createRenderedSourceMeasurer(insetClipBounds, DRAWING_HOST_ATTRIBUTE, HOSTS_PROMOTED_DRAWING_ATTRIBUTE);
+/** @internal Owned runtime code only; never inserts a script or enables document JavaScript. */
+export function renderedSourceMeasurerExpression() {
+    return `(${createRenderedSourceMeasurer.toString()})(${insetClipBounds.toString()},
+    ${JSON.stringify(DRAWING_HOST_ATTRIBUTE)}, ${JSON.stringify(HOSTS_PROMOTED_DRAWING_ATTRIBUTE)})`;
+}
 export class PaginationEngine {
     /**
      * Creates a new pagination engine.
@@ -177,6 +370,7 @@ export class PaginationEngine {
         this.pageGap = options.pageGap ?? 20;
         this.fragmentParagraphs = options.fragmentParagraphs ?? false;
         this.deferFragmentIdentities = options.deferFragmentIdentities ?? false;
+        this.bodyBudgetReductionsPt = options.bodyBudgetReductionsPt ?? {};
         this.cancellationCheckpoint = options.checkCancellation;
         this.pageCountCheckpoint = options.checkPageCount;
         this.layoutToken = options.layoutToken;
@@ -324,7 +518,8 @@ export class PaginationEngine {
                     const columnCount = parseInt(section.dataset.cols || "1", 10);
                     if (columnCount > 1) {
                         const gap = parseFloat(section.dataset.colGap || "");
-                        blocks.push(...this.buildColumnBlocks(section, sectionDims, sectionIndex, columnCount, Number.isFinite(gap) ? gap : 36));
+                        blocks.push(...this.buildColumnBlocks(section, sectionDims, sectionIndex, columnCount, Number.isFinite(gap) ? gap : 36, section.dataset.sectionType === "continuous"
+                            && section === sectionsToProcess[sectionsToProcess.length - 1]));
                     }
                     else {
                         blocks.push(...this.measureBlocks(section, sectionDims, sectionIndex));
@@ -440,13 +635,12 @@ export class PaginationEngine {
                     || !Number.isInteger(parseInt(element.dataset.fragmentIndex || "", 10))) {
                     throw new Error(`page ${page.pageNumber} contains an unqualified source anchor`);
                 }
-                const rect = element.getBoundingClientRect();
                 const style = this.view.getComputedStyle(element);
                 const deliberatelyHidden = style.display === "none" || style.visibility === "hidden";
                 if (deliberatelyHidden)
                     continue;
+                const { rect, visible: visibleRect } = measureRenderedSource(this.view, element, page.element, pageRect);
                 requiredAnchorIds.add(anchorId);
-                const visibleRect = this.intersectWithClippingAncestors(element, page.element, pageRect, rect);
                 const left = visibleRect.left;
                 const top = visibleRect.top;
                 const right = visibleRect.right;
@@ -513,8 +707,7 @@ export class PaginationEngine {
                 const style = this.view.getComputedStyle(element);
                 if (style.display === "none" || style.visibility === "hidden")
                     continue;
-                const rect = element.getBoundingClientRect();
-                const visible = this.intersectWithClippingAncestors(element, page.element, pageRect, rect);
+                const { rect, visible } = measureRenderedSource(this.view, element, page.element, pageRect);
                 if (rect.width <= 0 || rect.height <= 0
                     || visible.right <= visible.left || visible.bottom <= visible.top)
                     continue;
@@ -526,35 +719,6 @@ export class PaginationEngine {
             }
         }
     }
-    /**
-     * Intersect an element with every ancestor that establishes an overflow clip before the page
-     * root. getBoundingClientRect() reports layout outside those clips, which is not rendered and
-     * therefore must not satisfy PageMap completeness or inflate portable geometry.
-     */
-    intersectWithClippingAncestors(element, page, pageRect, rect) {
-        let left = Math.max(rect.left, pageRect.left);
-        let top = Math.max(rect.top, pageRect.top);
-        let right = Math.min(rect.right, pageRect.right);
-        let bottom = Math.min(rect.bottom, pageRect.bottom);
-        const clips = (value) => value === "hidden" || value === "clip" || value === "scroll" || value === "auto";
-        for (let ancestor = element.parentElement; ancestor && ancestor !== page; ancestor = ancestor.parentElement) {
-            const style = this.view.getComputedStyle(ancestor);
-            const clipsX = clips(style.overflowX);
-            const clipsY = clips(style.overflowY);
-            if (!clipsX && !clipsY)
-                continue;
-            const ancestorRect = ancestor.getBoundingClientRect();
-            if (clipsX) {
-                left = Math.max(left, ancestorRect.left);
-                right = Math.min(right, ancestorRect.right);
-            }
-            if (clipsY) {
-                top = Math.max(top, ancestorRect.top);
-                bottom = Math.min(bottom, ancestorRect.bottom);
-            }
-        }
-        return { left, top, right, bottom };
-    }
     storyForCanonicalAnchor(anchorId) {
         const first = anchorId.indexOf(":");
         const second = first < 0 ? -1 : anchorId.indexOf(":", first + 1);
@@ -792,9 +956,7 @@ export class PaginationEngine {
             // Measure height and margins separately for proper margin collapsing calculation
             // getBoundingClientRect() returns content+padding+border, not margins
             const rect = child.getBoundingClientRect();
-            const style = this.view.getComputedStyle(child);
-            const marginTopPx = parseFloat(style.marginTop) || 0;
-            const marginBottomPx = parseFloat(style.marginBottom) || 0;
+            const { topPx: marginTopPx, bottomPx: marginBottomPx } = collapsedBlockMarginsPx(this.view, child);
             const heightPt = pxToPt(rect.height);
             const marginTopPt = pxToPt(marginTopPx);
             const marginBottomPt = pxToPt(marginBottomPx);
@@ -840,8 +1002,16 @@ export class PaginationEngine {
         for (const rule of sectionChildren.filter((child) => child.tagName === "HR")) {
             this.checkpoint();
             const clonedRule = rule.cloneNode(true);
-            if (blocks.length === 0)
-                clonedRule.style.marginTop = sectionStyle.marginTop;
+            // The rule leaves its section when flattened, so preserve the section-scoped
+            // print styling before measuring and painting the detached clone.
+            const ruleStyle = this.view.getComputedStyle(rule);
+            for (const property of ["height", "width", "max-width", "border", "background-color", "color",
+                "margin-top", "margin-right", "margin-bottom", "margin-left"]) {
+                clonedRule.style.setProperty(property, ruleStyle.getPropertyValue(property));
+            }
+            if (blocks.length === 0) {
+                clonedRule.style.marginTop = `calc(${sectionStyle.marginTop} + ${ruleStyle.marginTop})`;
+            }
             blocks.push(this.measureElement(clonedRule, dims, sectionIndex));
         }
         const listStyle = this.view.getComputedStyle(list);
@@ -886,9 +1056,11 @@ export class PaginationEngine {
                             return null;
                         clone.id = itemId;
                     }
-                    const value = parseInt(item.getAttribute("value") || String(itemIndex + 1), 10);
-                    const marker = this.formatOrderedListMarker(Number.isFinite(value) ? value : itemIndex + 1, listStyle.listStyleType);
-                    clone.insertBefore(this.document.createTextNode(`${marker}. `), clone.firstChild);
+                    if (!clone.querySelector('[data-endnote-number]')) {
+                        const value = parseInt(item.getAttribute("value") || String(itemIndex + 1), 10);
+                        const marker = this.formatOrderedListMarker(Number.isFinite(value) ? value : itemIndex + 1, listStyle.listStyleType);
+                        clone.insertBefore(this.document.createTextNode(`${marker}. `), clone.firstChild);
+                    }
                 }
                 blocks.push(this.measureElement(clone, dims, sectionIndex));
             }
@@ -913,15 +1085,16 @@ export class PaginationEngine {
     /**
      * Flows a multi-column (`w:cols`) section's children into CSS-multicol container
      * blocks. Word lays such a section out as N columns inside the same body extent;
-     * a balanced `column-count` container reproduces that geometry, and the paginator
+     * a `column-count` container reproduces that geometry, and the paginator
      * then places each container as one ordinary measured block. A container grows
-     * greedily until its balanced height would exceed the smallest page body available
-     * to the section, so a long columned section still splits across pages at block
+     * greedily until it would exceed the smallest page body available to the section.
+     * Final continuous sections fill that height sequentially; other sections retain
+     * balancing. A long columned section still splits across pages at block
      * boundaries. Each child lands in exactly one container, so anchors never
      * duplicate. An explicit page break child passes through as its own block, which
      * ends the current container and lets the normal flow logic turn the page.
      */
-    buildColumnBlocks(section, dims, sectionIndex, columnCount, columnGapPt) {
+    buildColumnBlocks(section, dims, sectionIndex, columnCount, columnGapPt, sequential = false) {
         const children = Array.from(section.children);
         const blocks = [];
         const maxFragmentHeight = this.smallestEffectiveContentHeight(dims, sectionIndex);
@@ -931,9 +1104,16 @@ export class PaginationEngine {
             const container = this.document.createElement("div");
             container.style.columnCount = String(columnCount);
             container.style.columnGap = `${columnGapPt}pt`;
+            if (sequential) {
+                container.dataset.paginationSequentialColumns = "true";
+                container.style.columnFill = "auto";
+                container.style.maxHeight = `${maxFragmentHeight}pt`;
+            }
             for (const child of slice) {
                 container.appendChild(child.cloneNode(true));
             }
+            if (sequential)
+                this.liftColumnSpaceBefore(container, dims);
             return container;
         };
         let start = 0;
@@ -948,12 +1128,20 @@ export class PaginationEngine {
             // emitted alone, preserving the established oversized-block fallback.
             let end = start + 1;
             let container = makeContainer(children.slice(start, end));
+            if (sequential && this.columnContainerOverflows(container, dims)) {
+                // An indivisible child that exceeds all available columns keeps the established
+                // oversized-block path; a constrained box must not hide it in an extra column.
+                delete container.dataset.paginationSequentialColumns;
+                container.style.columnFill = "balance";
+                container.style.maxHeight = "";
+            }
             let measured = this.measureElement(container, dims, sectionIndex);
             while (end < children.length && !isBreak(children[end])) {
                 this.checkpoint();
                 const candidate = makeContainer(children.slice(start, end + 1));
                 const candidateMeasured = this.measureElement(candidate, dims, sectionIndex);
-                if (candidateMeasured.heightPt > maxFragmentHeight)
+                if (candidateMeasured.heightPt > maxFragmentHeight
+                    || (sequential && this.columnContainerOverflows(candidate, dims)))
                     break;
                 container = candidate;
                 measured = candidateMeasured;
@@ -975,6 +1163,92 @@ export class PaginationEngine {
         }
         return blocks;
     }
+    /** Keep Word's paragraph space-before in the ordinary inter-block spacing budget. */
+    liftColumnSpaceBefore(container, dims) {
+        container.style.marginTop = "";
+        const first = container.firstElementChild;
+        if (!first || !this.isWordParagraphElement(first))
+            return;
+        const host = this.document.createElement("div");
+        host.style.width = `${dims.contentWidth}pt`;
+        host.appendChild(container);
+        this.stagingElement.appendChild(host);
+        try {
+            const spaceBefore = first.dataset.paginationColumnSpaceBefore
+                ?? this.view.getComputedStyle(first).marginTop;
+            first.dataset.paginationColumnSpaceBefore = spaceBefore;
+            first.style.marginTop = "0";
+            container.style.marginTop = spaceBefore;
+        }
+        finally {
+            container.remove();
+            host.remove();
+        }
+    }
+    /** A height-constrained multicol box overflows horizontally when it needs another column. */
+    columnContainerOverflows(element, dims) {
+        const host = this.document.createElement("div");
+        host.style.width = `${dims.contentWidth}pt`;
+        const clone = element.cloneNode(true);
+        host.appendChild(clone);
+        this.stagingElement.appendChild(host);
+        try {
+            if (clone.scrollWidth > clone.clientWidth + 1)
+                return true;
+            // Keep-lines paragraphs must fit as a whole. A constrained column container
+            // can report only its first partial box, even when scrollWidth still fits.
+            // Move that source paragraph to the next page before print clips its text.
+            return Array.from(clone.querySelectorAll('[data-keep-lines="true"]'))
+                .some(paragraph => paragraph.getClientRects().length > 1);
+        }
+        finally {
+            host.remove();
+        }
+    }
+    /**
+     * Reflow a final continuous column section against the actual remaining body band.
+     * A preceding title, running story or note reservation can make it shorter than the
+     * fresh-page band used while collecting source blocks. Split at source-child boundaries
+     * when the narrower band would create an extra horizontal column; the tail is reconsidered
+     * normally on the following page. No source child is duplicated or discarded.
+     */
+    reflowSequentialColumns(block, dims, availableHeightPt) {
+        if (block.element.dataset.paginationSequentialColumns !== "true"
+            || availableHeightPt <= 0)
+            return null;
+        const maximumHeight = this.smallestEffectiveContentHeight(dims, block.sectionIndex);
+        const height = Math.min(availableHeightPt, maximumHeight);
+        if (Math.abs(parseFloat(block.element.style.maxHeight) - height) < 0.01)
+            return null;
+        const children = Array.from(block.element.children);
+        const make = (slice, limit) => {
+            const container = block.element.cloneNode(false);
+            container.style.maxHeight = `${limit}pt`;
+            for (const child of slice)
+                container.appendChild(child.cloneNode(true));
+            this.liftColumnSpaceBefore(container, dims);
+            return container;
+        };
+        const whole = make(children, height);
+        if (!this.columnContainerOverflows(whole, dims)) {
+            return [this.measureElement(whole, dims, block.sectionIndex)];
+        }
+        let end = 0;
+        for (let count = 1; count < children.length; count++) {
+            this.checkpoint();
+            const candidate = make(children.slice(0, count), height);
+            if (this.columnContainerOverflows(candidate, dims))
+                break;
+            if (children[count - 1].dataset.keepWithNext !== "true")
+                end = count;
+        }
+        if (end === 0)
+            return null;
+        return [
+            this.measureElement(make(children.slice(0, end), height), dims, block.sectionIndex),
+            this.measureElement(make(children.slice(end), maximumHeight), dims, block.sectionIndex),
+        ];
+    }
     /**
      * Measures one element in the same hidden staging context used for the source blocks.
      * This is intentionally DOM-based: table row heights cannot be inferred from individual
@@ -990,13 +1264,13 @@ export class PaginationEngine {
         measurementHost.appendChild(measuredElement);
         this.stagingElement.appendChild(measurementHost);
         const rect = measuredElement.getBoundingClientRect();
-        const style = this.view.getComputedStyle(measuredElement);
+        const margins = collapsedBlockMarginsPx(this.view, measuredElement);
         const measured = {
             element,
             sectionIndex,
             heightPt: pxToPt(rect.height),
-            marginTopPt: pxToPt(parseFloat(style.marginTop) || 0),
-            marginBottomPt: pxToPt(parseFloat(style.marginBottom) || 0),
+            marginTopPt: pxToPt(margins.topPx),
+            marginBottomPt: pxToPt(margins.bottomPx),
             keepWithNext: element.dataset.keepWithNext === "true",
             keepLines: element.dataset.keepLines === "true",
             pageBreakBefore: element.dataset.pageBreakBefore === "true",
@@ -2393,6 +2667,10 @@ export class PaginationEngine {
      * Deterministic: it depends only on the section's page setup and the registry's pre-measured
      * story heights, never on the page's content, which is what keeps it lazy-loading compatible.
      */
+    /** The body height a physical page may fill: its body band less any caller-requested reduction. */
+    bodyBudgetPt(bodyHeightPt, physicalPageNumber) {
+        return Math.max(0, bodyHeightPt - (this.bodyBudgetReductionsPt[physicalPageNumber] ?? 0));
+    }
     getPageBands(dims, sectionIndex, pageInSection, displayedPageNumber) {
         const sectionHf = this.hfRegistry.get(sectionIndex);
         return resolvePageBands(dims, this.selectStoryHeight(sectionHf?.headerFirstHeight, sectionHf?.headerEvenHeight, sectionHf?.headerDefaultHeight, pageInSection, displayedPageNumber), this.selectStoryHeight(sectionHf?.footerFirstHeight, sectionHf?.footerEvenHeight, sectionHf?.footerDefaultHeight, pageInSection, displayedPageNumber));
@@ -2469,7 +2747,7 @@ export class PaginationEngine {
             return currentPhysicalNumber + physicalPage - pageNumber;
         };
         // Get effective content height for first page (accounts for header/footer sizes)
-        let { bodyHeight: effectiveContentHeight } = this.getPageBands(dimensionsFor(), pageSectionIndex, pageInSection(), displayedPageNumber());
+        let effectiveContentHeight = this.bodyBudgetPt(this.getPageBands(dimensionsFor(), pageSectionIndex, pageInSection(), displayedPageNumber()).bodyHeight, pageNumber);
         let remainingHeight = effectiveContentHeight;
         // Track the previous block's bottom margin for margin collapsing
         let prevMarginBottomPt = 0;
@@ -2501,7 +2779,7 @@ export class PaginationEngine {
         const adoptEmptyPageOwner = (owner) => {
             pageSectionIndex = owner;
             const bands = this.getPageBands(dimensionsFor(owner), owner, pageInSection(owner), displayedPageNumber(owner));
-            effectiveContentHeight = bands.bodyHeight;
+            effectiveContentHeight = this.bodyBudgetPt(bands.bodyHeight, pageNumber);
             remainingHeight = effectiveContentHeight;
         };
         const admitCurrentPage = () => {
@@ -2614,7 +2892,7 @@ export class PaginationEngine {
             }
             // Get effective content height for new page position
             const newBands = this.getPageBands(dimensionsFor(), pageSectionIndex, pageInSection(), displayedPageNumber());
-            effectiveContentHeight = newBands.bodyHeight;
+            effectiveContentHeight = this.bodyBudgetPt(newBands.bodyHeight, pageNumber);
             remainingHeight = effectiveContentHeight;
             prevMarginBottomPt = 0; // Reset margin tracking for new page
             currentFootnoteIds = []; // Reset footnotes for new page
@@ -2770,6 +3048,12 @@ export class PaginationEngine {
             // Account for margin collapsing: the gap between blocks is max(prevBottom, currTop), not sum
             const isFirstOnPage = currentContent.length === 0;
             const effectiveMarginTop = this.effectiveBlockMarginTop(block, prevMarginBottomPt, isFirstOnPage, pageInSection(block.sectionIndex));
+            const columnFragments = this.reflowSequentialColumns(block, blockDimensions, remainingHeight - currentFootnoteHeight - additionalFootnoteHeight - effectiveMarginTop);
+            if (columnFragments) {
+                blocks.splice(i, 1, ...columnFragments);
+                i--;
+                continue;
+            }
             // Visible height = top margin gap + content + footnote space
             // Note: bottom margin is NOT included in the fit check because the last block's
             // bottom margin extends beyond the content area and is clipped by overflow:hidden.
@@ -3014,12 +3298,14 @@ export class PaginationEngine {
             };
             const widthReference = this.horizontalAnchorReference(anchor.getAttribute('data-docx-anchor-width-relative') ?? 'margin', dims, pageNumber, context);
             const widthPercent = this.anchorNumber(anchor, 'width-percent');
-            if (widthPercent !== undefined) {
+            // Word supports strictly positive relative dimensions (MS-ODRAWXML 2.18.3.1/2).
+            // Zero is schema-valid but must not collapse a visible object with a stored extent.
+            if (widthPercent !== undefined && widthPercent > 0) {
                 anchor.style.width = `${widthReference.size * widthPercent / 100}pt`;
             }
             const heightReference = this.verticalAnchorReference(anchor.getAttribute('data-docx-anchor-height-relative') ?? 'margin', dims, pageNumber, context);
             const heightPercent = this.anchorNumber(anchor, 'height-percent');
-            if (heightPercent !== undefined && anchor.dataset.docxAnchorAutofit !== 'true') {
+            if (heightPercent !== undefined && heightPercent > 0 && anchor.dataset.docxAnchorAutofit !== 'true') {
                 anchor.style.height = `${heightReference.size * heightPercent / 100}pt`;
             }
             // Read the final border-box size after relative sizing and before reparenting. The stored
@@ -3031,7 +3317,17 @@ export class PaginationEngine {
             const vertical = this.verticalAnchorReference(anchor.getAttribute('data-docx-anchor-v-relative') ?? 'paragraph', dims, pageNumber, context);
             const left = this.resolveAnchorAxis(horizontal, width, anchor.getAttribute('data-docx-anchor-h-align'), this.anchorNumber(anchor, 'h-offset'), pageNumber);
             const top = this.resolveAnchorAxis(vertical, height, anchor.getAttribute('data-docx-anchor-v-align'), this.anchorNumber(anchor, 'v-offset'), pageNumber);
+            // Leaving the paragraph must not orphan it: a paragraph whose only content was this drawing
+            // renders as the drawing, and measureRenderedSource finds it through this link (issue #849).
+            const hostElement = anchor.parentElement?.closest('[data-source-anchor-id]');
+            const hostAnchorId = hostElement?.dataset.sourceAnchorId;
+            if (hostAnchorId)
+                anchor.setAttribute(DRAWING_HOST_ATTRIBUTE, hostAnchorId);
             pageBox.appendChild(anchor);
+            // A host left with nothing but its paragraph-mark line (issue #880) renders as that line plus
+            // the drawing; one with text of its own keeps measuring as its own box.
+            if (hostElement && rendersOnlyItsLine(hostElement))
+                hostElement.setAttribute(HOSTS_PROMOTED_DRAWING_ATTRIBUTE, 'true');
             anchor.style.position = 'absolute';
             anchor.style.left = `${left}pt`;
             anchor.style.top = `${top}pt`;
@@ -3325,6 +3621,13 @@ export class PaginationEngine {
                 contentArea.style.height = `${Math.max(0, contentAreaHeight - notesHeightPt)}pt`;
             }
         }
+        // Paint offsets must follow range fragmentation: positioned runs are deliberately excluded
+        // from that structural algorithm, even though these offsets leave every line box unchanged.
+        alignExactLineBaselines(contentArea);
+        const paper = pageBox.getBoundingClientRect();
+        const header = pageBox.querySelector(`.${this.cssPrefix}header`);
+        const footer = pageBox.querySelector(`.${this.cssPrefix}footer`);
+        preserveExactLineInk(contentArea, Math.max(paper.top, header?.getBoundingClientRect().bottom ?? paper.top), Math.min(paper.bottom, footer?.getBoundingClientRect().top ?? paper.bottom, notesEl?.getBoundingClientRect().top ?? paper.bottom), paper);
         return {
             pageNumber,
             sectionIndex,