Resource card cover: long words are truncated/clipped in the preview #23

New issue

Closed

opened 2026-07-09 09:46:29 +00:00 by laoc · 1 comment

laoc commented

2026-07-09 09:46:29 +00:00

Owner

On generated resource card covers, long words are clipped horizontally instead of wrapping or shrinking. Screenshot:

In the screenshot "verantwortlich" renders as "verantwortlic" and "Verantwortung" as "Verantwortu" (feed cards from @Fortbildung_Religion).

Likely cause: the cover title typography uses a fixed font size with overflow: hidden and no hyphenation/overflow-wrap: anywhere/font scaling for long German compound words.

Expected: full words visible — wrap with hyphenation (hyphens: auto with lang="de") and/or scale the font down so the longest word fits.

On generated resource card covers, long words are clipped horizontally instead of wrapping or shrinking. Screenshot: ![truncated cover titles](https://git.edufeed.org/attachments/720c4d88-afd9-49de-859f-00fb880f72f1) In the screenshot "verantwortlich" renders as "verantwortlic" and "Verantwortung" as "Verantwortu" (feed cards from @Fortbildung_Religion). Likely cause: the cover title typography uses a fixed font size with `overflow: hidden` and no hyphenation/`overflow-wrap: anywhere`/font scaling for long German compound words. Expected: full words visible — wrap with hyphenation (`hyphens: auto` with `lang="de"`) and/or scale the font down so the longest word fits.

truncated-cover-titles.png

1.1 MiB

laoc added the

bug

label

2026-07-09 09:46:29 +00:00

laoc commented

2026-07-09 10:39:36 +00:00

Author

Owner

Fixed on branch fix/issue-23-cover-truncation, merged into dev (e70d1fb0).

Root cause: the cover title font sizes scaled only with container width (cqi) and ignored word length, so long German compounds overflowed the card's overflow: hidden and got clipped.

Fix: each title line now exports its longest-word length as a CSS custom prop and the CSS caps the font size with min(ideal, budget / wordLength) — long words shrink to fit instead of clipping. Titles with pathological words (> 16 chars, e.g. „Donaudampfschifffahrtsgesellschaft“) route to the long-headline layout which wraps instead. Verified in the browser with the exact titles from the screenshot — „verantwortlich“ and „Verantwortung“ now render fully.

Fixed on branch `fix/issue-23-cover-truncation`, merged into `dev` (e70d1fb0). Root cause: the cover title font sizes scaled only with container width (`cqi`) and ignored word length, so long German compounds overflowed the card's `overflow: hidden` and got clipped. Fix: each title line now exports its longest-word length as a CSS custom prop and the CSS caps the font size with `min(ideal, budget / wordLength)` — long words shrink to fit instead of clipping. Titles with pathological words (> 16 chars, e.g. „Donaudampfschifffahrtsgesellschaft“) route to the long-headline layout which wraps instead. Verified in the browser with the exact titles from the screenshot — „verantwortlich“ and „Verantwortung“ now render fully.

laoc referenced this issue from a commit

2026-07-09 10:51:37 +00:00

fix(cover): scale title font by longest word so compounds aren't clipped

laoc closed this issue

2026-07-09 20:43:24 +00:00