A capture of a real page (search results, marketing sites) came in
with smeared paragraphs, invisible gradient headings, mistinted icons
and a mid-page navbar. Each had a distinct root cause in how the
extractor read the DOM or how the importer re-laid it out:
- Fold gates: Chrome computes the -webkit-line-clamp idiom as
flow-root, and undecorated single-line inline-block chips (search
result dates) are text flow — both blocked the inline fold and left
per-child union rects painting over each other.
- Partial folding: consecutive inline-flow children between
block-level siblings fold as runs, so a paragraph interrupted by a
list still folds the text around it. Script/style sources and
display:none subtrees are excluded from the folded segments.
- Per-line splitting: a wrapped bare text run that cannot fold is
emitted as one node per line box (binary search over character
offsets), each at its true rect — the union box anchored every line
at the block's left edge and overlapped whatever shared those lines.
- Line counting: vertical-band grouping with a mostly-overlapping
criterion, so nested-span fragments and bidi runs do not over-report
and tight display leading (line-height 1.05 under a CJK glyph box)
does not merge real lines into one.
- Single-line leading clamp: the capture measures glyph boxes, so the
page's half-leading is already in the captured y; re-applying a
vertically-centring line-height (40px footers) pushed runs a dozen
pixels below their neighbours.
- Gradient text: background-clip:text moves the box fill onto the
descendants' glyphs (first gradient stop) instead of painting a bar
over transparent text; -webkit-text-fill-color wins over color.
- Icon paint: each shape's computed fill/stroke is inlined into the
serialized svg clone — a standalone data URI loses the stylesheet
rule that actually painted the icon, and currentColor then leaked
the inherited theme accent.
- Multi-colour flat svg art becomes one path node per consecutive
same-fill group instead of an undecodable raster fallback.
- position:fixed subtrees capture in viewport coordinates; adding the
scroll offset dropped a scrolled page's navbar into mid-document.
- The element-picker overlay marks itself data-openpencil-ui and the
extractor skips it.