Document
Un document se lit séquentiellement et s'imprime sur papier. Ces deux faits contraignent la mise en page : une seule colonne de texte, des sauts de page réels, et rien qui ne dépende d'un survol.
Décider d'abord de la pagination
- Flux continu (par défaut) — un flux de texte unique ; le moteur d'impression du navigateur le découpe en pages. Idéal pour les rapports, notes, lettres, essais, ou tout texte dont la longueur n'est pas maîtrisée.
- Pages fixes — blocs
<section class="page">explicites, un par feuille. Approprié lorsque le nombre de pages fait partie du design : un CV d'une page, un dépliant recto-verso, un certificat, une affiche.
Si l'interlocuteur demande « deux pages », il s'agit de pages fixes. S'il demande « un rapport », il s'agit d'un flux continu. En cas de doute réel, demandez — construire le mauvais modèle gaspillera tout le document.
Géométrie
Liez le fichier token dans <head>, ainsi que components.css si le document utilise ses composants, et utilisez ses variables pour la couleur, la police et l'espacement. Les règles ci-dessous concernent uniquement la géométrie du papier :
@page { size: A4; margin: 0; } /* ou : size: letter; */
body { margin: 0; background: white; }
.page { width: 210mm; min-height: 297mm; padding: 24mm 22mm; box-sizing: border-box; }
.page + .page { break-before: page; }
@media screen {
body { background: gainsboro; padding: 32px 0; }
.page { margin: 0 auto 24px; box-shadow: 0 2px 24px color-mix(in srgb, black 12%, transparent); }
}
Pour les documents en flux continu, supprimez la classe .page fixe et définissez @page { margin: 22mm } avec une colonne de max-width: 66ch. Format de papier : A4 sauf si l'interlocuteur est clairement américain ; dans ce cas, Letter. S'il a donné une taille, utilisez la sienne.
Typographie
- Corps 11–12 pt, interligne 1,5–1,6. Jamais en dessous de 10,5 pt pour tout texte à lire.
- Mesure 60–75 caractères. Au-delà, l'œil perd la ligne.
- Une police de caractères pour le corps, éventuellement une seconde pour les titres. Même paire que le système de design s'il existe.
- Tailles de titres selon une échelle, le titre principal étant nettement plus grand — 28–36 pt — pas 14 pt en gras.
- Accentuation par le poids et l'espacement, pas seulement par la couleur. Un document imprimé en niveaux de gris doit rester lisible.
Structure
- Éléments sémantiques réels :
h1–h3,p,ul,table,figure,blockquote. Pas dedivstylisés. - Numéros de page via les compteurs
@pagesi le document dépasse deux pages :@page { @bottom-center { content: counter(page); } } - Tableaux : nombres alignés à droite, texte aligné à gauche, filets fins plutôt que bordures pleines, en-tête répété entre les sauts avec
thead { display: table-header-group }. - Évitez
break-inside: avoidsur tout élément plus grand qu'un tiers de page. - Les figures ont une légende. Pas de légende, pas de figure.
Contenu
Conservez les mots de l'auteur. Vous pouvez couper et réordonner sur demande ; vous ne pouvez pas reformuler. Si une section est vide parce qu'il ne l'a pas écrite, laissez un espace clairement marqué plutôt que d'inventer du texte.
Pas de photographies de stock, ni d'image générée qui ne soit que décorative. Lorsque le document a besoin d'une vraie image, générez-la avec les outils FLUX s'ils sont disponibles ; sinon, utilisez un espace réservé avec une note monospace indiquant ce qui doit s'y trouver.
Finition
Exécutez design-verify à la largeur d'impression et lisez la capture d'écran :
node ~/.config/opencode/lib/design/verify.mjs "design/Report.html" \
--width 900 --height 1200 --full --out design/.verify/report.png
Vérifiez : texte coupé aux bords de la page, titre orphelin en bas de page, tableaux mal scindés, et tout débordement horizontal — qui, à l'impression, signifie du contenu perdu sur le bord droit.
Ensuite, imprimez vous-même une fois en PDF (Cmd-P, Enregistrer au format PDF) pour confirmer le nombre de pages et que rien ne se décale à la taille réelle du papier.