Filigranes
Les filigranes sont du chromage de page. Ils s'affichent sur chaque page, derrière le contenu du corps, sans affecter le flux — dans Word, ils s'ancrent comme objets d'arrière-plan (toujours modifiables individuellement). Le même JSON s'affiche de manière identique dans les deux formats.
Le content d'un filigrane est un nœud de contenu complet — pas seulement du texte ou une image. Tout ce que le vocabulaire du corps peut exprimer fonctionne ici : paragraphes avec raccourcis, graphiques SVG complets avec anneaux textPath et codes-barres positionnés, et même un composant réutilisable estampillé via use. « DRAFT en gris » est le filigrane le plus simple, pas leur limite : cadres de page décoratifs, barres latérales en bordure, sceaux de certification et motifs de marque répétés sont tous des filigranes.
Exemple en direct
Un vrai contrat de confidentialité mutuelle avec un filigrane DRAFT en arrière-plan du contenu de la page. Ouvrez Template pour voir le JSON.
- Output
- Template
- Data
Schéma
Les filigranes se trouvent à la racine de la définition du document sous forme de tableau — ils s'appliquent au document dans son ensemble, pas à une position particulière dans le flux de contenu.
{
"document": {
"watermarks": [
{
"content": { "p": "DRAFT" },
"angle": -30,
"repeat": false,
"style": "draft"
}
],
"content": [ ... ]
}
}
| Propriété | Type | Défaut | Description |
|---|---|---|---|
content | Content | — | Toute forme de contenu — { "p": "..." } paragraphe, { "svg": { … } } bloc SVG, ou Codes courts ([image, …], [barcode, …]). Même vocabulaire de contenu que le contenu du corps. |
angle | number | 0 | Rotation en degrés. Négatif = sens antihoraire. Le contenu tourne autour de son propre centre visuel. |
repeat | boolean | false | true = carreler sur la page en utilisant spacing comme l'étape. false = une seule instance ; le placement provient de spacing s'il est fourni, sinon centré sur la page. |
spacing | [x, y] | — | En points. Le sens dépend de repeat : étape de carrelage lorsque repeat: true, placement de coordonnée de page explicite du centre visuel lorsque repeat: false. Omettez ou utilisez [0, 0] pour un placement centré. |
style | string | — | Style nommé appliqué au contenu du filigrane (taille de police, opacité, couleur). |
Filigrane de texte
La forme la plus courante — texte gras pivoté avec opacité faible derrière le corps du document.
{
"document": {
"styles": {
"draft": { "fontSize": 96, "fontWeight": "bold", "color": "#CCCCCC", "opacity": 0.30 }
},
"watermarks": [
{
"content": { "p": "DRAFT" },
"angle": -30,
"repeat": false,
"style": "draft"
}
],
"content": [
{ "p": "Le contenu du corps se situe sous la marque DRAFT centrée." }
]
}
}
Filigrane d'image
Le content du filigrane est juste un paragraphe — insérez un Code court [image, …] et il s'affiche sous forme de filigrane d'image. Le style fournit l'opacité pour la « légèreté ».
{
"document": {
"styles": {
"logoFaint": { "opacity": 0.15 }
},
"watermarks": [
{
"content": { "p": "[image, images/logos/acme.png, 240|72]" },
"angle": -30,
"repeat": false,
"style": "logoFaint"
}
],
"content": [ ... ]
}
}
Filigrane SVG — cadres, sceaux, tout graphique
Le content étant un nœud de contenu complet, un graphique svg entier peut être le filigrane. Un cadre de page décoratif tient en quatre équerres d'angle dans un seul graphique, centré sur la page (LETTER 612×792, à 20 pt de chaque bord) :
{
"styles": { "bracket": { "stroke": "#B8860B", "strokeWidth": 2 } },
"watermarks": [
{
"content": {
"svg": {
"viewBox": [572, 752],
"children": [
{ "path": { "d": "M 0 40 L 0 0 L 40 0", "style": "bracket" } },
{ "path": { "d": "M 532 0 L 572 0 L 572 40", "style": "bracket" } },
{ "path": { "d": "M 572 712 L 572 752 L 532 752", "style": "bracket" } },
{ "path": { "d": "M 40 752 L 0 752 L 0 712", "style": "bracket" } }
]
}
},
"repeat": false
}
]
}
Tout ce qu'un bloc svg peut dessiner est disponible — anneaux textPath, raccourcis de formes, éléments barcode positionnés, et use : déclarez un cadre décoratif ou un sceau de certification une fois comme composant et estampillez-le dans le filigrane de chaque modèle qui en a besoin.
Motif de carreau répétitif
Pour l'image de marque des documents internes, carrelez une petite marque sur la page.
{
"watermarks": [
{
"content": { "p": "[image, images/logos/acme.png, 120|60]" },
"spacing": [250, 200],
"angle": 0,
"repeat": true,
"style": "logoFaint"
}
]
}
| Disposition | repeat | spacing |
|---|---|---|
| Simple, centré | false | omis ou [0, 0] |
| Simple, positionné | false | [centerX, centerY] en points de page |
| Carrelé sur la page | true | [xStep, yStep] en points de page |
Filigrane positionné — éléments montés en bordure
Pour les numéros de contrôle, les barres latérales verticales, les codes-barres montés en bordure et autres éléments ancrés à une région de page spécifique, définissez repeat: false et fournissez les coordonnées de page explicites dans spacing. Les valeurs sont le centre visuel du contenu du filigrane en points de page (origine en bas à gauche).
Une barre latérale verticale descendant le long du bord gauche d'une page LETTER en portrait (612×792) :
{
"watermarks": [
{
"content": {
"svg": {
"viewBox": [22, 620],
"children": [
{ "line": { "x1": 6, "y1": 14, "x2": 6, "y2": 606, "style": "edgeRule" } },
{ "textPath": {
"d": "M 14 606 L 14 14",
"text": "[caps]control no. dpa-doc-2026-0457 · scan to verify[/caps]",
"alignment": "middle",
"style": "edgeText"
} }
]
}
},
"repeat": false,
"spacing": [25, 396]
}
]
}
Le canevas (22 pt de large × 620 pt de haut) est ancré avec son centre visuel à [25, 396] — 25 pt du bord gauche de la page, centre de page verticalement. Un filigrane miroir avec spacing: [587, 396] fait la même chose sur le bord droit (612 − 25 = 587).
Ceci fonctionne pour n'importe quelle forme de contenu — un paragraphe [barcode, code128, …] de code-barres pivoté avec angle: 90 devient un code-barres de bordure verticale ; un petit bloc de texte à [306, 80] devient un numéro de contrôle en bas de page.
achievement-certificate et void-check livrent tous deux des exemples en direct de ce modèle.
Filigranes multiples et superposition
L'ordre du tableau est l'ordre de superposition : le premier filigrane est peint au plus profond, les suivants au-dessus — tous sous le contenu du corps. La pile complète de la page, de bas en haut : couleur d'arrière-plan de page → filigranes (dans l'ordre du tableau) → contenu du corps → bordures de page, en-têtes et pieds de page.
Couchez un logo discret derrière une superposition de texte DRAFT gras :
{
"watermarks": [
{
"content": { "p": "[image, images/logos/acme.png, 200|80]" },
"spacing": [300, 250],
"repeat": true,
"style": "logoFaint"
},
{
"content": { "p": "DRAFT" },
"angle": -35,
"repeat": false,
"style": "draftBold"
}
]
}
Filigranes par section
Un saut de section peut porter son propre tableau watermarks, avec trois états distincts :
watermarks de section | Effet |
|---|---|
| absent | Hérite des filigranes du niveau document. |
[] (tableau vide) | Supprime les filigranes pour cette section — pages de couverture ou de signature propres. |
| renseigné | Remplace l'ensemble du niveau document pour cette section. |
{
"document": {
"watermarks": [ { "content": { "p": "DRAFT" }, "angle": -30, "style": "draft" } ],
"content": [
{ "h1": "Corps sous la marque DRAFT" },
{ "break": "section", "watermarks": [] },
{ "p": "Cette section s'affiche sans filigrane — le tableau vide supprime l'héritage." },
{ "break": "section", "watermarks": [
{ "content": { "p": "ANNEXE CONFIDENTIELLE" }, "angle": -30, "style": "draft" } ] },
{ "p": "Cette annexe porte sa propre marque." }
]
}
}
Contenu de filigrane dynamique
Partout où les références $data.* apparaissent (texte, src d'image, même les substitutions $data.<key> à l'intérieur des Codes courts), elles se résolvent au moment du rendu de la même manière qu'elles le font dans le contenu du corps :
{
"watermarks": [
{
"content": { "p": "[image, $data.tenant.logoPath, 120|60]" },
"repeat": true,
"style": "logoFaint"
},
{
"content": { "p": "$data.classification" },
"repeat": false,
"style": "classification"
}
]
}
Propriétés de style qui importent pour les filigranes
| Propriété | Description |
|---|---|
fontSize | Taille du texte — généralement grande (60–120 pt) pour une seule marque centrée. |
color | Couleur du texte. |
bold / italic | Booléen. |
font | Famille de police — utile pour les combos Helvetica-BoldOblique gras-italique. |
opacity | 0.0–1.0 translucidité. La plupart des filigranes utilisent 0.05–0.30. |
{
"styles": {
"draft": { "fontSize": 96, "fontWeight": "bold", "color": "#94A3B8", "opacity": 0.25 },
"verified": { "fontSize": 80, "fontWeight": "bold", "color": "#15803D", "opacity": 0.35 },
"logoFaint": { "opacity": 0.15 }
}
}