From 614c3248d329ae1b93535af3107e99eccb0bab57 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Tue, 29 Sep 2026 21:04:26 +0000 Subject: [PATCH] Card names hyphenate only where a word cannot fit hyphens:auto on every name let the browser split ANY word at a line end, so multi-word names could break mid-word ("Northern Conchu-/cos"), which is worse on a people group's name than the unhyphenated break it replaced. The previous commit is reverted; hyphenation now applies only to names holding a 14+ letter word (12 of 2,107), with hyphenate-limit-chars:10 4 4 so a short word is never split: the only multi-word ones are "Deaf ", and Deaf stays whole. --- library/packet/card-render.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/library/packet/card-render.js b/library/packet/card-render.js index 7b16377a2..106e254e4 100644 --- a/library/packet/card-render.js +++ b/library/packet/card-render.js @@ -149,6 +149,11 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker', sideways. overflow-wrap:anywhere is the last resort, so a name is never cut off without a sign. */ .nm.long{font-size:${SIDE ? 11.5 : 14}px} .nm.xlong{font-size:${SIDE ? 10.5 : 11}px} + /* A HYPHEN ONLY WHERE A WORD CANNOT FIT. hyphens:auto on every name would let the browser split ANY + word at a line end ("Northern Conchu-/cos"), and a people group's name split mid-word is worse than + the problem it solves. So it applies only to names holding a 14+ letter word (12 of 2,107), and the + limit keeps short words whole: the only multi-word ones are "Deaf ", and Deaf is never split. */ + .nm.hy{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4} .body{position:absolute;right:14px;overflow:hidden; left:${SIDE ? COL + 12 : 14}px; @@ -176,7 +181,8 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker', // The name's size step, from its length and its longest word (see .nm above). function nameSize(name) { const word = Math.max(0, ...String(name).split(/[\s,()/-]+/).map((w) => w.length)); - if (word >= 14 || name.length > 28) return ' xlong'; + if (word >= 14) return ' xlong hy'; + if (name.length > 28) return ' xlong'; if (word >= 11 || name.length > 16) return ' long'; return ''; }