Skip to content

feat(core): pt units, table height as min-height, honor td width% - #7

Merged
NikPnevmatikos merged 1 commit into
mainfrom
feat/html-pt-fixes
Aug 11, 2026
Merged

feat(core): pt units, table height as min-height, honor td width%#7
NikPnevmatikos merged 1 commit into
mainfrom
feat/html-pt-fixes

Conversation

@NikPnevmatikos

Copy link
Copy Markdown
Owner

Summary

Fixes three rendering gaps that real-world email/CMS HTML (TinyMCE, Google Docs exports) exposed: pt units were silently dropped, height on table cells acted as a hard cap instead of a minimum, and a cell's width was ignored in row layout. A production email template's CTA button rendered as an empty blue chip — its white 16pt label fell back to 14px and overflowed the fixed-height cell onto the page background.

Changes

  • parsePx now accepts pt at the CSS ratio 1pt = 4⁄3px, everywhere lengths are parsed (font-size, line-height, margins/paddings, borders, dimensions).
  • height on table/tr/td/th is remapped to minHeight at build time (browser table semantics, CSS 2.1 §17.5); an explicit larger min-height still wins; height on non-table elements is unchanged.
  • Table cells' width now shapes the row: all-percent rows distribute columns proportionally to their percents (15%/33%/15% keeps the 15:33:15 ratio); mixed rows pin sized cells via flexBasis and let widthless cells share the remainder; width-free rows keep the old flex: colspan behavior. Logic lives in a new pure module renderer/table-layout.ts.
  • Tests: pt parsing, height→minHeight mapping (incl. min-height merge and non-table exemption), and a full resolveRowCellFlex suite — the first renderer-side logic with jest coverage (the module has no react-native imports).
  • Docs/release: CHANGELOG entry, README "Supported CSS" + new "Table semantics" section, core version → 0.4.0.

Test plan

  • npm run typecheck passes
  • npm test passes (164 tests: 145 core incl. new suites, 19 video)
  • npm run build succeeds
  • cd example && npx tsc --noEmit passes
  • Manually verified in the example app (web): with the raw email template, the CTA label renders white at 21.33px, fully inside the growing blue cell (minHeight 25 → 50px desktop / 100px mobile), and the middle column takes ~52% of the row per its declared width — at both desktop and mobile viewports.

Breaking changes

No API changes. Rendering behavior changes for existing content, gated by the minor bump (0.3 → 0.4, outside ^0.3.0):

  • Tables with cell widths no longer render equal columns — they follow the declared widths.
  • Fixed-height table cells now grow to fit content instead of clipping.
  • Previously-dropped pt sizes now apply, so text set in pt changes size.

Migration: to keep old behavior for specific content, strip the relevant declarations via ignoredStyles={['width']} / ['height'] / ['fontSize'].

@NikPnevmatikos
NikPnevmatikos merged commit 4cf58cb into main Aug 11, 2026
2 checks passed
@NikPnevmatikos
NikPnevmatikos deleted the feat/html-pt-fixes branch August 11, 2026 09:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants