docxodus 9.7.0 → 9.9.0

package/dist/pagination.bundle.js

@@ -63,7 +63,7 @@ var DocxodusPagination = (() => {
   var DEFAULT_PAGE_WIDTH = 612;
   var DEFAULT_PAGE_HEIGHT = 792;
   var DEFAULT_MARGIN = 72;
-  var DEFAULT_HEADER_FOOTER_HEIGHT = 36;
+  var DEFAULT_HEADER_FOOTER_DISTANCE = 36;
   function pxToPt(px) {
     return px * 0.75;
   }
@@ -79,8 +79,8 @@ var DocxodusPagination = (() => {
     const marginRight = parseFloat(section.dataset.marginRight || "") || DEFAULT_MARGIN;
     const marginBottom = parseFloat(section.dataset.marginBottom || "") || DEFAULT_MARGIN;
     const marginLeft = parseFloat(section.dataset.marginLeft || "") || DEFAULT_MARGIN;
-    const headerHeight = parseFloat(section.dataset.headerHeight || "") || DEFAULT_HEADER_FOOTER_HEIGHT;
-    const footerHeight = parseFloat(section.dataset.footerHeight || "") || DEFAULT_HEADER_FOOTER_HEIGHT;
+    const headerDistance = parseFloat(section.dataset.headerHeight || "") || DEFAULT_HEADER_FOOTER_DISTANCE;
+    const footerDistance = parseFloat(section.dataset.footerHeight || "") || DEFAULT_HEADER_FOOTER_DISTANCE;
     return {
       pageWidth,
       pageHeight,
@@ -90,12 +90,44 @@ var DocxodusPagination = (() => {
       marginRight,
       marginBottom,
       marginLeft,
-      headerHeight,
-      footerHeight
+      headerDistance,
+      footerDistance,
+      headerHeight: headerDistance,
+      footerHeight: footerDistance
+    };
+  }
+  var MIN_BODY_BAND_PT = 12;
+  function resolvePageBands(dims, headerContentHeight, footerContentHeight) {
+    const headerTop = dims.headerDistance;
+    const footerBottom = dims.pageHeight - dims.footerDistance;
+    const headerReach = headerContentHeight > 0 ? headerTop + headerContentHeight : 0;
+    const footerReach = footerContentHeight > 0 ? footerBottom - footerContentHeight : dims.pageHeight;
+    let bodyTop = Math.max(dims.marginTop, headerReach);
+    let bodyBottom = Math.min(dims.pageHeight - dims.marginBottom, footerReach);
+    const shortfall = MIN_BODY_BAND_PT - (bodyBottom - bodyTop);
+    if (shortfall > 0) {
+      const headerGrowth = bodyTop - dims.marginTop;
+      const footerGrowth = dims.pageHeight - dims.marginBottom - bodyBottom;
+      const growth = headerGrowth + footerGrowth;
+      if (growth > 0) {
+        bodyTop -= shortfall * headerGrowth / growth;
+        bodyBottom += shortfall * footerGrowth / growth;
+      }
+    }
+    return {
+      headerTop,
+      headerHeight: Math.max(0, Math.min(headerContentHeight, bodyTop - headerTop)),
+      bodyTop,
+      bodyHeight: Math.max(0, bodyBottom - bodyTop),
+      footerTop: footerBottom - Math.max(0, Math.min(footerContentHeight, footerBottom - bodyBottom)),
+      footerHeight: Math.max(0, Math.min(footerContentHeight, footerBottom - bodyBottom))
     };
   }
 
   // src/pagination.ts
+  function samePageBox(a, b) {
+    return a.pageWidth === b.pageWidth && a.pageHeight === b.pageHeight && a.marginTop === b.marginTop && a.marginRight === b.marginRight && a.marginBottom === b.marginBottom && a.marginLeft === b.marginLeft;
+  }
   var MAX_FOOTNOTE_AREA_RATIO = 0.6;
   var MIN_BODY_CONTENT_HEIGHT = 72;
   var PaginationEngine = class {
@@ -141,16 +173,43 @@ var DocxodusPagination = (() => {
       );
       this.pageNumbering = this.parsePageNumbering(sections);
       const sectionsToProcess = sections.length > 0 ? Array.from(sections) : [this.stagingElement];
+      const runs = [];
       for (const section of sectionsToProcess) {
-        const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
         const dims = parseSectionDimensions(section);
+        const previous = runs[runs.length - 1];
+        if (previous && section.dataset.sectionType === "continuous" && samePageBox(previous.dims, dims)) {
+          previous.sections.push(section);
+        } else {
+          runs.push({
+            sections: [section],
+            sectionIndex: parseInt(section.dataset.sectionIndex || "0", 10),
+            dims
+          });
+        }
+      }
+      for (const run of runs) {
         this.stagingElement.style.visibility = "hidden";
         this.stagingElement.style.position = "absolute";
         this.stagingElement.style.left = "-9999px";
         this.stagingElement.style.display = "block";
-        section.style.width = `${dims.contentWidth}pt`;
-        const blocks = this.measureBlocks(section, dims);
-        const sectionPages = this.flowToPages(blocks, dims, pageNumber, sectionIndex);
+        const blocks = [];
+        for (const section of run.sections) {
+          section.style.width = `${run.dims.contentWidth}pt`;
+          const columnCount = parseInt(section.dataset.cols || "1", 10);
+          if (columnCount > 1) {
+            const gap = parseFloat(section.dataset.colGap || "");
+            blocks.push(...this.buildColumnBlocks(
+              section,
+              run.dims,
+              run.sectionIndex,
+              columnCount,
+              Number.isFinite(gap) ? gap : 36
+            ));
+          } else {
+            blocks.push(...this.measureBlocks(section, run.dims));
+          }
+        }
+        const sectionPages = this.flowToPages(blocks, run.dims, pageNumber, run.sectionIndex);
         pages.push(...sectionPages);
         pageNumber += sectionPages.length;
       }
@@ -239,8 +298,67 @@ var DocxodusPagination = (() => {
           keepWithNext: child.dataset.keepWithNext === "true",
           keepLines: child.dataset.keepLines === "true",
           pageBreakBefore: child.dataset.pageBreakBefore === "true",
-          isPageBreak
+          isPageBreak,
+          isWordParagraph: this.isWordParagraphElement(child)
+        });
+      }
+      return blocks;
+    }
+    /**
+     * 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
+     * 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
+     * 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) {
+      const children = Array.from(section.children);
+      const blocks = [];
+      const maxFragmentHeight = this.smallestEffectiveContentHeight(dims, sectionIndex);
+      const isBreak = (child) => child.dataset.pageBreak === "true" || child.classList.contains(`${this.cssPrefix}break`);
+      const makeContainer = (slice) => {
+        const container = document.createElement("div");
+        container.style.columnCount = String(columnCount);
+        container.style.columnGap = `${columnGapPt}pt`;
+        for (const child of slice) {
+          container.appendChild(child.cloneNode(true));
+        }
+        return container;
+      };
+      let start = 0;
+      while (start < children.length) {
+        if (isBreak(children[start])) {
+          blocks.push(this.measureElement(children[start], dims));
+          start++;
+          continue;
+        }
+        let end = start + 1;
+        let container = makeContainer(children.slice(start, end));
+        let measured = this.measureElement(container, dims);
+        while (end < children.length && !isBreak(children[end])) {
+          const candidate = makeContainer(children.slice(start, end + 1));
+          const candidateMeasured = this.measureElement(candidate, dims);
+          if (candidateMeasured.heightPt > maxFragmentHeight) break;
+          container = candidate;
+          measured = candidateMeasured;
+          end++;
+        }
+        blocks.push({
+          element: container,
+          heightPt: measured.heightPt,
+          marginTopPt: measured.marginTopPt,
+          marginBottomPt: measured.marginBottomPt,
+          keepWithNext: false,
+          keepLines: false,
+          pageBreakBefore: false,
+          isPageBreak: false,
+          isWordParagraph: false
         });
+        start = end;
       }
       return blocks;
     }
@@ -268,7 +386,8 @@ var DocxodusPagination = (() => {
         keepWithNext: element.dataset.keepWithNext === "true",
         keepLines: element.dataset.keepLines === "true",
         pageBreakBefore: element.dataset.pageBreakBefore === "true",
-        isPageBreak: element.dataset.pageBreak === "true" || element.classList.contains(`${this.cssPrefix}break`)
+        isPageBreak: element.dataset.pageBreak === "true" || element.classList.contains(`${this.cssPrefix}break`),
+        isWordParagraph: this.isWordParagraphElement(element)
       };
       this.stagingElement.removeChild(measurementHost);
       return measured;
@@ -300,10 +419,15 @@ var DocxodusPagination = (() => {
      * collapsed-margin rules as normal block placement. The trailing margin is
      * intentionally excluded, matching the individual block fit check.
      */
-    measureKeepWithNextChainBodyHeight(chain, previousMarginBottomPt, isFirstOnPage) {
+    measureKeepWithNextChainBodyHeight(chain, previousMarginBottomPt, isFirstOnPage, pageInSection) {
       const firstBlock = chain[0];
       if (!firstBlock) return 0;
-      const firstMarginTop = isFirstOnPage ? firstBlock.marginTopPt : Math.max(firstBlock.marginTopPt, previousMarginBottomPt) - previousMarginBottomPt;
+      const firstMarginTop = this.effectiveBlockMarginTop(
+        firstBlock,
+        previousMarginBottomPt,
+        isFirstOnPage,
+        pageInSection
+      );
       let bodyHeight = firstMarginTop + firstBlock.heightPt;
       for (let index = 1; index < chain.length; index++) {
         const previousBlock = chain[index - 1];
@@ -312,6 +436,35 @@ var DocxodusPagination = (() => {
       }
       return bodyHeight;
     }
+    /** Word paragraphs render as `p`, or as `h1`–`h6` when their style has an outline level. */
+    isWordParagraphElement(element) {
+      return element.tagName === "P" || /^H[1-6]$/.test(element.tagName);
+    }
+    shouldSuppressPageTopSpacing(block, isFirstOnPage, pageInSection) {
+      return isFirstOnPage && pageInSection > 1 && block.isWordParagraph === true;
+    }
+    /**
+     * Resolves the part of a block's top margin that consumes the current page.
+     *
+     * In Word's native DOCX layout, paragraph space-before is suppressed when a paragraph is the
+     * first body block on a later page of the SAME section. The first page of a document/section is
+     * the exception and keeps its spacing. Tables and other block margins are not paragraph spacing,
+     * so they continue to use the ordinary CSS collapsing rule.
+     */
+    effectiveBlockMarginTop(block, previousMarginBottomPt, isFirstOnPage, pageInSection) {
+      if (this.shouldSuppressPageTopSpacing(block, isFirstOnPage, pageInSection)) {
+        return 0;
+      }
+      return isFirstOnPage ? block.marginTopPt : Math.max(block.marginTopPt, previousMarginBottomPt) - previousMarginBottomPt;
+    }
+    /** Clone a source block with the same page-top spacing decision used by the height budget. */
+    cloneBlockForPage(block, isFirstOnPage, pageInSection) {
+      const clone = block.element.cloneNode(true);
+      if (this.shouldSuppressPageTopSpacing(block, isFirstOnPage, pageInSection)) {
+        clone.style.setProperty("margin-top", "0", "important");
+      }
+      return clone;
+    }
     /**
      * Finds footnote references introduced by a sequence of blocks, preserving
      * document order and excluding references already assigned to the page.
@@ -336,9 +489,9 @@ var DocxodusPagination = (() => {
      */
     smallestEffectiveContentHeight(dims, sectionIndex) {
       return Math.min(
-        this.getEffectiveHeights(dims, sectionIndex, 1, 1).contentHeight,
-        this.getEffectiveHeights(dims, sectionIndex, 2, 1).contentHeight,
-        this.getEffectiveHeights(dims, sectionIndex, 2, 2).contentHeight
+        this.getPageBands(dims, sectionIndex, 1, 1).bodyHeight,
+        this.getPageBands(dims, sectionIndex, 2, 1).bodyHeight,
+        this.getPageBands(dims, sectionIndex, 2, 2).bodyHeight
       );
     }
     /**
@@ -862,7 +1015,7 @@ var DocxodusPagination = (() => {
     /**
      * Adds footnotes to a page container, including continuation content.
      */
-    addPageFootnotes(pageBox, footnoteIds, dims, footnoteHeight, continuation, partialFootnotes) {
+    addPageFootnotes(pageBox, footnoteIds, dims, bands, footnoteHeight, continuation, partialFootnotes) {
       const hasContinuation = continuation && continuation.remainingElements.length > 0;
       if (footnoteIds.length === 0 && !hasContinuation) {
         return;
@@ -873,12 +1026,12 @@ var DocxodusPagination = (() => {
       const partialFootnoteIds = new Set(partialFootnotes?.map((p) => p.footnoteId) || []);
       const maxFootnoteHeight = Math.min(
         footnoteHeight,
-        dims.contentHeight * MAX_FOOTNOTE_AREA_RATIO
+        bands.bodyHeight * MAX_FOOTNOTE_AREA_RATIO
       );
       const footnotesDiv = document.createElement("div");
       footnotesDiv.className = `${this.cssPrefix}footnotes`;
       footnotesDiv.style.position = "absolute";
-      footnotesDiv.style.bottom = `${dims.marginBottom}pt`;
+      footnotesDiv.style.bottom = `${dims.pageHeight - (bands.bodyTop + bands.bodyHeight)}pt`;
       footnotesDiv.style.left = `${dims.marginLeft}pt`;
       footnotesDiv.style.width = `${dims.contentWidth}pt`;
       footnotesDiv.style.boxSizing = "border-box";
@@ -952,50 +1105,51 @@ var DocxodusPagination = (() => {
       return sectionHf.footerDefault;
     }
     /**
-     * Computes effective header, footer, and content heights for a specific page position.
-     * Uses pre-measured header/footer heights from the registry.
-     * This method is deterministic - same inputs always produce same outputs.
-     * This enables lazy loading compatibility since available height can be computed
-     * for any page position without knowing the page's content.
+     * The header, body, and footer bands for one page position.
+     *
+     * The single owner of "where does anything sit vertically on this page" — placement in
+     * {@link createPage}, the body budget the flow loop spends, and the note area's anchor all
+     * read it, so those three cannot disagree about where the body ends.
+     *
+     * 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.
      */
-    getEffectiveHeights(dims, sectionIndex, pageInSection, globalPageNumber) {
+    getPageBands(dims, sectionIndex, pageInSection, globalPageNumber) {
       const sectionHf = this.hfRegistry.get(sectionIndex);
-      let headerHeight = dims.marginTop;
-      if (sectionHf) {
-        let measuredHeaderHeight;
-        if (pageInSection === 1 && sectionHf.headerFirstHeight != null) {
-          measuredHeaderHeight = sectionHf.headerFirstHeight;
-        } else if (globalPageNumber % 2 === 0 && sectionHf.headerEvenHeight != null) {
-          measuredHeaderHeight = sectionHf.headerEvenHeight;
-        } else if (sectionHf.headerDefaultHeight != null) {
-          measuredHeaderHeight = sectionHf.headerDefaultHeight;
-        }
-        if (measuredHeaderHeight != null) {
-          headerHeight = Math.max(dims.marginTop, measuredHeaderHeight);
-        }
-      }
-      let footerHeight = dims.marginBottom;
-      if (sectionHf) {
-        let measuredFooterHeight;
-        if (pageInSection === 1 && sectionHf.footerFirstHeight != null) {
-          measuredFooterHeight = sectionHf.footerFirstHeight;
-        } else if (globalPageNumber % 2 === 0 && sectionHf.footerEvenHeight != null) {
-          measuredFooterHeight = sectionHf.footerEvenHeight;
-        } else if (sectionHf.footerDefaultHeight != null) {
-          measuredFooterHeight = sectionHf.footerDefaultHeight;
-        }
-        if (measuredFooterHeight != null) {
-          footerHeight = Math.max(dims.marginBottom, measuredFooterHeight);
-        }
-      }
-      const headerExpansion = headerHeight - dims.marginTop;
-      const footerExpansion = footerHeight - dims.marginBottom;
-      const contentHeight = dims.contentHeight - headerExpansion - footerExpansion;
-      return { headerHeight, footerHeight, contentHeight };
+      return resolvePageBands(
+        dims,
+        this.selectStoryHeight(
+          sectionHf?.headerFirstHeight,
+          sectionHf?.headerEvenHeight,
+          sectionHf?.headerDefaultHeight,
+          pageInSection,
+          globalPageNumber
+        ),
+        this.selectStoryHeight(
+          sectionHf?.footerFirstHeight,
+          sectionHf?.footerEvenHeight,
+          sectionHf?.footerDefaultHeight,
+          pageInSection,
+          globalPageNumber
+        )
+      );
+    }
+    /**
+     * The measured height of the running story this page position selects, mirroring
+     * {@link selectHeader}/{@link selectFooter}. Zero when the page has no such story.
+     */
+    selectStoryHeight(first, even, fallback, pageInSection, globalPageNumber) {
+      if (pageInSection === 1 && first != null) return first;
+      if (globalPageNumber % 2 === 0 && even != null) return even;
+      return fallback ?? 0;
     }
     /**
      * Measures the content height of a header or footer element.
-     * This is needed because headers/footers can contain more content than fits in the margin area.
+     *
+     * This is what tells {@link resolvePageBands} whether the story stays inside its margin or
+     * pushes the body, so it must measure the story ALONE — any padding added here would have to
+     * be added to the rendered band too, and the two drifting apart is exactly how a header
+     * silently starts overlapping body text.
      */
     measureHeaderFooterHeight(source, contentWidth) {
       const measureContainer = document.createElement("div");
@@ -1003,7 +1157,6 @@ var DocxodusPagination = (() => {
       measureContainer.style.visibility = "hidden";
       measureContainer.style.width = `${contentWidth}pt`;
       measureContainer.style.left = "-9999px";
-      measureContainer.style.paddingBottom = "4pt";
       for (const child of Array.from(source.childNodes)) {
         measureContainer.appendChild(child.cloneNode(true));
       }
@@ -1023,7 +1176,7 @@ var DocxodusPagination = (() => {
       let currentContent = [];
       let pageNumber = startPageNumber;
       let pageInSection = 1;
-      let { contentHeight: effectiveContentHeight } = this.getEffectiveHeights(
+      let { bodyHeight: effectiveContentHeight } = this.getPageBands(
         dims,
         sectionIndex,
         pageInSection,
@@ -1058,8 +1211,8 @@ var DocxodusPagination = (() => {
         pageNumber++;
         pageInSection++;
         currentContent = [];
-        const newHeights = this.getEffectiveHeights(dims, sectionIndex, pageInSection, pageNumber);
-        effectiveContentHeight = newHeights.contentHeight;
+        const newBands = this.getPageBands(dims, sectionIndex, pageInSection, pageNumber);
+        effectiveContentHeight = newBands.bodyHeight;
         remainingHeight = effectiveContentHeight;
         prevMarginBottomPt = 0;
         currentFootnoteIds = [];
@@ -1117,11 +1270,12 @@ var DocxodusPagination = (() => {
             const currentChainHeight = this.measureKeepWithNextChainBodyHeight(
               keepChain,
               prevMarginBottomPt,
-              currentContent.length === 0
+              currentContent.length === 0,
+              pageInSection
             ) + additionalChainFootnoteHeight;
             const currentAvailableHeight = remainingHeight - currentFootnoteHeight;
             if (currentChainHeight > currentAvailableHeight) {
-              const nextPageHeights = this.getEffectiveHeights(
+              const nextPageBands = this.getPageBands(
                 dims,
                 sectionIndex,
                 pageInSection + 1,
@@ -1130,14 +1284,15 @@ var DocxodusPagination = (() => {
               const freshChainBodyHeight = this.measureKeepWithNextChainBodyHeight(
                 keepChain,
                 0,
-                true
+                true,
+                pageInSection + 1
               );
               const freshChainFootnoteHeight = this.measureFootnotesHeight(
                 newChainFootnoteIds,
                 dims.contentWidth,
                 nextPageContinuation
               );
-              if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageHeights.contentHeight) {
+              if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageBands.bodyHeight) {
                 finishPage();
               }
             }
@@ -1156,10 +1311,12 @@ var DocxodusPagination = (() => {
           additionalFootnoteHeight = totalFootnoteHeight - currentFootnoteHeight;
         }
         const isFirstOnPage = currentContent.length === 0;
-        let effectiveMarginTop = block.marginTopPt;
-        if (!isFirstOnPage) {
-          effectiveMarginTop = Math.max(block.marginTopPt, prevMarginBottomPt) - prevMarginBottomPt;
-        }
+        const effectiveMarginTop = this.effectiveBlockMarginTop(
+          block,
+          prevMarginBottomPt,
+          isFirstOnPage,
+          pageInSection
+        );
         const blockSpace = effectiveMarginTop + block.heightPt + additionalFootnoteHeight;
         const effectiveRemainingHeight = remainingHeight - currentFootnoteHeight;
         const bodyContentUsed = effectiveContentHeight - remainingHeight;
@@ -1179,19 +1336,19 @@ var DocxodusPagination = (() => {
           }
         }
         if (blockSpace <= effectiveRemainingHeight) {
-          currentContent.push(block.element.cloneNode(true));
+          currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection));
           remainingHeight -= effectiveMarginTop + block.heightPt + block.marginBottomPt;
           prevMarginBottomPt = block.marginBottomPt;
           if (newFootnoteIds.length > 0) {
             currentFootnoteIds.push(...newFootnoteIds);
             currentFootnoteHeight += additionalFootnoteHeight;
           }
-        } else if (block.heightPt + block.marginTopPt <= effectiveContentHeight) {
+        } else if (block.heightPt + this.effectiveBlockMarginTop(block, 0, true, pageInSection + 1) <= effectiveContentHeight) {
           const blockSpaceWithoutFootnotes = effectiveMarginTop + block.heightPt;
           const minBodySpaceNeeded = bodyContentUsed + blockSpaceWithoutFootnotes + MIN_BODY_CONTENT_HEIGHT;
           const canExpandFootnotes = minBodySpaceNeeded <= effectiveContentHeight;
           if (newFootnoteIds.length > 0 && blockSpaceWithoutFootnotes <= effectiveRemainingHeight) {
-            currentContent.push(block.element.cloneNode(true));
+            currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection));
             remainingHeight -= effectiveMarginTop + block.heightPt + block.marginBottomPt;
             prevMarginBottomPt = block.marginBottomPt;
             const availableForFootnotes = Math.min(
@@ -1238,7 +1395,7 @@ var DocxodusPagination = (() => {
             const expandedFootnoteSpace = Math.min(maxFootnoteArea, additionalFootnoteHeight + currentFootnoteHeight);
             const bodySpaceAfterExpansion = effectiveContentHeight - expandedFootnoteSpace;
             if (blockSpaceWithoutFootnotes <= bodySpaceAfterExpansion - bodyContentUsed) {
-              currentContent.push(block.element.cloneNode(true));
+              currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection));
               remainingHeight = bodySpaceAfterExpansion - bodyContentUsed - blockSpaceWithoutFootnotes;
               prevMarginBottomPt = block.marginBottomPt;
               currentFootnoteIds.push(...newFootnoteIds);
@@ -1246,8 +1403,14 @@ var DocxodusPagination = (() => {
             } else {
               finishPage();
               const newPageFootnoteHeight = allBlockFootnoteIds.length > 0 ? this.measureFootnotesHeight(allBlockFootnoteIds, dims.contentWidth, currentContinuation) : currentContinuation ? this.measureContinuationHeight(currentContinuation, dims.contentWidth) : 0;
-              const newPageSpace = block.marginTopPt + block.heightPt + block.marginBottomPt;
-              currentContent.push(block.element.cloneNode(true));
+              const newPageMarginTop = this.effectiveBlockMarginTop(
+                block,
+                0,
+                true,
+                pageInSection
+              );
+              const newPageSpace = newPageMarginTop + block.heightPt + block.marginBottomPt;
+              currentContent.push(this.cloneBlockForPage(block, true, pageInSection));
               remainingHeight = effectiveContentHeight - newPageSpace;
               prevMarginBottomPt = block.marginBottomPt;
               currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
@@ -1256,8 +1419,14 @@ var DocxodusPagination = (() => {
           } else {
             finishPage();
             const newPageFootnoteHeight = allBlockFootnoteIds.length > 0 ? this.measureFootnotesHeight(allBlockFootnoteIds, dims.contentWidth, currentContinuation) : currentContinuation ? this.measureContinuationHeight(currentContinuation, dims.contentWidth) : 0;
-            const newPageSpace = block.marginTopPt + block.heightPt + block.marginBottomPt;
-            currentContent.push(block.element.cloneNode(true));
+            const newPageMarginTop = this.effectiveBlockMarginTop(
+              block,
+              0,
+              true,
+              pageInSection
+            );
+            const newPageSpace = newPageMarginTop + block.heightPt + block.marginBottomPt;
+            currentContent.push(this.cloneBlockForPage(block, true, pageInSection));
             remainingHeight = effectiveContentHeight - newPageSpace;
             prevMarginBottomPt = block.marginBottomPt;
             currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
@@ -1276,7 +1445,7 @@ var DocxodusPagination = (() => {
           if (currentContent.length > 0) {
             finishPage();
           }
-          currentContent.push(block.element.cloneNode(true));
+          currentContent.push(this.cloneBlockForPage(block, true, pageInSection));
           currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
           finishPage();
         }
@@ -1306,6 +1475,161 @@ var DocxodusPagination = (() => {
         if (el.getAttribute("contenteditable") !== null) el.setAttribute("contenteditable", "false");
       }
     }
+    /**
+     * Resolves floating DrawingML objects after their anchor paragraphs have landed on a page.
+     *
+     * The converter deliberately carries the OOXML bases and offsets as data instead of flattening
+     * them into CSS: page/margin/column bases belong to the page, while paragraph/line/character
+     * bases belong to the laid-out anchor. Once both coordinate systems exist, promote the object
+     * from the clipped text column into the page box and position it in one shared point space.
+     */
+    positionDrawingAnchors(pageBox, contentArea, dims, pageNumber) {
+      const anchors = Array.from(
+        contentArea.querySelectorAll('[data-docx-drawing-anchor="true"]')
+      );
+      if (anchors.length === 0) return;
+      const pageRect = pageBox.getBoundingClientRect();
+      const pixelsPerPoint = pageRect.width / dims.pageWidth;
+      if (!(pixelsPerPoint > 0)) return;
+      for (const anchor of anchors) {
+        const staticRect = anchor.getBoundingClientRect();
+        const paragraph = anchor.closest("p, h1, h2, h3, h4, h5, h6");
+        const paragraphRect = paragraph?.getBoundingClientRect() ?? staticRect;
+        const toPageX = (x) => (x - pageRect.left) / pixelsPerPoint;
+        const toPageY = (y) => (y - pageRect.top) / pixelsPerPoint;
+        const context = {
+          staticLeft: toPageX(staticRect.left),
+          staticTop: toPageY(staticRect.top),
+          lineHeight: paragraph ? (parseFloat(getComputedStyle(paragraph).lineHeight) || staticRect.height) / pixelsPerPoint : staticRect.height / pixelsPerPoint,
+          paragraphLeft: toPageX(paragraphRect.left),
+          paragraphTop: toPageY(paragraphRect.top),
+          paragraphWidth: paragraphRect.width / pixelsPerPoint,
+          paragraphHeight: paragraphRect.height / pixelsPerPoint
+        };
+        const widthReference = this.horizontalAnchorReference(
+          anchor.getAttribute("data-docx-anchor-width-relative") ?? "margin",
+          dims,
+          pageNumber,
+          context
+        );
+        const widthPercent = this.anchorNumber(anchor, "width-percent");
+        if (widthPercent !== void 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 !== void 0 && anchor.dataset.docxAnchorAutofit !== "true") {
+          anchor.style.height = `${heightReference.size * heightPercent / 100}pt`;
+        }
+        const sizedRect = anchor.getBoundingClientRect();
+        const width = sizedRect.width / pixelsPerPoint;
+        const height = sizedRect.height / pixelsPerPoint;
+        const horizontal = this.horizontalAnchorReference(
+          anchor.getAttribute("data-docx-anchor-h-relative") ?? "column",
+          dims,
+          pageNumber,
+          context
+        );
+        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
+        );
+        pageBox.appendChild(anchor);
+        anchor.style.position = "absolute";
+        anchor.style.left = `${left}pt`;
+        anchor.style.top = `${top}pt`;
+        anchor.style.margin = "0";
+      }
+    }
+    anchorNumber(anchor, suffix) {
+      const raw = anchor.getAttribute(`data-docx-anchor-${suffix}`);
+      if (raw === null) return void 0;
+      const value = Number(raw);
+      return Number.isFinite(value) ? value : void 0;
+    }
+    horizontalAnchorReference(relativeFrom, dims, pageNumber, context) {
+      const leftMargin = { start: 0, size: dims.marginLeft };
+      const rightMargin = {
+        start: dims.marginLeft + dims.contentWidth,
+        size: dims.marginRight
+      };
+      switch (relativeFrom) {
+        case "page":
+          return { start: 0, size: dims.pageWidth };
+        case "character":
+          return { start: context.staticLeft, size: 0 };
+        case "leftMargin":
+          return leftMargin;
+        case "rightMargin":
+          return rightMargin;
+        case "insideMargin":
+          return pageNumber % 2 === 1 ? leftMargin : rightMargin;
+        case "outsideMargin":
+          return pageNumber % 2 === 1 ? rightMargin : leftMargin;
+        case "paragraph":
+          return { start: context.paragraphLeft, size: context.paragraphWidth };
+        case "column":
+        case "margin":
+        default:
+          return { start: dims.marginLeft, size: dims.contentWidth };
+      }
+    }
+    verticalAnchorReference(relativeFrom, dims, pageNumber, context) {
+      const topMargin = { start: 0, size: dims.marginTop };
+      const bottomMargin = {
+        start: dims.marginTop + dims.contentHeight,
+        size: dims.marginBottom
+      };
+      switch (relativeFrom) {
+        case "page":
+          return { start: 0, size: dims.pageHeight };
+        case "paragraph":
+          return { start: context.paragraphTop, size: context.paragraphHeight };
+        case "line":
+          return { start: context.staticTop, size: context.lineHeight };
+        case "topMargin":
+          return topMargin;
+        case "bottomMargin":
+          return bottomMargin;
+        case "insideMargin":
+          return pageNumber % 2 === 1 ? topMargin : bottomMargin;
+        case "outsideMargin":
+          return pageNumber % 2 === 1 ? bottomMargin : topMargin;
+        case "margin":
+        default:
+          return { start: dims.marginTop, size: dims.contentHeight };
+      }
+    }
+    resolveAnchorAxis(reference, objectSize, alignment, offset, pageNumber) {
+      if (offset !== void 0) return reference.start + offset;
+      let fraction = 0;
+      if (alignment === "center") fraction = 0.5;
+      else if (alignment === "right" || alignment === "bottom") fraction = 1;
+      else if (alignment === "inside") fraction = pageNumber % 2 === 1 ? 0 : 1;
+      else if (alignment === "outside") fraction = pageNumber % 2 === 1 ? 1 : 0;
+      return reference.start + (reference.size - objectSize) * fraction;
+    }
     /**
      * Creates a page container element.
      */
@@ -1332,22 +1656,22 @@ var DocxodusPagination = (() => {
       pageBox.dataset.pageNumber = String(pageNumber);
       pageBox.dataset.sectionIndex = String(sectionIndex);
       pageBox.dataset.pageInSection = String(pageInSection);
-      const effectiveHeights = this.getEffectiveHeights(dims, sectionIndex, pageInSection, pageNumber);
+      const bands = this.getPageBands(dims, sectionIndex, pageInSection, pageNumber);
       const headerSource = this.selectHeader(sectionIndex, pageInSection, pageNumber);
       if (headerSource) {
         const headerDiv = document.createElement("div");
         headerDiv.className = `${this.cssPrefix}header`;
         headerDiv.style.position = "absolute";
-        headerDiv.style.top = "0";
+        headerDiv.style.top = `${bands.headerTop}pt`;
+        headerDiv.style.bottom = "auto";
         headerDiv.style.left = `${dims.marginLeft}pt`;
         headerDiv.style.width = `${dims.contentWidth}pt`;
-        headerDiv.style.height = `${effectiveHeights.headerHeight}pt`;
+        headerDiv.style.height = `${bands.headerHeight}pt`;
         headerDiv.style.overflow = "hidden";
         headerDiv.style.boxSizing = "border-box";
         headerDiv.style.display = "flex";
         headerDiv.style.flexDirection = "column";
-        headerDiv.style.justifyContent = "flex-end";
-        headerDiv.style.paddingBottom = "4pt";
+        headerDiv.style.justifyContent = "flex-start";
         for (const child of Array.from(headerSource.childNodes)) {
           const clonedheaderDiv = child.cloneNode(true);
           if (clonedheaderDiv.nodeType === 1) this.makeClonedStoryInert(clonedheaderDiv);
@@ -1355,8 +1679,8 @@ var DocxodusPagination = (() => {
         }
         pageBox.appendChild(headerDiv);
       }
-      const contentAreaTop = effectiveHeights.headerHeight;
-      const contentAreaHeight = effectiveHeights.contentHeight;
+      const contentAreaTop = bands.bodyTop;
+      const contentAreaHeight = bands.bodyHeight;
       const contentArea = document.createElement("div");
       contentArea.className = `${this.cssPrefix}content`;
       contentArea.style.position = "absolute";
@@ -1371,23 +1695,23 @@ var DocxodusPagination = (() => {
       pageBox.appendChild(contentArea);
       const hasContinuation = continuation && continuation.remainingElements.length > 0;
       if (footnoteIds.length > 0 || hasContinuation) {
-        this.addPageFootnotes(pageBox, footnoteIds, dims, footnoteHeight, continuation, partialFootnotes);
+        this.addPageFootnotes(pageBox, footnoteIds, dims, bands, footnoteHeight, continuation, partialFootnotes);
       }
       const footerSource = this.selectFooter(sectionIndex, pageInSection, pageNumber);
       if (footerSource) {
         const footerDiv = document.createElement("div");
         footerDiv.className = `${this.cssPrefix}footer`;
         footerDiv.style.position = "absolute";
-        footerDiv.style.bottom = "0";
+        footerDiv.style.top = "auto";
+        footerDiv.style.bottom = `${dims.footerDistance}pt`;
         footerDiv.style.left = `${dims.marginLeft}pt`;
         footerDiv.style.width = `${dims.contentWidth}pt`;
-        footerDiv.style.height = `${effectiveHeights.footerHeight}pt`;
+        footerDiv.style.height = `${bands.footerHeight}pt`;
         footerDiv.style.overflow = "hidden";
         footerDiv.style.boxSizing = "border-box";
         footerDiv.style.display = "flex";
         footerDiv.style.flexDirection = "column";
-        footerDiv.style.justifyContent = "flex-start";
-        footerDiv.style.paddingTop = "4pt";
+        footerDiv.style.justifyContent = "flex-end";
         for (const child of Array.from(footerSource.childNodes)) {
           const clonedfooterDiv = child.cloneNode(true);
           if (clonedfooterDiv.nodeType === 1) this.makeClonedStoryInert(clonedfooterDiv);
@@ -1402,6 +1726,7 @@ var DocxodusPagination = (() => {
         pageBox.appendChild(pageNum);
       }
       this.containerElement.appendChild(pageBox);
+      this.positionDrawingAnchors(pageBox, contentArea, dims, pageNumber);
       const notesEl = pageBox.querySelector(`.${this.cssPrefix}footnotes`);
       if (notesEl) {
         const notesHeightPt = pxToPt(notesEl.getBoundingClientRect().height);