Styles

L'objet styles définit les définitions de style nommé référencées depuis n'importe quel élément de contenu via la propriété "style". Cela maintient la cohérence du formatage et votre définition de document DRY.

{
  "document": {
    "styles": {
      "h1":   { "fontSize": 22, "fontWeight": "bold", "color": "#1A1A2E" },
      "body": { "fontSize": 10, "color": "#333333", "textAlign": "justify" }
    },
    "content": [
      { "p": "Titre principal", "style": "h1" },
      { "p": "Texte du paragraphe du corps.", "style": "body" }
    ]
  }
}

Un style peut être appliqué à n'importe quel élément de bloc (paragraphe, titre, tableau, cellule, liste, élément de liste, commande de canevas, filigrane). Les balises [b], [i], [color], etc. en ligne stratifiées à l'intérieur du texte remplacent le style appliqué pour l'intervalle marqué — consultez Codes courts.

Comment la validation de style fonctionne

L'application du style est intentionnellement asymétrique — stricte au moment de la création, indulgente au moment du rendu :

Couche	Comportement
Éditeur / IDE (via le schéma JSON)	Les clés de style inconnues reçoivent une ligne ondulée rouge. Le schéma énumère chaque nom de propriété valide ; les fautes de frappe comme `fontWieght` ou `colour` sont signalées sur la ligne que vous tapez.
Moteur d'exécution (`document` rendu)	Les clés de style inconnues sont silencieusement ignorées. Une faute de frappe ne casse jamais un rendu de production — la propriété affectée ne s'applique simplement pas, le reste du style fonctionne quand même.

