Description des propriétés CSS orphans
et widows
.
Résumé des caractéristiques de la propriété orphans
2
orphans
passe progressivement d'une valeur à une autre.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.
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 pourorphans
, 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 pourwidows
, quitte à rejeter le paragraphe entier sur la deuxième colonne, laissant un vide en bas de la première colonne. La valeur initiale est :
.2
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.
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
.
Prise en charge par les navigateurs (compatibilité).
Firefox est à la traîne (2022) pour ce qui est du traitement des deux propriétés orphans
et widows
.
orphans
widows
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que orphans
.
Les spécifications CSS éditées par le W3C sont organisées en modules. orphans
fait partie du Module CSS - Fragmentation (CSS Fragmentation Module). Les définitions suivantes sont également décrites dans ce même module.