Why PDF-to-HTML pipelines produce nested wrapper divs and how to flatten them

TLDR

PDF extraction engines generate deeply nested HTML structures (.pdf-region > .f0.ta-l > p) because each layer captures distinct positional or typographic metadata. Post-processing the Web Worker HTML stream extracts inner paragraph content and consolidates metadata attributes directly onto a single <p class="f0 ta-l pdf-paragraph"> element. This preserves layout tooling data while producing clean, reflowable DOM output compatible with modern editor surfaces.

DOM Pipeline Stage	Wrapper Structure	Editor Accessibility
Worker Raw Output	3 to 5 Nested Layers (.pdf-region > .f0.ta-l > p)	Poor (Difficult to style or edit)
Post-Processed HTML	Single Flat Semantic Tag (<p class="f0 ta-l pdf-paragraph">)	High (Tailwind & Contenteditable ready)

---

Technical DOM flattening post-processor

// Post-process rich Worker HTML by collapsing font/alignment wrapper divs into paragraph tags
export function flattenExtractedParagraphDOM(rawWorkerHtml) {
  const paragraphRegex = /<p>([\s\S]*?)<\/p>/g;
  const extractedBlocks = [];
  let match;
while ((match = paragraphRegex.exec(rawWorkerHtml)) !== null) {     extractedBlocks.push(match[1]);   }
if (extractedBlocks.length === 0) return rawWorkerHtml;
// Consolidate font (.fN) and alignment (.ta-x) classes directly onto the <p> element   return extractedBlocks.map((innerHtml, index) => {     return &lt;p class="f0 ta-l pdf-paragraph"&gt;${innerHtml}&lt;/p&gt;;   }).join('\n'); }

<!-- Post-Processed Flattened HTML Output -->
<div class="pdf-region" data-ry="949" data-rx="643">
  <p class="f0 ta-l pdf-paragraph">Technical Supplement to the 2026 Budget</p>
</div>

Rule of thumb: Post-process spatial extraction outputs by consolidating typographic wrapper classes directly onto paragraph elements while maintaining outer region data hooks.