Widows


Dans le vocabulaire typographique, une widow (une “veuve”) est la dernière ligne d'un paragraphe laissée seule en haut d'une nouvelle page ou d'une nouvelle colonne. La propriété CSS widows permet de contrôler le nombre minimum de lignes que nous acceptons de voir apparaître sur une nouvelle page. Cette propriété n'affecte que les media mis en page, tels que print.

//CSS
@media print {
  p {
    widows: 3;
  }
}

Si un paragraphe ne tient pas entièrement dans une page, il est coupé là où c'est possible. De cette façon, les lignes isolées du paragraphe peuvent apparaître sur une page avant qu'il ne continue vers la page suivante. C'est en général un comportement non désiré, et de nombreux processeurs exigent qu'il y ait au moins deux lignes sur la première page avant de poursuivre vers la page suivante. La propriété orphan (orphelin) fonctionne de la même manière. Vous pouvez lui donner soit une valeur positive (où 2 est la valeur par défaut), soit la valeur inherit.

La propriété widows n'affecte pas en général les media non paginés, tels que screen. Cependant, les navigateurs compatibles à la fois avec widows et avec columns appliqueront la fonctionnalité aux colonnes. Par ailleurs, il faut noter que la propriété n'affecte que les éléments de niveau bloc.

En résumé :

  • widows : un nombre minimum de lignes d'un paragraphe sur la seconde page.
  • orphans : un nombre minimum de lignes d'un paragraphe sur la première page.


image
Les lignes rouges sont les “widows”


À lire également dans La Cascade :

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

CSS, aider la veuve et l'orphelin, par Dudley Storey

articles en anglais :

Widows and orphans, par quicksmode
CSS last line : controlling widows and orphans, par Dudley Storey


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.