La propriété CSS widows

La propriété CSS widows spécifie le nombre minimal de lignes d'un conteneur de niveau bloc qui doivent rester en haut d'une page ou d'une colonne.

Une veuve est une ligne ou un mot isolé qui apparaît seul en haut d'une page ou d'une colonne.

Cette propriété est principalement utilisée dans les contextes de médias paginés, comme les règles @media print ou @page.

La propriété widows possède une propriété associée : orphans, qui spécifie le nombre minimal de lignes devant rester en bas de la page ou de la colonne précédente. En d'autres termes, les lignes restant à la fin de la page précédente sont des orphelines, tandis que les lignes laissées en haut de la nouvelle page sont des veuves.

Pourquoi utiliser la propriété widows

Lorsqu'un paragraphe est réparti sur deux pages ou deux colonnes, la coupure peut laisser une seule ligne isolée en haut de la page suivante. Cette ligne isolée est difficile à lire et donne un aspect peu soigné aux documents imprimés et aux mises en page multi-colonnes.

La propriété widows vous permet de définir un nombre minimal de lignes que le navigateur doit maintenir ensemble en haut de la nouvelle page ou colonne. Si le respect de la coupure laissait moins de lignes que le minimum autorisé, le navigateur déplace des lignes supplémentaires vers la page suivante pour atteindre ce seuil. Par exemple, widows: 3 garantit qu'au moins trois lignes d'un paragraphe sont transportées ensemble vers la page suivante.

Associez widows à orphans pour contrôler les deux extrémités d'une coupure : orphans protège le bas de la page qui se termine, widows protège le haut de la page qui commence.

Info

Les valeurs négatives sont invalides. La valeur doit être un entier positif.

Valeur initiale	2
S'applique à	Les éléments conteneurs de type bloc.
Hérité	Oui.
Animatable	Non.
Version	CSS2
Syntaxe DOM	object.style.widows = "3";

Syntaxe

Valeurs CSS de widows

widows: <integer> | initial | inherit;

Exemple de la propriété widows :

Exemple de code CSS widows

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: Roboto, Helvetica, sans-serif;
      }
      hr {
        margin: 50px 0;
      }
      .example {
        margin: 30px auto;
        width: 800px;
      }
      @media print {
        .text {
          padding: 20px;
          background-color: #fff;
          columns: 10em 3;
          column-gap: 2em;
          text-align: justify;
        }
        .text p {
          widows: 2;
        }
      }
    </style>
  </head>
  <body>
    <h2>Widows property example</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
        </p>
        <p>
          Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
    </div>
  </body>
</html>

Essayez vous-même »

Note

La propriété widows ne prend effet que dans les contextes fragmentés — médias paginés (aperçu avant impression, @page) ou mises en page CSS multi-colonnes. Sur une page web normale à défilement continu, il n'y a pas de sauts de page ou de colonne, et la propriété n'a donc aucun effet. L'exemple ci-dessus utilise @media print pour le démontrer : ouvrez l'aperçu avant impression du navigateur pour voir l'effet.

Quand la propriété s'applique et quand elle ne s'applique pas

Pour que widows ait un effet, trois conditions doivent être réunies :

Le contenu est fragmenté — soit sur des pages imprimées, soit dans des blocs multi-colonnes.
La propriété est définie sur un conteneur de bloc (comme un <p> ou un <div>), et non sur du texte en ligne.
La coupure se produit à l'intérieur du bloc concerné. Utilisez page-break-inside (ou break-inside: avoid) lorsque vous souhaitez empêcher un bloc entier de se diviser.

La prise en charge de widows par les navigateurs est inégale en dehors de l'impression. Les moteurs d'impression (génération de PDF, aperçu avant impression) la respectent largement, tandis que la prise en charge dans les mises en page multi-colonnes varie selon les navigateurs ; traitez-la donc comme une amélioration progressive plutôt qu'une garantie.

Valeurs

Valeur	Description
`<integer>`	Spécifie le nombre minimal de lignes devant rester en haut d'une page ou d'une colonne. Les valeurs négatives sont invalides.
initial	Applique la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Entraînement

Pratique

Quelle affirmation est correcte concernant la propriété CSS widows ?

La valeur entière spécifie le nombre de lignes pouvant rester à la fin d'une page ou d'une colonne.Cette propriété n'est jamais utilisée avec la règle @media.La propriété widows a une propriété associée : orphans.C'est une propriété animatable.