Aller au contenu principal

Tags de mise en page

Contrôlez l'espacement et le positionnement horizontal dans n'importe quel élément de texte (p, th, td, h1–h5).

Saut de ligne​

Insérez un saut de ligne au sein d'un paragraphe sans créer un nouvel élément de contenu.

{ "p": "Ligne un[br]Ligne deux[br]Ligne trois" }

Forme longue : [linebreak]

Sauts de ligne multiples​

Ajoutez un nombre pour insérer plusieurs sauts de ligne à la fois :

{ "p": "Contenu au-dessus[br, 3]Contenu en dessous avec 3 lignes vides entre" }

Exemple : bloc d'adresse​

{ "p": "Meridian Financial Group[br]45 Bay Street, Suite 1200[br]Toronto, ON M5J 2X5[br]Canada" }

Taquet de tabulation​

Positionnez le texte à un décalage horizontal spécifique à partir de la marge gauche. Le paramètre tiers optionnel contrôle comment le texte s'aligne au taquet de tabulation.

{ "p": "Libellé[tab, 200]Valeur" }
{ "p": "Libellé[tab, 200, 1]Valeur alignée à droite" }
ParamètreDescription
Premier (POS)Décalage horizontal en points à partir de la marge gauche où se situe le taquet de tabulation.
Deuxième (ALIGN, optionnel)Comment le texte suivant s'aligne au taquet de tabulation : 0 = gauche (par défaut), 1 = droite, 2 = centre.

L'alignement à droite est ce qu'il vous faut pour les pieds de page « page X sur Y » et les colonnes de montants alignées à droite — le texte se termine à la position de tabulation plutôt que de commencer là.

Exemple : paires libellé-valeur​

{ "p": "Numéro de facture[tab, 200]INV-2026-0042" }
{ "p": "Date[tab, 200]15 avril 2026" }
{ "p": "Montant dû[tab, 200]24 500,00 $" }

Exemple : en-tête à trois colonnes avec date alignée à droite​

{ "p": "Meridian Financial Group[tab, 250]Rapport annuel de conformité[tab, 495, 1]Avril 2026" }

Ceci place le nom de l'entreprise à gauche, le titre du rapport au milieu commençant au point 250, et la date alignée à droite avec son bord arrière au point 495. L'alignement à droite garde la date épinglée à la marge droite même quand la chaîne de caractères de la date change de largeur.

Exemple : reçu à deux colonnes avec montants alignés à droite​

{
  "content": [
    { "p": "[b]Article[/b][tab, 350, 1][b]Prix[/b]" },
    { "p": "Consultation (40 heures)[tab, 350, 1]6 000,00 $" },
    { "p": "Développement (80 heures)[tab, 350, 1]16 000,00 $" },
    { "p": "Configuration de l'infrastructure[tab, 350, 1]2 500,00 $" },
    { "hr": { "borderStyle": "solid", "height": 0.5, "color": "#000000" } },
    { "p": "[b]Total[/b][tab, 350, 1][b]24 500,00 $[/b]" }
  ]
}
Les tables sans bordures se mettent à l'échelle mieux

Quand la mise en page importe plus que la position exacte en pixels — par exemple les régions d'en-tête/pied de page qui doivent s'adapter aux changements de taille de page ou de marge — préférez un bloc table ou columns sans bordure plutôt que les taquets [tab, POS] absolus. Les tabulations se lient à des points absolus et se cassent quand la largeur de page change ; les tables décrivent les proportions et se reflètent automatiquement.

Pour le cas le plus courant — « partager la largeur de cette ligne entre N éléments » — voir [col] ci-dessous. Cela fait le calcul pour vous par rapport à la largeur actuelle du conteneur, donc les auteurs n'ont pas besoin de calculer les points.

Fractionnements de colonnes​

Pas la même chose que le colspan d'HTML

[col, N] fractionne un paragraphe en N segments horizontaux pondérés — une ligne de type Bootstrap à l'intérieur du texte du corps. Utilisez-le pour mettre en page les lignes d'en-tête, les paires libellé/valeur, les reçus à deux colonnes. colspan (dans une cellule de table) est l'inverse — il fusionne plusieurs colonnes de table en une seule cellule. Voir Tableaux. Les deux se composent librement — une cellule colspan: 4 peut héberger [col, 3][col, 1] à l'intérieur, fractionnant son intérieur en segments libellé / statut. L'exemple edge-case-gallery dans Tableaux §11 montre ceci dans un rendu.

Fractionnez un paragraphe en segments distribués uniformément (ou pondérés) sans calculer les positions en points. [col]…[/col] est l'ergonomie du partage de ligne — la plupart des utilisations de [tab, POS] pour mettre en page les lignes d'en-tête, les paires libellé/valeur, ou les reçus à deux colonnes s'effondrent en une ou deux paires [col].

