Summary
Currently the pagination engine operates at the block (paragraph) level. If a paragraph is taller than a page, it overflows and gets clipped. This creates a poor user experience for documents with long paragraphs.
Proposed Solution
Implement line-level measurement and splitting:
- Line measurement: Use
getClientRects() or range-based measurement to identify individual lines within a paragraph
- Paragraph splitting: When a paragraph doesn't fit, split it at a line boundary
- Orphan/widow control: Ensure at least N lines remain on each page (configurable)
Implementation Approach
interface MeasuredLine {
startOffset: number;
endOffset: number;
height: number;
}
function measureLines(element: HTMLElement): MeasuredLine[] {
// Use Range API to measure each line
// Handle inline elements, images, etc.
}
function splitParagraph(element: HTMLElement, maxHeight: number): [HTMLElement, HTMLElement] {
// Clone and split at line boundary
}
Challenges
- Complex inline content (images, links spanning lines)
- Maintaining semantic correctness when splitting
- Performance for large documents
- RTL and vertical text layouts
Acceptance Criteria
Summary
Currently the pagination engine operates at the block (paragraph) level. If a paragraph is taller than a page, it overflows and gets clipped. This creates a poor user experience for documents with long paragraphs.
Proposed Solution
Implement line-level measurement and splitting:
getClientRects()or range-based measurement to identify individual lines within a paragraphImplementation Approach
Challenges
Acceptance Criteria