Description des propriétés CSS orphans et widows.

orphans
widows

Résumé des caractéristiques de la propriété orphans

Description rapide
Définit le nombre de lignes qui doivent rester en base de page ou de colonne, dans chaque paragraphe.
Statut
Standard
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
2
Héritée par défaut
Oui.
Type d'animation
Integer : lors d'une animation, la propriété orphans passe d'un nombre entier à un autre, sans transition.
Module W3C
Module CSS - Fragmentation
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)

A quoi servent les propriétés CSS orphans et widows ?

orphans définit le nombre de lignes de texte minimal que doit comporter un élément situé en bas de page ou en bas de colonne, tandis que widows définit le nombre de lignes de texte minimal que doit comporter un élément situé en début de page ou en haut de colonne.

Emplacement les lignes orphans et widows

Pour satisfaire ces deux contraintes, le navigateur peut être amené à rejeter l'élément entier sur la page ou la colonne suivante.

L'élément peut contenir moins de lignes que la plus grande des valeurs appliquées à orphans ou widows; dans ce cas, cet élément ne sera jamais coupé.

Attention ! Dans le cas d'une mise en page en colonnes, la propriété column-fill peut intervenir également dans l'emplacement des sauts de colonne.

Syntaxes pour orphans et widows.

  • orphans: 2;

    Un nombre sans unité, positif et différent de zéro. La valeur par défaut est 2.
    Si l'élément est coupé par un saut de page ou un saut de colonne, le premier fragment ne doit pas comporter moins de lignes que la valeur spécifiée. Par exemple, si un paragraphe est coupé sur deux colonnes, le fragment de paragraphe restant sur la première colonne ne devra pas compter moins de lignes que la valeur spécifiée pour orphans, quitte à rejeter le paragraphe entier sur la deuxième colonne.

  • widows: 2;

    Un nombre sans unité, positif et différent de zéro. La valeur par défaut est 2.
    Lorsque l'élément est coupé par un saut de page ou de colonne, le deuxième fragment ne devra pas comporter moins de lignes que la valeur spécifiée. Par exemple, si un paragraphe est coupé sur deux colonnes, le fragment du paragraphe situé en deuxième colonne ne doit pas compter moins de lignes que la valeur spécifiée pour widows, quitte à rejeter le paragraphe entier sur la deuxième colonne, laissant un vide en bas de la première colonne.

Valeurs communes :

orphans: initial (2) orphans: inherit orphans: revert orphans: revertLayer orphans: unset
widows: initial (2) widows: inherit widows: revert widows: revertLayer widows: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation des propriétés orphans et widows.

Il est possible d'animer les propriétés orphans et widows mais l'intérêt est limité.

Simulateur avec la propriété orphans.

Modifiez la hauteur du bloc ci-dessous et observez comment se font les sauts de colonne en fonctionnent des valeurs indiquées pour orphans et widows.

Pour des raisons pratiques, le simulateur illustre ce qui se passe dans le cas d'un changement de colonne, mais on aurait un fonctionnent comparable au changement de page lors de l'impression.

Pour ne pas interférer avec le fonctionnement de orphans et widows, la propriété column-fill a été fixée à la valeur auto.

orphans :
widows :
En typographie, une ligne veuve est la dernière ligne d'un paragraphe apparaissant isolée en haut d'une page, et une ligne orpheline est la première ligne d'un paragraphe apparaissant isolée en bas d'une page. On tente généralement d'éviter l'apparition des veuves et des orphelines dans un texte typographié, sauf dans la composition des dialogues ou des vers.
On utilise souvent une formule mnémotechnique pour les différencier : "Une orpheline n'a pas de passé, une veuve n'a pas d'avenir" (l'orpheline est la première ligne d'un paragraphe, et la veuve la dernière). On peut aussi se souvenir que dans l’expression « veuves et orphelines », la veuve est en premier (donc haut de page), l’orpheline en second (donc bas de page).
Texte issu de Wikipedia.

Prise en charge par les navigateurs (compatibilité).

Firefox est à la traîne (2024) pour ce qui est du traitement des deux propriétés orphans et widows.

1
Propriété
orphans
2
Propriété
widows
Estimation de la prise en charge globale.
94%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la propriété orphans.

Voir aussi, dans la spécification "Module CSS - Fragmentation".

La spécification CSS Fragmentation Module regroupe tout ce qui concerne la fragmentation : sauts de page, de colonnes, segmentation d'un élément sur deux pages ou deux colonnes, gestion des veuves et orphelines, etc.

Propriétés :

box-decoration-break
Gestion de la présentation des éléments fragmentés sur plusieurs lignes.
break-after
Interdit ou impose des sauts (de page, de colonne...) après l'élément.
break-before
Interdit ou impose des sauts (de page, de colonne...) avant l'élément.
break-inside
Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
widows
Définit le nombre de lignes qui doivent rester en haut des pages ou des colonnes.