vliaudatandClaude Opus 5
185610ee61
A bottom strip gave each day a 114px column, and that width was what capped the type size. A side band gives 142px of usable width and a 68px row, so the hours go from 19pt to 22pt, the day labels from 20 to 23, and each day fits on one line — "Mar 11:00–18:00" reads at a glance where a column had to be read downwards. Right rather than left, for two reasons the renders make plain: on the left the logo is pushed into the middle and loses its place as a signature, and the eye meets the week before the day's status. OUVERT is what has to be read first from the pavement. The times stay whole. Only the spaces around the dash go, which is enough to hold 22pt without abbreviating anything: a shop's opening hour is not a detail to shorten. The idea came from the shop owner, and testing it surfaced a defect that had been in production all along. Rendering the worst case the data model allows — three periods in a day, none on a round hour — showed the day's hours wrapping, pushing the layout down, and the English line of the banner falling off the bottom edge. A panel does not scroll and does not reflow: what does not fit is lost. Type size is now fitted to the space available, with a floor below which it will not go, and nothing may leave its box. The width estimate is deliberately crude: measuring glyphs would mean loading the font in that module and would still be an estimate, since the renderer applies its own kerning. Erring small costs a point of type, erring large costs a broken screen. Three periods a day will reportedly never happen. The protection stays anyway — it costs nothing and removes the need to remember. `npm run screen:fonts` renders every arrangement and both alternative typefaces, including the worst case, because choosing type for a 1-bit panel is done by looking at it thresholded. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012cSY9pVhZmJUKNN7wf1Myd
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
||
|
||
import { fitFontSize } from './fit';
|
||
|
||
const options = { available: 500, preferred: 36, minimum: 20 };
|
||
|
||
describe('fitFontSize', () => {
|
||
it('keeps the preferred size when the text is short', () => {
|
||
expect(fitFontSize('10:00 – 18:30', options)).toBe(36);
|
||
});
|
||
|
||
it('shrinks a long line rather than letting it wrap', () => {
|
||
// Three periods, none on a round hour: the case that overflowed.
|
||
const crowded = '09:30 – 12:00 · 13:30 – 16:00 · 17:00 – 19:30';
|
||
const size = fitFontSize(crowded, options);
|
||
expect(size).toBeLessThan(36);
|
||
expect(size * crowded.length * 0.54).toBeLessThanOrEqual(options.available);
|
||
});
|
||
|
||
it('never goes below the floor, however long the text', () => {
|
||
expect(fitFontSize('a'.repeat(500), options)).toBe(20);
|
||
});
|
||
|
||
it('keeps the preferred size for empty text', () => {
|
||
expect(fitFontSize('', options)).toBe(36);
|
||
});
|
||
|
||
it('returns whole pixels', () => {
|
||
expect(Number.isInteger(fitFontSize('10:00 – 13:00 · 14:00', options))).toBe(true);
|
||
});
|
||
|
||
it('gives more room a larger size', () => {
|
||
const narrow = fitFontSize('10:00 – 13:00 · 14:00 – 18:30', { ...options, available: 300 });
|
||
const wide = fitFontSize('10:00 – 13:00 · 14:00 – 18:30', { ...options, available: 700 });
|
||
expect(wide).toBeGreaterThan(narrow);
|
||
});
|
||
});
|