Skip to content

Flex containers item-ize their inline children - #80

Merged
danmolitor merged 2 commits into
mainfrom
fix/flex-anonymous-items
Sep 9, 2026
Merged

danmolitor merged 2 commits into
mainfrom
fix/flex-anonymous-items

Conversation

@danmolitor

Copy link
Copy Markdown
Owner

The mapper merged consecutive inline children into one Text node — correct for block containers, wrong for display: flex, where CSS makes each in-flow child element its own flex item and wraps only contiguous bare text anonymously. <div style="display:flex; justify-content:space-between"><span>Label</span><span>$1,234</span></div> — one of the most common document patterns — silently fused into one line: no spread, no independent alignment, line box sized by whichever font came first.

  • Each inline element child of a flex parent becomes its own Text item carrying its own computed style (node-level font size is what sizes the line box); contiguous bare text still groups; <br> stays with its run; whitespace-only runs produce no item.
  • Items are top-aligned until align-items: baseline lands (documented gap, next PR per the agreed order — this is visibly better and not wrong, just not complete).
  • Template hygiene riding along: flex-shrink: 0 on .mark and .cln — the design's flex:none (outside the subset, silently dropped in the port; the masthead square rendered 25.9pt wide). Sweep of all flex:none classes in the design found exactly these two; .page/.label are prototype chrome.
  • Pins failed-first both ways; fixture wall 6/6 IDENTICAL; 11 of 30 Northmoor templates change (due rows spread, clause columns hold width, mastheads square) — all warning-free, page counts stable, chains hold; docs images + MDX regenerated.

Targeted for 0.21.0 — release PR #79 gets updated with main after this merges.

…e row)

The mapper's anonymous-box normalization merged consecutive inline
children into ONE Text node — correct for block containers, wrong for
display:flex, where CSS makes each in-flow child element its own flex
item and wraps only contiguous BARE TEXT in an anonymous item. So
<div style="display:flex; justify-content:space-between">
<span>Label</span><span>$1,234</span></div> — the label/figure row in
any document — silently fused: no spread, no independent alignment,
and the line box sized by whichever font came first (the Northmoor
amount-due row put a 25.5pt figure inside an 11.25pt line).

