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 ''; }