Le raisonnement : attrapez les fautes de frappe avant le déploiement (dans l'éditeur), mais ne les laissez jamais casser les documents des clients au moteur d'exécution. La casse est également traitée avec indulgence au moteur d'exécution — FontWeight, fontweight et fontWeight se résolvent tous à la même propriété (spécification CSS), mais l'autocomplétion de l'IDE fournit toujours la forme camelCase canonique.

Pour les clés structurelles (discriminateurs de contenu comme p, table, shapes), le contrat est strict aux deux couches — celles-ci définissent ce qui s'affiche, pas comment il s'affiche, donc un abandon silencieux produirait une sortie vide.

La dénomination suit CSS et SVG

Les noms de propriété reflètent les spécifications CSS et SVG pour que quiconque maîtrise HTML/CSS auteur les styles de DocPayload par l'oreille. La traduction est mécanique :

Clés : CSS kebab-case → JSON camelCase. font-size devient fontSize, margin-top devient marginTop, border-collapse devient borderCollapse, text-align devient textAlign.
Valeurs : minuscules, correspondant à CSS. textAlign: "center", borderCollapse: "collapse", verticalAlign: "middle", strokeLinecap: "round", fontWeight: "bold", fontStyle: "italic".
Propriétés de canevas / forme suivent les attributs de présentation SVG : stroke, strokeWidth, strokeDasharray, strokeDashoffset, strokeLinecap, strokeLinejoin, fill. Consultez Propriétés canevas uniquement.
Bordures utilisent la chaîne raccourcie CSS — border: "1pt solid #000", borderTop: "2pt dashed #FF0000", borderBottom: "none". Les composants (largeur, style, couleur) peuvent apparaître dans n'importe quel ordre ; les pièces manquantes se rabattent sur les valeurs par défaut du moteur (1pt / solid / noir). L'opacité par côté se place dans le canal alpha de la couleur via hex 8 chiffres (#RRGGBBAA). Le rayon par coin se place sur ses propres propriétés (borderRadius, borderTopLeftRadius, etc.) — la même forme que CSS utilise.
Le moteur accepte les deux cas au moment de l'analyse (insensible à la casse) — "CENTER" et "center" s'affichent de manière identique — mais minuscules est canonique dans les documents, les fixtures et l'autocomplétion de l'IDE.

Où les styles s'appliquent

Les propriétés de style se répartissent en trois portées. La plupart sont utilisables sur des éléments ; certains sont canevas uniquement ; quelques-uns sont au niveau du document.

Portée	À quoi cela s'applique	Propriétés
Élément	Paragraphes, titres, cellules de tableau, éléments de liste, divs	Typographie, espacement, alignement, arrière-plan, bordures, symboles de liste, rotation, opacité, position
Canevas	Formes et lignes à l'intérieur d'un bloc `canvas`	Couleur de remplissage/trait, style de ligne, opacité, mode de rendu de texte, inclinaison, transformation affine
Document	Valeurs par défaut au niveau de la racine du document	Famille de police, taille de police, couleur de police, arrière-plan à l'échelle de la page, marges, opacité

Les styles ne portent que sur les préoccupations visuelles. Les attributs structurels qui modifient la trace d'un nœud dans son parent — table-cell colspan / rowspan, contenu [outline](/document-definition/diagnostics) bascules — vivent sur le nœud lui-même, pas dans un bloc de style. Cela reflète HTML, où colspan="2" est un attribut <td>, pas une règle CSS.

Typographie

Propriété	Type	Description
`fontFamily`	string	Famille de police nommée (doit être enregistrée dans le bloc `fonts` du document). Par défaut Helvetica.
`fontSize`	number	Taille de police en points.
`color`	string	Couleur du texte (éléments) / couleur du trait (canevas). Forme hex, ex. `"#333333"` ou `"#33333380"` pour 50 % d'opacité.
`fontWeight`	string	Valeurs CSS : `normal`, `bold`, `bolder`, `lighter`, ou `100`–`900`.
`fontStyle`	string	`normal`, `italic`, `oblique`.
`textDecoration`	string	`"underline"`, `"line-through"`, ou `"underline line-through"`.
`letterSpacing`	number	Espace supplémentaire entre les caractères, en points.
`wordSpacing`	number	Espace supplémentaire entre les mots, en points.
`lineHeight`	number	Hauteur de ligne comme multiplicateur de la taille de police (ex. `1.4`).
`leading`	number	Interligne explicite en points — remplace `lineHeight` lorsque les deux sont définis.
`textIndent`	number	Retrait appliqué à la première ligne de chaque paragraphe, en points.
`opacity`	number	0.0 – 1.0. S'applique aux éléments, chemins de canevas et au niveau du document.

Alignement

Propriété	Type	Valeurs
`textAlign`	string	`left`, `right`, `center`, `justify`
`verticalAlign`	string	`top`, `middle`, `bottom`, `baseline` (cellule ou ligne).

Espacement

Le remplissage contrôle l'espace à l'intérieur de la boîte d'un élément ; la marge contrôle l'espace à l'extérieur. La forme de chaîne reflète le raccourci CSS padding / margin littéralement — écrivez la même valeur que vous écririez dans une feuille de style.

Propriété	Type	Description
`padding`	number \| string	Raccourci. Consultez Expansion de raccourci ci-dessous.
`paddingTop`	number	Remplissage supérieur (points).
`paddingRight`	number	Remplissage droit.
`paddingBottom`	number	Remplissage inférieur.
`paddingLeft`	number	Remplissage gauche.
`margin`	number \| string	Raccourci. Consultez Expansion de raccourci ci-dessous.
`marginTop`	number	Marge supérieure.
`marginRight`	number	Marge droite.
`marginBottom`	number	Marge inférieure.
`marginLeft`	number	Marge gauche.

Expansion de raccourci

Forme	Signification
`"4"`	Les quatre côtés = 4 pt — Fidèle à CSS
`"4 8"`	Haut/Bas = 4 · Gauche/Droite = 8 — Fidèle à CSS
`"4 8 6"`	Haut = 4 · Gauche/Droite = 8 · Bas = 6 — Fidèle à CSS
`"4 8 6 2"`	Haut = 4 · Droit = 8 · Bas = 6 · Gauche = 2 (dans le sens des aiguilles d'une montre à partir du haut) — Fidèle à CSS
`4`	Nombre nu — même effet que `"4"`, raccourci ergonomique idiomatic JSON

Fidèle à CSS vs ergonomique

Les formes de chaîne correspondent exactement à CSS — même syntaxe, même expansion. La forme de nombre nu ("padding": 4) n'est pas dans la spécification CSS (CSS nécessite des unités : padding: 4px;) ; nous l'acceptons comme raccourci idiomatic JSON pour le cas usuel tous côtés. Utilisez la forme de chaîne si vous préférez une CSS alignement adapté à une forme.

Les remplacements par côté (paddingTop, marginLeft, etc.) gagnent sur le raccourci lorsque les deux sont définis sur le même style — même précédence que CSS :

{
  "callout": {
    "padding": "6 12",
    "paddingLeft": 24
  }
}

→ haut/bas = 6, droit = 12, gauche = 24.

Arrière-plans

Propriété	Type	Description
`backgroundColor`	string	Remplissage d'arrière-plan pour la boîte d'élément (ou forme de canevas).
`background`	object	Descripteur d'arrière-plan complet — généralement `{ "color": "#…" }`.
`backgroundImage`	string	Niveau du document uniquement — un chemin d'actif d'image d'arrière-plan à l'échelle de la page.

Bordures

Chaque côté est une chaîne de raccourci CSS indépendante de la forme "<width> <style> <color>" — les composants peuvent apparaître dans n'importe quel ordre, les pièces manquantes se rabattent sur les valeurs par défaut du moteur (1pt / solid / noir). Utilisez "none" pour supprimer un côté. L'opacité se place dans le canal alpha de la couleur via hex 8 chiffres (#RRGGBBAA).

Propriété	Type	Description
`border`	string	Raccourci CSS — s'applique aux quatre côtés. ex. `"1pt solid #000"`, `"none"`.
`borderTop`	string	Bordure supérieure (raccourci CSS).
`borderRight`	string	Bordure droite (raccourci CSS).
`borderBottom`	string	Bordure inférieure (raccourci CSS).
`borderLeft`	string	Bordure gauche (raccourci CSS).
`borderRadius`	number	Rayon du coin (pt) — les quatre coins.
`borderTopLeftRadius`	number	Rayon par coin (pt). Aussi `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`.
`borderCollapse`	string	`collapse` / `separate` pour les tableaux.

Mots-clés <style> supportés : solid, dashed, dotted, double, groove, ridge, inset, outset, none (insensible à la casse).

Les pages elles-mêmes prennent en charge les bordures via pageSetup.borderTop/Right/Bottom/Left — même chaîne de raccourci CSS.

Espacement de bordure de tableau

Propriété	Type	Description
`borderSpacing`	number \| number[2]	Écart entre les cellules adjacentes lorsque `borderCollapse` est `separate`. Une seule valeur s'applique aux deux axes ; `[h, v]` définit horizontal et vertical indépendamment.

Dimensions

Appliquez des dimensions fixes ou délimitées aux éléments. Le PDF honore celles-ci sur chaque élément de bloc ; DOCX les honore sur les lignes de tableau.

Propriété	Type	Description
`width`	number	Largeur fixe en points.
`height`	number	Hauteur fixe en points.
`minWidth`	number	Largeur minimale — l'élément grandit à au moins cela.
`maxWidth`	number	Largeur maximale — l'élément se recadre au maximum cela.
`minHeight`	number	Hauteur minimale — utile sur les étiquettes à contenu variable pour arrêter la dérive des rangées.
`maxHeight`	number	Hauteur maximale.

Mise en page multi-colonnes (dans l'élément)

Propriété	Type	Description
`columnCount`	number	Nombre de colonnes pour faire circuler le texte dans un seul élément.
`columnGap`	number	Écart entre les colonnes en points.

Position

Propriété	Type	Description
`relativePosition`	float[4]	`[left, right, top, bottom]` décalage relatif à la position de mise en page naturelle.
`fixedPosition`	object	`{ pageNumber, left, bottom, width, height }` — épingle l'élément aux coordonnées de page absolues.

Transformations — rotation, inclinaison, affine

Les primitives de transformation réelles, utiles pour les barres latérales verticales, les superpositions estampillées, les codes-barres montés en bordure et les bannières soulignées.

Propriété	Type	Description
`rotate`	number	Angle de rotation en degrés (s'applique aux éléments comme les paragraphes et les divs).
`rotationPointX`, `rotationPointY`	number	Pivot de rotation personnalisé.
`rotationInitialHeight`, `rotationInitialWidth`	number	Conseils de réservation de mise en page pour que le contenu pivoté obtienne la bonne boîte englobante.
`skew`	number[1 ou 2]	`[skewX]` ou `[skewX, skewY]` en degrés. Portée canevas uniquement — s'applique au système de coordonnées.
`transform`	number[6]	Matrice affine `[a, b, c, d, e, f]` concaténée dans le CTM du canevas.
`textRenderingMode`	string	`fill`, `stroke`, `fillstroke`, `invisible`, `fillclip`, `strokeclip`, `fillstrokeclip`, `clip`. Utilisez `stroke` pour les effets de texte soulignés.

Exemple — superposition de tampon caoutchouc incliné

{
  "styles": {
    "stamp": {
      "fontSize": 28,
      "fontWeight": "bold",
      "color": "#7A1F2A",
      "letterSpacing": 4,
      "rotate": -15,
      "opacity": 0.55,
      "textAlign": "center"
    }
  },
  "content": [
    { "p": "EN ATTENTE DE PAIEMENT", "style": "stamp" }
  ]
}

Exemple — texte de barre latérale verticale

{
  "styles": {
    "sidebar": {
      "fontSize": 14,
      "fontWeight": "bold",
      "color": "#1B5E3F",
      "letterSpacing": 8,
      "rotate": 90
    }
  },
  "content": [
    { "p": "DOCUMENT OFFICIEL", "style": "sidebar" }
  ]
}

Propriétés canevas uniquement

Celles-ci s'appliquent à l'intérieur des références shapes[].style d'un élément de contenu (formes et lignes sur le canevas aligné SVG). Les noms suivent les attributs de présentation SVG pour que quiconque maîtrise SVG puisse auteur les styles de canevas par l'oreille — stroke, fill, strokeDasharray, strokeLinecap, strokeLinejoin sont les mêmes noms que vous utiliseriez sur un <path> SVG.

Propriété	Type	Description
`stroke`	string	Couleur du trait du chemin, hex.
`strokeWidth`	number	Largeur du trait en points.
`fill`	string	Couleur de remplissage pour le chemin/la forme, hex.
`strokeDasharray`	number[]	Motif de tirets, ex. `[5, 2]` (tiret), `[0.5, 2.5]` (points, associer avec `strokeLinecap: "round"`). Utilisez `[0]` ou `[]` pour réinitialiser au solide — l'état du canevas PDF est collant, donc un motif de tirets antérieur persiste jusqu'à ce qu'il soit explicitement remplacé.
`strokeDashoffset`	number	Décalage de démarrage dans le motif de tirets.
`strokeLinecap`	string	`butt` (défaut), `round`, ou `square`. S'applique à n'importe quelle forme s'affichée (chemins, lignes, arcs, cercles) — utilisez `round` pour adoucir les motifs pointillés.
`strokeLinejoin`	string	`miter` (défaut), `round`, ou `bevel`.
`strokeMiterlimit`	number	Ratio de coupure de miter.

Contrôles des symboles de liste

Ceux-ci s'appliquent aux blocs ol / ul.

Propriété	Type	Description
`symbol`	string	Caractère de marqueur, ex. `"1"`, `"a"`, `"i"`, `"•"`.
`symbolAlign`	string	Alignement du marqueur dans sa cellule réservée.
`symbolIndent`	number	Retrait appliqué avant le marqueur.
`symbolOrdinal`	number	Valeur ordinale de démarrage pour les listes ordonnées.
`symbolPrefix`	string	Texte ajouté avant chaque marqueur.
`symbolSuffix`	string	Texte ajouté après chaque marqueur (ex. `". "`).
`listStylePosition`	string	`inside` ou `outside`.
`listStart`	number	Indice de démarrage pour une liste ordonnée.

Exemples travaillés

Hiérarchie de titres en couches h1–h5

{
  "styles": {
    "h1": {
      "fontSize": 18, "fontWeight": "bold", "color": "#FFFFFF", "letterSpacing": 2,
      "backgroundColor": "#0F2A4A",
      "paddingTop": 10, "paddingRight": 14, "paddingBottom": 10, "paddingLeft": 14,
      "marginTop": 18, "marginBottom": 8
    },
    "h2": {
      "fontSize": 12, "fontWeight": "bold", "color": "#0F2A4A", "letterSpacing": 1,
      "borderBottom": "1pt solid #0F2A4A",
      "paddingBottom": 4,
      "marginTop": 14, "marginBottom": 6
    },
    "h3": { "fontSize": 10.5, "fontWeight": "bold", "color": "#C66B1B", "marginTop": 10, "marginBottom": 3 },
    "h4": { "fontSize": 9.5, "fontWeight": "bold", "fontStyle": "italic", "color": "#1A1A2E" },
    "h5": { "fontSize": 8.5, "fontWeight": "bold", "color": "#666666", "letterSpacing": 2 }
  }
}

Badges de données codées par niveaux

Utilisez la surbrillance/couleur en ligne dans les expressions map pour la variation par ligne dans les tableaux pilotés par données.

{
  "data": {
    "tiers": [
      { "name": "Public",       "badge": "[hl, #E8F4EC][color, #1E6F3A][b] PUBLIC [/b][/color][/hl]" },
      { "name": "Restricted",   "badge": "[hl, #FCEEF0][color, #7A1F2A][b] RESTRICTED [/b][/color][/hl]" }
    ]
  }
}

Bannière de document chiffré avec texte soulignéé

{
  "styles": {
    "banner": {
      "fontSize": 36,
      "fontWeight": "bold",
      "color": "#7A1F2A",
      "letterSpacing": 6,
      "textRenderingMode": "stroke",
      "strokeWidth": 0.5,
      "textAlign": "center",
      "opacity": 0.3
    }
  }
}

Héritage de style

Un style appliqué à un tableau parent se propage aux cellules du corps pilotées par données (le motif source + map crée des cellules sans style explicite ; elles héritent du style au niveau du tableau).
Les Codes courts à l'intérieur du texte remplacent le style appliqué pour l'intervalle marqué uniquement.
Pour la variation par cellule dans les tableaux pilotés par données, cuire des Codes courts dans un champ de données et le référencer via $item.fieldName — consultez Liaison de données.

Consultez Codes courts pour la référence des balises de formatage en ligne et Configuration de page pour le style au niveau de la page (bordures, arrière-plans, marges).

Comment la validation de style fonctionne​

La dénomination suit CSS et SVG​

Où les styles s'appliquent​

Typographie​

Alignement​

Espacement​

Expansion de raccourci​

Arrière-plans​

Bordures​

Espacement de bordure de tableau​

Dimensions​

Mise en page multi-colonnes (dans l'élément)​

Position​

Transformations — rotation, inclinaison, affine​

Exemple — superposition de tampon caoutchouc incliné​

Exemple — texte de barre latérale verticale​

Propriétés canevas uniquement​

Contrôles des symboles de liste​

Exemples travaillés​

Hiérarchie de titres en couches h1–h5​

Badges de données codées par niveaux​

Bannière de document chiffré avec texte soulignéé​

Héritage de style​