Règles horizontales

L'élément hr trace une règle horizontale avec le vocabulaire complet des propriétés CSS <hr> : styles de ligne, alignement horizontal, barres de couleur pleines avec bordure et rayon de coin optionnels, espacement explicite marginTop/marginBottom, et une borderColor distincte pour les contours bicolores.

Toutes les propriétés sont optionnelles — { "hr": {} } trace une règle noire pleine de 1 pt sur toute la largeur du contenu.

remarque

hr remplace l'ancien élément separator. Tous les styles de bordure précédemment disponibles sur separator sont pris en charge, ainsi que des options supplémentaires de remplissage, d'alignement, d'espacement et d'opacité.

Propriétés

Propriété	Type	Défaut	Description
height	number	1	Épaisseur en points
width	number	largeur totale	Étendue horizontale en points. Omettre pour couvrir toute la largeur du contenu.
borderStyle	string	solid	Style de ligne : solid, dashed, dashedFixed, dotted, double, roundDots, groove, ridge, inset, outset, none
color	string	#000000	Couleur de la ligne
borderColor	string	—	Couleur de bordure combinée avec backgroundColor ; trace un contour autour de la barre pleine
backgroundColor	string	—	Couleur de remplissage. Lorsque définie, trace une barre de couleur pleine à la place d'une ligne.
borderRadius	number	0	Rayon de coin en points. S'applique aux barres pleines.
opacity	number	1	Transparence de 0.0 à 1.0
marginTop	number	0	Espace au-dessus de la règle en points
marginBottom	number	0	Espace en dessous de la règle en points
align	string	left	Alignement horizontal lorsque width est inférieur à la largeur du contenu : left, center, right
style	string	—	Référence à un style nommé

Styles de ligne

Solid

Ligne continue et ininterrompue. Style par défaut.

{ "hr": { "height": 1, "color": "#334155" } }

Dashed

Tirets régulièrement espacés.

{ "hr": { "borderStyle": "dashed", "height": 1.5, "color": "#94A3B8" } }

Dotted

Petits points régulièrement espacés.

{ "hr": { "borderStyle": "dotted", "height": 1, "color": "#CBD5E1" } }

Round dots

Grands points ronds avec un espacement généreux — alternative décorative à dotted.

{ "hr": { "borderStyle": "roundDots", "height": 2, "color": "#6366F1" } }

Double

Deux lignes parallèles séparées par un espace. height définit la hauteur visuelle totale incluant les deux lignes et l'espace entre elles.

{ "hr": { "borderStyle": "double", "height": 4, "color": "#0F172A" } }

Groove

Ligne gravée en deux bandes utilisant des tons clairs et foncés de color.

{ "hr": { "borderStyle": "groove", "height": 3, "color": "#64748B" } }

Ridge

Ligne en relief — l'inverse visuel de groove. Bande supérieure claire, bande inférieure foncée.

{ "hr": { "borderStyle": "ridge", "height": 3, "color": "#64748B" } }

Inset

Ligne enfoncée dont le bord supérieur est une teinte assombrie et le bord inférieur une teinte éclaircie de color.

{ "hr": { "borderStyle": "inset", "height": 3, "color": "#64748B" } }

Outset

Ligne en relief — l'inverse visuel de inset. Bord supérieur éclairci, bord inférieur assombri.

{ "hr": { "borderStyle": "outset", "height": 3, "color": "#64748B" } }

Dashed fixed

Comme dashed mais avec un ratio tiret/espace fixe indépendant de la longueur de la ligne. Utile pour un rendu cohérent des tirets quelle que soit la largeur.

{ "hr": { "borderStyle": "dashedFixed", "height": 1, "color": "#94A3B8" } }

None

N'affiche aucune ligne — utile comme espaceur vertical pur via marginTop et marginBottom.

{ "hr": { "borderStyle": "none", "marginTop": 12, "marginBottom": 12 } }

Alignement

Lorsque width est inférieur à la largeur du contenu, align contrôle le positionnement. La valeur par défaut est left.

{ "hr": { "width": 80, "height": 3, "color": "#0F172A", "align": "center", "marginTop": 8, "marginBottom": 8 } }

{ "hr": { "width": 160, "height": 1, "color": "#94A3B8", "align": "right" } }

Barres pleines

Définir backgroundColor pour afficher une barre de couleur pleine à la place d'une ligne.

{
  "hr": {
    "height": 6,
    "backgroundColor": "#3B82F6",
    "marginTop": 4,
    "marginBottom": 4
  }
}

Ajouter borderRadius pour des extrémités arrondies (PDF) :

{
  "hr": {
    "height": 8,
    "backgroundColor": "#6366F1",
    "borderRadius": 4,
    "width": 200,
    "align": "center",
    "marginTop": 6,
    "marginBottom": 6
  }
}

Barres avec contour

Combiner backgroundColor et borderColor pour tracer une barre pleine avec une bordure distincte.

{
  "hr": {
    "height": 8,
    "backgroundColor": "#E0F2FE",
    "borderColor": "#0EA5E9"
  }
}

Espacement

marginTop et marginBottom contrôlent l'espace au-dessus et en dessous de la règle sans dépendre de l'espacement des paragraphes environnants.

{ "hr": { "color": "#E2E8F0", "marginTop": 16, "marginBottom": 16 } }

Styles nommés

Définir des règles réutilisables dans le bloc styles du document et les référencer avec style.

{
  "document": {
    "styles": {
      "sectionDivider": { "color": "#E2E8F0", "marginTop": 12, "marginBottom": 12 },
      "accentBar":      { "height": 4, "backgroundColor": "#2563EB", "marginTop": 8, "marginBottom": 8 }
    },
    "content": [
      { "p": "Section Un" },
      { "hr": { "style": "sectionDivider" } },
      { "p": "Section Deux" },
      { "hr": { "style": "accentBar" } },
      { "p": "Section Trois" }
    ]
  }
}

Exemple de document complet

{
  "document": {
    "styles": {
      "h2":     { "fontSize": 14, "fontWeight": "bold", "color": "#0F172A", "marginTop": 16, "marginBottom": 4 },
      "body":   { "fontSize": 10, "color": "#334155" },
      "divider":{ "color": "#E2E8F0", "marginTop": 10, "marginBottom": 10 }
    },
    "content": [
      { "p": "Rapport annuel 2025", "style": "h2" },
      { "hr": { "height": 3, "backgroundColor": "#1D4ED8", "marginBottom": 12 } },
      { "p": "Points saillants de l'exercice.", "style": "body" },
      { "hr": { "style": "divider" } },
      { "p": "Résumé financier", "style": "h2" },
      { "p": "Le chiffre d'affaires a augmenté de 18 % d'une année sur l'autre.", "style": "body" },
      { "hr": { "style": "divider" } },
      { "p": "Perspectives", "style": "h2" },
      { "p": "Nous anticipons une croissance continue au T1.", "style": "body" },
      { "hr": { "width": 80, "height": 3, "color": "#1D4ED8", "align": "center", "marginTop": 20 } }
    ]
  }
}

Notes de rendu

Capacité	PDF	DOCX
Toutes les valeurs borderStyle	✅	✅ (roundDots s'affiche en points carrés)
Barre pleine backgroundColor	✅	✅
Contour borderColor sur barre pleine	✅	✅
width + align	✅	✅
borderRadius	✅	—
opacity	✅	—
marginTop / marginBottom	✅	✅

Exemple interactif

Tous les styles de bordure, barres pleines, alignements et options d'espacement dans un document prêt à l'emploi.

Output

Try in Playground →

Template

Data