Aspect ratios

A page renders at 16:9, 9:16, 1:1, 4:5 or 4:3. You write the layout once in CSS.

What the renderer gives you

Before your scripts run, the renderer sets:

• <html data-aspect="16:9"> (or the ratio being rendered)
• --vw and --vh on :root, as pixel lengths
• window.vawe, with aspect, width, height and fps

Use them in CSS:

h1 { font-size: calc(var(--vh) * 0.11); }
[data-aspect="9:16"] h1 { left: 8%; top: 30%; }

--vh holds a unit (for example 1920px). Write calc(var(--vh) * 0.11), never * 0.11px.

Do not crop. Do not lay out in fixed pixels for 16:9.

Render a ratio

bin/vawe dev  films/<name>/page.html --aspect 9:16    # one draft
bin/vawe ship films/<name>/page.html --aspect all     # one file per ratio

Without --aspect, the render uses the aspect meta of the page, else 16:9. Draft --aspect 9:16 once before the final.

Each ratio is its own reproducible render. See Determinism.