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

The packet's low pages fill the sheet: measured, then re-shaped

Browse source 
Measured in a browser (content's bounding box against each sheet, en/de/ru):
the knows-Christ grid ended 72% of the way down its sheet (478px of blank
paper below), and the two single-chart sets pages 60% and 69% (702px and
525px). The same 5,200 boxes now lay out 65 x 80 in 14.5px squares, which
spends the height on bigger boxes; the sets charts (SVG, so they scale) grow
from 960px to 1320px (bounded, nothing below it) and 1240px (centered, room
for its ring legend, which widens with it). Now 88%, 79% and 84% of the
height, with no page clipped in en, de or ru. The width classes are hung on
the row (set-solo-<kind>), not on the page, so no page class name enters the
shared stylesheet.
This commit is contained in:
Doxa Maps 2026-09-29 21:34:14 +00:00
parent 933687b146
commit 190e7665a7
1 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
library/packet/packet-render.js
View file

@ -122,6 +122,10 @@ export function createPacketRenderer({ strings, lang = 'en', fontData = null, de
const PRAY_CELL = 84;
const SET_PANEL = 660; // one square sets panel: two + a 40px gap fit 1380px
const SET_SOLO = 960; // one chart per page: a large square, centred
// ★ MEASURED FILL, 2026-09-29: at 960px the single-chart pages ended 60-69% of the way down the sheet
// (525-702px of blank paper below). The chart is an SVG, so it scales: the bounded set has nothing
// under it and takes nearly the full 1380px row; the centered set keeps room for its ring legend.
const SET_SOLO_W = { bounded: 1320, centered: 1240 };
const PRAY_W = PRAY_CELL * PRAY_COLS.length; // 252px
// What is left is the description — the widest column on the page, and the point of the table.
// For comparison an ENTIRE card in the old 2x10 grid was 683px wide; the description alone is 50%
@ -194,9 +198,8 @@ export function createPacketRenderer({ strings, lang = 'en', fontData = null, de
.lc-wk{height:16px;margin-bottom:4px;font:400 10px Georgia,serif;color:#6f6a5c}
.lc-wk span{text-align:center;line-height:16px}
.lc-dec{grid-auto-rows:11px;row-gap:3px}
.lc-plain{width:auto}
.lc-plain .lc-all{display:grid;grid-template-columns:repeat(80,1fr);gap:3px}
.lc-plain .lc-c{width:auto;height:auto;aspect-ratio:1}
.lc-plain .lc-all{display:grid;grid-template-columns:repeat(65,14.5px);gap:3px}
.lc-plain .lc-c{width:14.5px;height:14.5px}
.lc-plain + .lc-legend{font-size:22px;gap:48px}
.lc-plain ~ .lc-per{font-size:20px}
.lc-dec+.lc-dec{margin-top:6px;padding-top:6px;border-top:1px solid #d8d3c4}
@ -261,6 +264,9 @@ export function createPacketRenderer({ strings, lang = 'en', fontData = null, de
/* The legend names EVERY ring, numbered as the figure numbers them, so a reader can read the scale
from the same dialect outward to the language family — including rings this list leaves empty. */
.set-row-solo .set-panel{width:${SET_SOLO}px}
.set-solo-bounded .set-panel{width:${SET_SOLO_W.bounded}px}
.set-solo-centered .set-panel{width:${SET_SOLO_W.centered}px}
.set-solo-centered + .set-legend, .set-solo-centered ~ .set-legend{max-width:${SET_SOLO_W.centered}px}
.set-legend{margin:26px auto 0;max-width:${SET_SOLO}px}
.set-legend-h{font:700 17px Georgia,serif;color:#1b1a17;margin:0 0 8px}
.set-rings{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;
@ -889,8 +895,10 @@ export function createPacketRenderer({ strings, lang = 'en', fontData = null, de
const head = axes ? `<div class="lc-wk">${WEEK_MARKS.map((w) => `<span style="grid-column:${w + 1}">${w}</span>`).join('')}</div>` : '';
// ★ WITHOUT AXES THE GRID REFLOWS TO FILL THE PAGE. 52 columns exist only because a year has 52
// weeks; a page whose box is a share of PEOPLE has no such constraint, and at 52 x 11px the grid
// used about half the sheet's width. The same 5,200 boxes are laid out 80 x 65 (both divide 5,200,
// so the rectangle is whole), the columns stretch to the frame, and the cells stay square.
// used about half the sheet's width. The same 5,200 boxes are laid out 65 x 80 (both divide 5,200,
// so the rectangle is whole) in 14.5px squares. MEASURED in a browser: 80 x 65 across the full width
// left 478px of blank sheet below the legend (72% of the height used), because a wide grid is short;
// 65 x 80 spends that height on bigger boxes and still leaves room for a longer lede in other languages.
if (!axes) {
const cells = []
for (let i = 0; i < TOTAL; i++) cells.push(`<i class="lc-c${i < n ? ' ' + shadeClass : ''}"></i>`)
@ -1342,7 +1350,7 @@ export function createPacketRenderer({ strings, lang = 'en', fontData = null, de
<div class="pg-head pg-head-c"><div class="pg-kicker">${esc(t('sets_kicker'))}</div>
<h1 class="pg-h1">${esc(t('sets_title'))}</h1></div>
${i === 0 ? `<p class="pg-lede pg-lede-c">${esc(t('sets_lede'))}</p>` : ''}
<div class="set-row set-row-solo">${p.html}</div>
<div class="set-row set-row-solo set-solo-${p.kind}">${p.html}</div>
${p.kind === 'centered' ? legend : ''}
`, `sheet-sets sheet-flow sheet-sets-${p.kind}`)).join('');
}