Paragraphes et titres
Les paragraphes et les titres sont les éléments de contenu les plus fondamentaux. Les deux rendent le texte avec une mise en forme en ligne optionnelle et peuvent référencer un style nommé.
Paragraphes
{ "p": "Your text content here.", "style": "styleName" }
| Propriété | Type | Requis | Description |
|---|---|---|---|
p | string | Oui | Le texte du paragraphe, qui peut contenir des balises de mise en forme en ligne |
style | string | Non | Nom d'un style défini dans l'objet styles |
Titres
Les titres fournissent une structure sémantique avec des tailles de police par défaut intégrées. Aucune définition de style n'est nécessaire — les titres sont rendus avec un dimensionnement approprié dès le départ.
{ "h1": "Document Title" }
{ "h2": "Section Heading" }
{ "h3": "Subsection" }
| Propriété | Taille par défaut | Équivalent HTML |
|---|---|---|
h1 | 24pt | <h1> |
h2 | 18pt | <h2> |
h3 | 14pt | <h3> |
h4 | 12pt | <h4> |
h5 | 10pt | <h5> |
Les titres prennent en charge tous les mêmes balises de mise en forme en ligne que les paragraphes :
{ "h1": "[color, #1A1A2E]Annual Report[/color] — Q1 2026" }
Pour remplacer le dimensionnement par défaut, appliquez un style personnalisé :
{
"document": {
"styles": {
"brandHeading": { "fontSize": 28, "color": "#0F4C75", "fontStyle": "italic" }
},
"content": [
{ "h1": "Custom Styled Heading", "style": "brandHeading" },
{ "h2": "This uses the default 18pt" },
{ "p": "Regular paragraph text." }
]
}
}
Si vous définissez un style nommé h1 dans votre objet styles, il devient la valeur par défaut pour tous les éléments h1 — pas besoin de définir "style": "h1" sur chacun.
Balises de mise en forme en ligne
Les balises de mise en forme en ligne utilisent la syntaxe entre crochets et peuvent être appliquées n'importe où dans le texte du paragraphe. La plupart des balises se présentent sous forme de paires d'ouverture et de fermeture.
Gras, italique, soulignement
| Balise | Description | Exemple |
|---|---|---|
[b]...[/b] | Gras | [b]important[/b] |
[i]...[/i] | Italique | [i]emphasis[/i] |
[bi]...[/bi] | Gras italique | [bi]strong emphasis[/bi] |
[u]...[/u] | Soulignement | [u]underlined text[/u] |
{ "p": "This has [b]bold[/b], [i]italic[/i], and [u]underlined[/u] text." }
Couleur de police
Modifiez la couleur du texte pour une portée en utilisant un code de couleur hexadécimale.
{ "p": "Status: [color, #27AE60]Active[/color]" }
Le format de la balise est [color, #RRGGBB]...[/color].
Taille de police
Remplacez la taille de police pour une portée, spécifiée en points.
{ "p": "Normal text [fontsize, 18]large text[/fontsize] normal again." }
Le format de la balise est [fontsize, N]...[/fontsize] où N est la taille en points.
Exposant et indice
| Balise | Description | Exemple |
|---|---|---|
[sup]...[/sup] | Exposant | 10[sup]2[/sup] rend 10^2 |
[sub]...[/sub] | Indice | H[sub]2[/sub]O rend H2O |
{ "p": "Water formula: H[sub]2[/sub]O. Area: 100m[sup]2[/sup]." }
Alignement du texte
Remplacez l'alignement du texte du paragraphe en ligne.
| Valeur | Signification |
|---|---|
l | Gauche |
r | Droite |
c | Centre |
j | Justifié |
{ "p": "[align, c]This paragraph is centered.[/align]" }
Saut de ligne
Insérez un saut de ligne dans un paragraphe sans commencer un nouvel élément de contenu.
{ "p": "Line one[br]Line two[br]Line three" }
Taquet de tabulation
Insérez une tabulation horizontale pour positionner le texte à un décalage spécifique.
{ "p": "Label[tab, 200, 0]Value" }
Le format est [tab, X, Y] où :
- X est le décalage horizontal en points à partir de la marge gauche
- Y est le décalage vertical (généralement
0)
Les taquets de tabulation sont utiles pour aligner les étiquettes et les valeurs, ou placer le contenu sur les côtés gauche et droit d'une ligne (par exemple, dans les en-têtes).
{ "p": "Invoice #INV-2026-0042[tab, 400, 0]Date: March 30, 2026" }
Combinaison de balises
Les codes courts peuvent être imbriqués et combinés librement.
{ "p": "[b][color, #CC0000]URGENT:[/color][/b] Shipment [i]SF-20260330[/i] requires clearance by [u]end of day[/u]." }
Cela rend :
- URGENT: en gras rouge
- SF-20260330 en italique
- end of day souligné
Images en ligne
Les images peuvent être intégrées directement dans le texte du paragraphe. Voir Images pour plus de détails.
{ "p": "[image, /assets/flag-us.png, 20|14] Chicago, IL" }
Codes-barres en ligne
Les codes-barres peuvent être intégrés dans le texte du paragraphe. Voir Codes-barres pour plus de détails.
{ "p": "Tracking: [barcode, qrcode, SF-20260330-001, 60|60]" }
Champs de formulaire en ligne
Les champs de formulaire interactifs peuvent être placés dans le texte du paragraphe. Voir Champs de formulaire pour plus de détails.
{ "p": "Full Name: [textfield, fullName, John Doe, 200|20]" }
Références de données
Les paragraphes prennent en charge les références $data qui sont résolues au moment de la génération. Voir Liaison de données pour plus de détails.
{ "p": "Invoice for $data.client.companyName" }
Exemple complet
{
"document": {
"styles": {
"title": { "fontSize": 22, "fontWeight": "bold", "color": "#1A1A2E" },
"body": { "fontSize": 10, "color": "#333333", "textAlign": "justified" },
"caption": { "fontSize": 8, "fontStyle": "italic", "color": "#999999" }
},
"content": [
{ "p": "Shipment Confirmation", "style": "title" },
{
"p": "Your shipment [b]SF-20260330-001[/b] from [color, #0066CC]Chicago[/color] to [color, #0066CC]Toronto[/color] has been confirmed.[br][br]Estimated delivery: [b]April 3, 2026[/b].",
"style": "body"
},
{
"p": "Tracking code: [barcode, qrcode, SF-20260330-001, 80|80]",
"style": "body"
},
{ "p": "Generated by DocPayload on March 30, 2026", "style": "caption" }
]
}
}