doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Card names hyphenate only where a word cannot fit

Browse source 
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 <X>", and Deaf
stays whole.
This commit is contained in:
Doxa Maps 2026-09-29 21:04:26 +00:00
parent 1000a7ab5c
commit 614c3248d3
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
library/packet/card-render.js
View file

@ -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 <X>", 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 '';
}