Fix TV overscan clipping and re-center player names #2

Merged
eddie merged 1 commit from tv-overscan-and-centering into main 2026-09-05 09:55:46 -07:00
Owner

Two rendering bugs found on the actual TV, both fixed in style.css.

Overscan was clipping the bottom row

The page used a ~3% safe-area margin. Most TVs still overscan by roughly
5% (the old broadcast title-safe standard) and crop whatever sits past
it - so the bottom row and part of the title were being cut off by the
panel itself, not by anything wrong in the page. Padding is now a proper
5% (54px/96px) on all sides.

Names sat low in their boxes

align-items: center correctly centers each row's line boxes, but the
glyph ink inside the name box wasn't centered within its own box. Pulled
Pricedown's own hhea table: ascent 1000, descent 200 per em. At
line-height: 1 that puts the baseline 41.5px into a 46px line box, and
since names are all-caps (no true descenders to use up that ascent
space), the visible letters cluster 8px low. Confirmed with Canvas
measureText rather than eyeballed - also checked scores/ranks (Arial
Black), whose box centers to within 0.1px, so they're untouched.
Corrected with a measured translateY(-8px), documented in a comment so
it isn't mistaken for a stray offset later.

Testing

Re-rendered at 1920x1080 against the live site's HTML/CSS/JS and confirmed
via getBoundingClientRect that the name box's ink now centers exactly on
the row's center line.

Two rendering bugs found on the actual TV, both fixed in style.css. ## Overscan was clipping the bottom row The page used a ~3% safe-area margin. Most TVs still overscan by roughly 5% (the old broadcast title-safe standard) and crop whatever sits past it - so the bottom row and part of the title were being cut off by the panel itself, not by anything wrong in the page. Padding is now a proper 5% (54px/96px) on all sides. ## Names sat low in their boxes `align-items: center` correctly centers each row's line boxes, but the glyph ink inside the name box wasn't centered within its own box. Pulled Pricedown's own hhea table: ascent 1000, descent 200 per em. At `line-height: 1` that puts the baseline 41.5px into a 46px line box, and since names are all-caps (no true descenders to use up that ascent space), the visible letters cluster 8px low. Confirmed with Canvas `measureText` rather than eyeballed - also checked scores/ranks (Arial Black), whose box centers to within 0.1px, so they're untouched. Corrected with a measured `translateY(-8px)`, documented in a comment so it isn't mistaken for a stray offset later. ## Testing Re-rendered at 1920x1080 against the live site's HTML/CSS/JS and confirmed via `getBoundingClientRect` that the name box's ink now centers exactly on the row's center line.
Two bugs, same file:

The page used a 3% safe-area margin. Most TVs still overscan by roughly 5%
(the old broadcast title-safe standard), cropping whatever sits past it -
the bottom row and title were getting clipped by the panel itself, not by
anything in the page. Padding is now a proper 5% on all sides.

Separately, player names (set in the Pricedown display font) sat visibly low
in their boxes despite align-items: center - the box itself was centered,
the glyph ink inside it wasn't. Pricedown's own hhea metrics are ascent
1000/descent 200 per em, so at line-height:1 the baseline sits 41.5px into
a 46px line box, and all-caps text (no true descenders) centers 8px low.
Confirmed with Canvas measureText rather than eyeballed, and confirmed
scores/ranks (Arial Black) don't have the same problem - that font's box is
already centered to within 0.1px. Corrected with a measured translateY, not
a guess.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
eddie merged commit d802b7dc6c into main 2026-09-05 09:55:46 -07:00
eddie deleted branch tv-overscan-and-centering 2026-09-05 09:55:46 -07:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
eddie/FigFamFamilyPlinkoScoreboard!2
No description provided.