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)

🡇

🡅

CSS Fragmentation Module Level 4

Statut du document: WD (document de travail)

CSS Fragmentation Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

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 pour widows. 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 de widows, quitte à rejeter le paragraphe entier sur la deuxième colonne, laissant un vide en bas de la première colonne.
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, située en début de page, et la veuve la dernière, en début de page). 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 de `orphans` par les navigateurs.

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

Colonne 1

Prise en charge par les navigateurs de la propriété orphans, définissant le nombre minimum de lignes à conserver pour les paragraphes en bas d'une page ou d'une colonne.

Colonne 2

Prise en charge par les navigateurs de la propriété widows, définissant le nombre minimal de lignes à conserver pour chaque paragraphes en début de page ou de colonne.

Propriété
orphans

Propriété
widows

Estimation de la prise en charge globale.

94%

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

Historique de la propriété `orphans`.

CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

Concernant orphans. Première définition des propriétés orphans et widows dans la version 2.xx de CSS.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Fragmentation - Niveau 3

Concernant orphans. Pas de changement concernant les propriétés orphans et widow.

28 Février 2012
Document de travail.
14 Janvier 2016
Candidat à la recommandation.
Module CSS - Fragmentation - Niveau 4

Concernant orphans. Pas de changement concernant les propriétés orphans et widow.

18 Décembre 2018
Document de travail.

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

La spécification module CSS - Fragmentation 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.

Orphans

Définit le nombre de lignes qui doivent rester en base de page ou de colonne, dans chaque paragraphe.

Widows

Définit le nombre de lignes qui doivent rester en haut des pages ou des colonnes.

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

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

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

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

Syntaxes pour orphans et widows.

Animation des propriétés orphans et widows.

Simulateur avec la propriété orphans.

Prise en charge de orphans par les navigateurs.