Portwood: Skill for Claude Code

Authoring HTML templates for Portwood

HTML is the recommended source format. It skips the DOCX→HTML parse and lands more reliably in the renderer. Steer new authors here, and chart authors here without exception.

The renderer is CSS 2.1

Blob.toPdf is Flying Saucer: CSS 2.1 plus a small CSS 3 subset. Unsupported properties are silently ignored — the page still renders, but layout collapses to default block flow. Nothing warns you.

Never use

• display: flex, display: grid, gap
• linear-gradient(...) and friends
• calc(...)
• CSS custom properties (var(--x))
• most CSS 3 layout

Use instead

• <table>-based layout for anything multi-column
• solid background colors
• absolute lengths (pt, in) and percentages
• display: table-cell / table-row on <div> where you need cell behavior without a real table

The tbody trap

table > tbody > tr > td { ... }   /* silently matches NOTHING */

The parse tree has no implied <tbody>. Use td attribute selectors or class-only selectors:

td.total { ... }

Images

URLs must be relative. Absolute https://… URLs and data: URIs both render broken — this is a hard constraint of the renderer, not a bug to work around.

If the same image appears at two different sizes, the renderer caches one layout size per URL. Vary the URL to force a re-layout (the engine appends a size key for this reason).

Fonts and symbols

The base font families resolve to the base-14 PDF fonts (Helvetica / Times / Courier, WinAnsi). Anything outside Latin-1 renders as nothing — not a box, not a fallback, absent. Checkmarks, arrows, CJK, Greek, Cyrillic all disappear.

'Arial Unicode MS' is the one family that draws them, embedding as a subsetted CID font. The trade-off is real and worth knowing:

	Symbols / CJK	Bold
'Arial Unicode MS'	✅	❌ — no bold face; font-weight: bold renders regular
every other family	❌	✅