Closed feature request

Title sizing vs the vitrine: publish the computed headroom, and give the human +/- on title and vitrine nudge (complements #25)

John Lauer · 2mo ago ·closed by Colby Knox

Complements #25 (title-vitrine overlap missed, don't-shrink-the-title). #25 covers the HORIZONTAL half of the rule. This is the VERTICAL half, which bit me today posing adom/adom-native-browser, plus a proposal to hand the control to the human instead of making the AI binary-search it.

The rule I had to derive by hand

John's framing: "you shouldn't spill into the vitrine, there should be margin, but we want to maximize the title size so it's highly visible but still has white space."

Measuring the live DOM at the gate (layout bleed-bottom, real 1116x1276 vitrine), the actual mechanics turn out to be:

  • The title cannot spill sideways at all. The text column's right edge is pinned at 35% of hero width and the vitrine starts at 40%, so there is a constant ~5% gutter that does not move with fontSize.title. I swept 6.5 through 10.5 and the title's right edge stayed at 35% every time.
  • Growing the title only pushes DOWN. Bigger font wraps the same text into a taller block, so the binding constraint is the lower-third fold at 67%, where the homepage marquee overlays its own info and the studio's own guidance says to keep calm.
  • So the real rule is: maximize fontSize.title subject to subtitle bottom stays above ~65%, not subject to anything about the vitrine edge. In bleed-bottom the vitrine edge is simply never the binding constraint for the title.

The hidden variable: subtitle line count

This is the part that is genuinely non-obvious and where the AI wastes the most turns. The max title size depends on whether the subtitle wraps:

Subtitle fontSize.sub Lines Max fontSize.title (sub bottom under fold)
"Your real browser, your real logins, your AI driving it." 2.5 2 7.5 (sub bottom 66%)
"Your real browser, driven by AI." 2.4 2 8.0 (sub bottom 68%, already over)
"Your real browser, driven by AI." 2.2 1 8.5 (sub bottom 65%)

Losing one subtitle line buys a full point of title size. The column is only 35% wide, so the wrap threshold arrives much earlier than an author expects: "Your real browser, driven by your AI." would not fit on one line even at fontSize.sub 1.9.

Gotcha worth fixing on its own: the subtitle silently truncates to the first sentence

The hero subtitle renders only the first sentence of brief. I set:

"Your real browser. Your real logins. Your AI driving it."

and the hero silently displayed "Your real browser." No warning, no lint finding. I only caught it by dumping .h-sub textContent. Rewriting with commas instead of periods fixed it. Either lint this ("brief has N sentences, only the first renders as the subtitle") or render the whole brief.

Proposals

1. Let the linter compute and publish the headroom, instead of the AI bisecting it. Add to state.lint / GET /state something like:

"fit": { "titleMax": 8.5, "titleCurrent": 6.5, "subLines": 1, "subBottomPct": 65,
         "foldPct": 67, "gutterPct": 5, "binding": "fold" }

binding says WHICH constraint is active (fold vs vitrine vs none). That one field would have replaced roughly a dozen eval-and-measure round trips for me. When titleCurrent is well under titleMax, warn: the title is the headline and is being under-set for no reason, which is the same failure #25 calls out from the other direction.

2. Give the HUMAN a + / - on the title at the gate. This is John's main ask, and I think it is the right call: sizing the headline is a taste judgment, and the human is sitting right there at the gate. A stepper next to the title that is clamped to the computed safe range, so they can push it as large as they like and simply cannot cross the fold or the vitrine, with the limit shown ("8.5 max, limited by the fold"). Today the human has to ask the AI, the AI guesses, screenshots, re-guesses. Same argument for a subtitle +/-, since subtitle size is what buys title headroom.

3. Vitrine nudge controls, within the same balancing. Small offset/scale controls for the vitrine (nudge x/y, scale) clamped so it can never collide with the title column or crash into the lower band. That gives the human the other half of the trade: instead of shrinking the headline to fit the shot, they nudge the shot. That is exactly the priority #25 asks for (protect the title, move the vitrine), just made directly actionable at the gate rather than only as advisory text.

4. Report the gutter honestly per layout. The 35%/40% split is a property of bleed-bottom. On a 1600px canvas a 5% gutter is ~80px, which is under the ~90px minimum the adom-wiki-hero-image skill asks for. Either widen it slightly in the layout, or surface gutterPct so the author can pick a layout with more air rather than discovering it by measuring.

Why this matters beyond one hero

Every one of these was invisible from the outside: nothing errored, the layout linter reported no findings the entire time, and a hero that silently dropped two thirds of its value prop and under-set its headline would have passed the gate and shipped. The gate is doing its job on the things it measures; these are things it does not measure yet.

Measured on hero-studio at :8847, 2026-08-08, posing adom/adom-native-browser.

1 Reply

Colby Knox · 2mo ago

Shipped in 0.16.0/0.16.1:

  • Published headroom: the linter now emits an informational line with the measured distance, in EXPORT pixels, between the lowest image-zone text and the marquee band (negative when intruding). Visible in the gate lintbox and state.lint.
  • Human steppers at the gate: Title leading (0.92-1.3 line-height) and Text gap (0.5x-2x, scales the title/subtitle/detail spacing) sliders next to the existing size sliders, all clamped to safe ranges. The title size ceiling rose to 13cqw so the family 12cqw look is reachable (the bridge-family preset sets it, see #34).
  • All of it is also drivable: hero-studio set fontSize.leading=0.96 fontSize.gap=1.2.

The three rounds of "tighter leading / subtitle closer" from the retrospective are now slider drags inside the gate instead of external rebuild + reimport cycles.

Log in to reply.