Description

Two rendering issues in paginated mode (PaginationMode.Paginated):

1. Text clipped at bottom of page

The last line of content on a page is sometimes cut off by the page-content div's overflow: hidden. The page height calculation doesn't account for all the content, leaving the final line partially or fully hidden.

Inspector details: The page-box div has a fixed height (e.g., 792pt) and the page-content div has overflow: hidden. When the content slightly exceeds the calculated page break point, the last line gets clipped rather than flowing to the next page.

Example: On page 4 of the CUAD v1 Datasheet, the line ending with "full sentence, under the instruction of 'from period to period'..." is cut off at the bottom edge.

2. Inconsistent paragraph spacing

Some paragraphs have noticeably different inter-paragraph spacing compared to the original DOCX rendering. Some paragraphs appear tightly packed while adjacent ones have larger gaps. This may be related to how paragraph margin-top/margin-bottom values interact with the pagination engine's page break calculations.

Reproduction

import { convertDocxToHtml, PaginationMode } from "docxodus";
import { PaginatedDocument } from "docxodus/react";

const html = await convertDocxToHtml(docxBytes, {
  paginationMode: PaginationMode.Paginated,
});

// Render with PaginatedDocument
<PaginatedDocument html={html} scale={1.0} />

Test document: CUAD v1 Datasheet (Datasheet_for_Contract_Understanding_Atticus_Dataset_(CUAD)_v1.docx)

Both issues are visible in react-docxodus-viewer as well, so this is in the WASM pagination engine, not the React component.

Screenshots

Page clipping: Last line cut off at bottom of page 4
Paragraph spacing: Inconsistent gaps between paragraphs throughout the document

Environment

• docxodus: 5.5.2
• PaginationMode: Paginated
• Scale: 1.0 (100%)