mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-23 23:46:35 +00:00
Maurice
142aa61295
The book catalogue grows from 7 families to 34, all self-hosted through @fontsource under the SIL OFL 1.1 or the Apache License 2.0: condensed and poster faces, heavy retro display, elegant display serifs, Montserrat, twelve scripts and DM Mono. Weights run from 100 to 900, each family offering only the weights it ships, and the serifs gain real italics. The catalogue lives in @trek/shared (book-fonts.data.ts) with each family's roles (display, heading, body, script, mono), weights, italics and letter width, so the Studio, the findings, the design engine and the assistant read one list. Page operations and the design engine set a weight a family lacks at its nearest one, describe_book_page names the role and the weight, and font_mix no longer counts scripts and mono faces, warning above three. The Studio gets StudioFontPicker: the current family set in itself, a searchable list grouped by kind with every family in its own face and the book's own families first, and a weight slider over the weights the family has. Faces load only when used; the assistant's page snapshot embeds only the faces a page draws, the service worker installs only the latin files of the original seven families, and the faces of an opened book are cached for offline use. BOOK_SCHEMA_REV goes to 2.
113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
import type { BookPageSetup, BookSpread } from '@trek/shared'
|
|
import { fontStack, nearestWeight } from './bookFonts'
|
|
import { folioInk } from './folioColour'
|
|
import { isNumbered } from './bookSheets'
|
|
|
|
/**
|
|
* The folios.
|
|
*
|
|
* Drawn by the renderer rather than stored as elements, because the number a
|
|
* page carries is a function of where the spread sits in the book — and an
|
|
* element holding "14" would say 14 after the spread was moved, duplicated or
|
|
* deleted. Nothing else in the document has that property, which is why this is
|
|
* the one thing on the page that is not an element.
|
|
*
|
|
* That also settles where it belongs: inside `SpreadView`, so the editor and
|
|
* the print renderer produce the same number. Stamping them with pdf-lib
|
|
* afterwards would mean proofreading a book on screen whose page numbers are
|
|
* not the ones that get printed.
|
|
*
|
|
* The cover and the back cover carry none. A folio on a cover is a mistake in
|
|
* every book ever bound. The single first and last pages carry one each, on
|
|
* the side of the book they are bound on (#2317).
|
|
*/
|
|
export function PageNumbers({
|
|
spread, page, folios,
|
|
}: {
|
|
spread: BookSpread
|
|
page: BookPageSetup
|
|
/**
|
|
* The numbers this spread carries, from foliosOf: two for a spread, one for
|
|
* a first or last page, none for a cover. Counted by the caller, which has
|
|
* the whole book — a spread on its own does not know how many pages sit
|
|
* before it.
|
|
*/
|
|
folios: readonly number[]
|
|
}) {
|
|
const cfg = page.pageNumbers
|
|
if (!cfg?.show || !isNumbered(spread.role) || folios.length === 0) return null
|
|
|
|
/*
|
|
* Which page of the sheet each number sits on. A spread numbers both; the
|
|
* first page is a right-hand leaf and the last a left-hand one, and each
|
|
* carries its one number on the side it actually is.
|
|
*/
|
|
const sides: Array<['left' | 'right', number]> = spread.role === 'inner'
|
|
? [['left', folios[0]], ['right', folios[1]]]
|
|
: [[spread.role === 'first' ? 'right' : 'left', folios[0]]]
|
|
|
|
const size = cfg.size
|
|
const y = page.pageHeight - cfg.margin
|
|
|
|
/**
|
|
* Where the number sits on each page, given which edge it hangs from.
|
|
*
|
|
* A single page is one page wide, so its number sits at x 0 whichever
|
|
* side of the book it is bound on; the side only decides which edge is
|
|
* the outer one.
|
|
*/
|
|
const place = (side: 'left' | 'right') => {
|
|
const pageX = side === 'left' || spread.role !== 'inner' ? 0 : page.pageWidth
|
|
if (cfg.position === 'centre') {
|
|
return { x: pageX, w: page.pageWidth, align: 'center' as const }
|
|
}
|
|
// Outer is the cut edge, inner is the gutter — the distinction only exists
|
|
// on a spread, and getting it backwards puts both numbers in the fold.
|
|
const outward = cfg.position === 'outer'
|
|
const atLeftEdge = side === 'left' ? outward : !outward
|
|
return atLeftEdge
|
|
? { x: pageX + cfg.margin, w: page.pageWidth * 0.4, align: 'left' as const }
|
|
: { x: pageX + page.pageWidth * 0.6 - cfg.margin, w: page.pageWidth * 0.4, align: 'right' as const }
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{sides.map(([side, number]) => {
|
|
const at = place(side)
|
|
/*
|
|
* Sampled at the middle of the number's own box, which is where the
|
|
* digits actually are — the box is 40% of the page wide so that the
|
|
* text can align inside it, and its left edge is often over something
|
|
* else entirely.
|
|
*/
|
|
const ink = cfg.autoColor
|
|
? folioInk(spread, at.x + at.w / 2, y - size * 0.18)
|
|
: { color: cfg.color, shadow: undefined }
|
|
return (
|
|
<div
|
|
key={side}
|
|
style={{
|
|
position: 'absolute',
|
|
left: `${at.x}mm`,
|
|
top: `${y}mm`,
|
|
width: `${at.w}mm`,
|
|
textAlign: at.align,
|
|
fontFamily: fontStack(cfg.font),
|
|
fontSize: `${size}pt`,
|
|
fontWeight: nearestWeight(cfg.font, 500),
|
|
letterSpacing: '0.08em',
|
|
lineHeight: 1,
|
|
color: ink.color,
|
|
textShadow: ink.shadow,
|
|
fontVariantNumeric: 'tabular-nums',
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
{number}
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|