Aller au contenu principal

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éTypeRequisDescription
pstringOuiLe texte du paragraphe, qui peut contenir des balises de mise en forme en ligne
stylestringNonNom 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
h124pt<h1>
h218pt<h2>
h314pt<h3>
h412pt<h4>
h510pt<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

BaliseDescriptionExemple
[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

BaliseDescriptionExemple
[sup]...[/sup]Exposant10[sup]2[/sup] rend 10^2
[sub]...[/sub]IndiceH[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.

ValeurSignification
lGauche
rDroite
cCentre
jJustifié
{ "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" }
]
}
}