Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les propriétés orphans et widows

Description des propriétés Object et Object.

Object 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 Object 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 à Object ou Object ; 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 Object et Object.

  • 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 Object, 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 Object, quitte à rejeter le paragraphe entier sur la deuxième colonne, laissant un vide en bas de la première colonne.

  • orphans: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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

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 Object et Object, la propriété Object a été fixée à la valeur auto.


orphans :

widows :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a hendrerit enim. Quisque eget est vitae nibh dignissim ultricies eu at dui. Nulla egestas ullamcorper est, sed hendrerit tellus cursus dictum. In hac habitasse platea dictumst. Integer faucibus tempus libero vitae vestibulum. Duis posuere ex nec magna lobortis, eu sagittis orci pretium. Nunc congue lectus nec dolor aliquam, ac blandit eros vulputate.
Sed quis eros porta, pretium leo in, sollicitudin lectus. Sed interdum nisi metus, sit amet feugiat quam feugiat a. Vivamus in massa nisl. Donec consectetur magna vitae ipsum rutrum, eu tincidunt odio iaculis. Ut nec massa lacinia, interdum sem nec, iaculis orci. Aliquam gravida, ipsum eget cursus tristique, est mauris tempor metus, eu ultricies enim leo ut sem. Suspendisse porttitor facilisis eros, eu consectetur velit pellentesque nec. Nunc metus massa, sodales non nisi ut, dictum commodo odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Mauris ornare tellus et vulputate finibus. Maecenas eros tortor, elementum nec nisi at, condimentum volutpat ligula.

Voir aussi...

Colonnes multiples - Propriétés.

  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • column-count : Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
  • column-fill : Gère la répartition du contenu entre les colonnes.
  • column-gap : Définit l'espacement entre les colonnes.
  • column-rule : Définit tous les paramètres du trait de séparation entre les colonnes.
  • column-rule-color : Définit la couleur des lignes de séparation de colonnes.
  • column-rule-style : Choisit le type de trait pour la séparation des colonnes.
  • column-rule-width : Définit l'épaisseur du trait de séparation entre les colonnes.
  • column-span : Gère le chevauchement du contenu sur plusieurs colonnes.
  • column-width : Définit la largeur des colonnes.
  • columns : Définit les caractéristiques d'une mise en page sur plusieurs colonnes.
  • widows : Gestion des ruptures en haut de page.

Impression - Propriétés.

  • bleed :
  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • color-adjust : Autorise ou non le navigateur à optimiser les couleurs
  • size : Dimensions et orientation des pages imprimées.
  • widows : Gestion des ruptures en haut de page.

Impression - Directives.

  • @page : Caractéristiques de la page, à l'impression.