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

A long people-group name is never cut off on a prayer card

Browse source 
The name now sits in a narrow box beside the photo, and the dataset has
16-letter single words (Pagativeshagallu, Liechtensteiners) that would have
overflowed it sideways and been clipped without a sign. The size steps by
the longest word as well as the length, and overflow-wrap:anywhere is the
last resort.
This commit is contained in:
Doxa Maps 2026-09-29 19:56:47 +00:00
parent db56766667
commit e018ec47b3
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -141,9 +141,14 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker',
.nm{position:absolute;display:flex;align-items:center;
${SIDE
? `left:10px;width:${COL - 20}px;top:${12 + PH + 6}px;bottom:10px;align-items:flex-start;justify-content:center;text-align:center;`
: `left:${12 + PW + 12}px;right:12px;top:0;height:${BAND}px;`}
font:700 ${SIDE ? 14 : 17}px Georgia,serif;color:#1b1a17;line-height:1.1;overflow:hidden}
: `left:${12 + PW + 10}px;right:8px;top:0;height:${BAND}px;`}
font:700 ${SIDE ? 14 : 17}px Georgia,serif;color:#1b1a17;line-height:1.1;overflow:hidden;
overflow-wrap:anywhere}
/* Steps by the LONGEST WORD as well as the length: the name sits in a narrow box beside the photo,
and one unbreakable word (the dataset has 16-letter ones, e.g. Pagativeshagallu) would overflow it
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}
.body{position:absolute;right:14px;overflow:hidden;
left:${SIDE ? COL + 12 : 14}px;
@ -168,6 +173,14 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker',
font:400 7px Georgia,serif;color:#b9ae99;text-align:right}`;
}
// 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 >= 11 || name.length > 16) return ' long';
return '';
}
// One card = one page.
function card(g) {
const name = String(g.name || g.slug || '');
@ -193,7 +206,7 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker',
+ `<div class="v">${esc(v)}</div></div>`).join('');
return `<div class="card"><div class="band"></div>${photo}`
+ `<div class="nm${name.length > 16 ? ' long' : ''}">${esc(name)}</div>`
+ `<div class="nm${nameSize(name)}">${esc(name)}</div>`
+ `<div class="body">${rows}${relHtml}</div>`
+ `<div class="ft"><div class="qr">${qrSvg(url, { size: 54, margin: 1 })}</div>`
+ `<div class="ftx"><div class="cta">${esc(t('card_cta'))}</div>`