{ "p": "[col]Facture #2026-001[/col][col]Date 2026-05-21[/col]" }

Le moteur lit la largeur de contenu du conteneur actuel (largeur de page moins marges), compte les paires [col] dans le paragraphe, et place automatiquement les taquets de tabulation. Le dernier segment s'aligne toujours à droite jusqu'au bord droit — exactement ce que les lignes d'en-tête et les modèles de pied de page « Page X sur Y » veulent.

Fractionnements égaux vs pondérés​

Les segments [col] simples se fractionnent uniformément. Pour allouer la largeur de manière inégale, ajoutez un poids entier en tant que paramètre — le même modèle de poids relatif que table.widths. Les poids sont normalisés sur tous les segments, donc [col, 6][col, 6] et [col, 1][col, 1] produisent une sortie identique.

{ "p": "[col, 3]Étroit[/col][col, 6]Segment du milieu large[/col][col, 3]Étroit[/col]" }

C'est une mise en page 1:2:1 — le segment du milieu reçoit deux fois la largeur des deux segments latéraux. Les valeurs de poids sont sans unité ; choisissez ce qui totalise intuitivement (4:4:4 pour les tiers, 6:6 pour les moitiés, 8:4 pour deux tiers + un tiers, etc.).

ParamètreDescription
Premier (N, optionnel)Poids entier ≥ 1 pour ce segment. Par défaut à 1. Les valeurs non-positives ou non-numériques reviennent à 1.

Exemple : en-tête de marque avec contact aligné à droite​

{ "p": "[col][b]Meridian Financial[/b][/col][col]contact@meridian.example  ·  +1 (416) 555-0140[/col]" }

Deux segments → un taquet à droite → la ligne de contact s'aligne à droite tandis que la marque reste à gauche.

Exemple : ligne à trois segments (gauche / titre centré / page alignée à droite)​

{ "p": "[col]Acme Inc.[/col][col]Rapport Q2 des ventes[/col][col]Page 1 sur 3[/col]" }

Exemple : étiquettes asymétriques (grille 12 de style Bootstrap)​

{ "p": "[col, 8][b]Résumé des revenus Q2[/b][/col][col, 4][i]Année fiscale 2026[/i][/col]" }

Les poids totalisant 12 se lisent comme une ligne Bootstrap, mais le moteur n'en impose pas une base — n'importe quels totaux fonctionnent. [col, 2] et [col, 1] ensemble produisent le même fractionnement 2/3 + 1/3 que [col, 8] et [col, 4].

Les shortcodes se composent à l'intérieur des segments​

Chaque segment accepte le vocabulaire Shortcode complet — gras, italique, couleur, police, liens, champs, etc. — tout comme le paragraphe environnant :

{ "p": "[col][b]Acme Inc.[/b][/col][col][i]Confidentiel[/i][/col][col][color, #0066cc]contact@acme.com[/color][/col]" }

Comportement et compromis​

Quelques points tranchants à connaître :

  • Le texte en dehors de [col]…[/col] est absorbé dans le segment adjacent. Dans Foo [col]A[/col][col]B[/col], « Foo » fusionne avec la position gauche du segment 1 ; dans [col]A[/col] middle [col]B[/col], « middle » fusionne avec le segment 1. Placez tout le contenu de ligne à l'intérieur des paires [col] pour une mise en page prévisible.
  • Pour les lignes à deux segments, les poids sont visuellement invisibles. Le dernier segment s'aligne toujours à droite, donc [col, 8][col, 4] et [col, 1][col, 1] produisent une sortie identique. Si vous avez vraiment besoin d'une ligne à deux colonnes asymétrique (par ex. 70% / 30%), optez pour une table sans bordure avec "widths": [7, 3].
  • Un [col, N][/col] vide réserve toujours son emplacement pondéré. Utile pour les espaces intentionnels sans casser l'alignement adjacent.
Quand utiliser [col] vs [tab, POS] vs une table
  • [col] — le choix quotidien pour le partage de ligne au sein d'un seul paragraphe. Utilisez-le pour les lignes d'en-tête, les lignes de pied de page, les paires libellé/valeur, et tout modèle « gauche / milieu / droite ».
  • [tab, POS] — uniquement quand vous avez besoin d'un décalage absolu spécifique (en points) qui ne dépend pas de la largeur du conteneur. Rare en pratique ; optez pour lui lors de la migration de fixtures héritées ou quand le contenu doit atterrir à une position de règle exacte.
  • table sans bordure — quand chaque « colonne » contient plusieurs éléments empilés (libellé + valeur + sous-libellé tous dans la colonne 1, etc.), ou quand le contenu s'étend sur plusieurs lignes. [col] est un outil de paragraphe unique ; les tables sont pour les grilles.