Orphans


En termes typographiques une orpheline est la première ligne d'un paragraphe apparaissant isolée en bas d’une page, tandis que le paragraphe se poursuit sur la deuxième page. La propriété orphans contrôle le nombre minimum de lignes d'un paragraphe qui peut être laissé sur la première page. Cette propriété affecte essentiellement les média paginés tels que print.

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

Par exemple, si un paragraphe ne tient pas entièrement sur une page, il est éclaté là où c’est possible. Des lignes isolées d’un paragraphe peuvent apparaître sur une page avant qu’il ne se poursuive sur l’autre. C’est un comportement en général indésirable, et de nombreux traitements de textes laissent au moins deux lignes d'un paragraphe sur une page au lieux d’une seule. Vous pouvez indiquer un nombre positif (la valeur par défaut est 2) ou inherit.

Remarquez que la propriété orphans n’affecte généralement pas les media non paginés, tels que screen, cependantles navigateurs compatibles avec orphans et avec columns pourront appliquer la fonctionnalité aux colonnes. Dernier point, 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 “orphans”


À 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.