Filigranes
Les filigranes sont du chromage de page. Ils s'affichent sur chaque page (superposition avant-plan en PDF, ancrée en en-tête en DOCX) sans affecter le contenu de flux. Le même JSON s'affiche de manière identique dans les deux formats.
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, { "shapes": [...] } bloc canevas, 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": [ ... ]
}
}
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": {
"viewBox": [22, 620],
"shapes": [
{ "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
Le tableau est composé dans l'ordre. 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"
}
]
}
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 }
}
}