Each inline element child of a flex parent now becomes its own Text
item CARRYING ITS OWN computed style (the node-level font size is what
sizes the item's line box); contiguous bare text still groups; <br>
stays with the text run it breaks; whitespace-only runs produce no
item. Items are top-aligned until align-items: baseline lands (the
documented engine gap — next).

Template hygiene riding along: flex-shrink: 0 on .mark and .cln — the
design's flex:none, which is outside the subset and was silently
dropped in the port (the masthead square rendered 25.9pt wide; a full
sweep of the design's flex:none classes found these two, .page/.label
being prototype chrome). The mark is 33x33 again.

Pins (failed before the fix): a space-between flex row with two spans
yields two items spread to the box edges, the big run carrying its own
line box; bare text + element = two items. Impact survey: fixture wall
6/6 IDENTICAL; 11 of 30 Northmoor templates change (due rows, clause
columns, mastheads), all warning-free, page counts stable, chains
hold; docs images + MDX regenerated from the new renders.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019eLgo72VYmQp3kNz9PZDHs
@forme-review

forme-review Bot commented Sep 9, 2026

Copy link
Copy Markdown

🟡 Changes detected — review pending

9 documents changed structurally · 0 errors, 9 warnings, 3 info

9 documents changed, none blocking

Document Causes Headline
dist/review/northmoor-certificate.pdf 4 text "CERTIFICATE CC-2026-0044" added on page 1 view
dist/review/northmoor-credit-note.pdf 1 heading "$600.48" moved 92pt on page 1 view
dist/review/northmoor-invoice-detailed.pdf 1 heading "$59,969.28" moved 91pt on page 3 view
dist/review/northmoor-invoice-standard.pdf 1 heading "$4,647.07" moved 104pt on page 1 view
dist/review/northmoor-product-catalog.pdf 1 snapshot changed but no nameable event fired: 27 of 217 matched elements moved or resized below the 24pt threshold view
dist/review/northmoor-receipt.pdf 1 heading "$0.00" moved 121pt on page 1 view
dist/review/northmoor-remittance-advice.pdf 1 heading "$8,742.60" moved 108pt on page 1 view
dist/review/northmoor-report-annual.pdf 1 snapshot changed but no nameable event fired: 18 of 205 matched elements moved or resized below the 24pt threshold view
dist/review/northmoor-shipping-label.pdf 1 snapshot changed but no nameable event fired: 5 of 51 matched elements moved or resized below the 24pt threshold view

31 documents unchanged: dist/review/template-shipping-label.pdf, dist/review/template-report.pdf, dist/review/template-receipt.pdf, dist/review/template-letter.pdf, dist/review/template-invoice.pdf, dist/review/northmoor-termination-letter.pdf, dist/review/northmoor-statement.pdf, dist/review/northmoor-service-agreement.pdf, dist/review/northmoor-report-monthly.pdf, dist/review/northmoor-reference-letter.pdf, dist/review/northmoor-quote.pdf, dist/review/northmoor-purchase-order.pdf, dist/review/northmoor-policy-acknowledgement.pdf, dist/review/northmoor-payslip.pdf, dist/review/northmoor-packing-slip.pdf, dist/review/northmoor-offer-letter.pdf, dist/review/northmoor-nda.pdf, dist/review/northmoor-memo.pdf, dist/review/northmoor-meeting-minutes.pdf, dist/review/northmoor-letterhead.pdf, dist/review/northmoor-lab-report.pdf, dist/review/northmoor-inspection-report.pdf, dist/review/northmoor-expense-report.pdf, dist/review/northmoor-employment-contract.pdf, dist/review/northmoor-delivery-note.pdf, dist/review/northmoor-cover-letter.pdf, dist/review/html-zebra-invoice.pdf, dist/review/html-statement.pdf, dist/review/html-letterhead.pdf, dist/review/html-dashed-borders.pdf, dist/review/facturx-en16931.pdf

No page thumbnails here: GitHub proxies and caches comment images, which would put a rendered customer document in a third-party cache. Open the full diff to see the pages.

⚠️ 9 tracked documents are missing. dist/templates/invoice.json and 8 more have been absent from the last three uploads on main. Resolve

Forme Review · 40 runs · powered by pdf-testkit 0.3.0

@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

📄 pdf-testkit — invoice-layout.json

✅ No semantic changes detected.

The .mark/.cln flex-shrink guards (the design's flex:none) turned out
to sit on a stack of intrinsic-measurement bugs — with the guard, the
masthead's inner row goes over-full (its own intrinsic width is
under-measured: gaps omitted, letter-spacing lost) and termination-
letter overflowed to a second page. The guard is correct in intent and
wrong to ship before the measurement is: it moves the shrink error
from the mark (visibly narrow) to the page count (visibly worse).
Reverted here; the guards land with the measurement fixes, separately
pinned. This PR is the mapper item-ization alone again.

Docs images regenerated from the mapper-only engine (the previous
regen had captured the guard-era renders, including the overflowed
termination letter).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019eLgo72VYmQp3kNz9PZDHs
@danmolitor

Copy link
Copy Markdown
Owner Author

Descoped by a follow-up commit: the .mark/.cln shrink guards are OUT (they sit on intrinsic-measurement bugs — gap-less and letter-spacing-blind intrinsic widths — and overflowed termination-letter to two pages; they return with the measurement fixes, separately pinned). This PR is the mapper item-ization alone; docs images regenerated to match.

@danmolitor
danmolitor merged commit e346522 into main Sep 9, 2026
12 checks passed
@github-actions github-actions Bot locked and limited conversation to collaborators Sep 9, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant