La propriété CSS orphans

La propriété CSS orphans définit le nombre minimal de lignes d'un élément de type bloc qui doivent rester en bas d'une page, d'une région ou d'une colonne lorsque l'élément est fractionné à une limite de fragmentation. Si respecter cette valeur laisserait moins de lignes que requis, le navigateur déplace l'ensemble du groupe de lignes vers la page ou la colonne suivante.

Cette page présente ce qu'est une orpheline, dans quels cas la propriété prend effet, sa syntaxe et ses valeurs, ainsi qu'un exemple interactif.

Qu'est-ce qu'une orpheline ?

En typographie, une orpheline est la première ligne d'un paragraphe qui se retrouve seule en bas d'une page ou d'une colonne, tandis que le reste du paragraphe continue sur la suivante. Les orphelines nuisent à la lisibilité ; cette propriété vous permet d'indiquer au navigateur de conserver un nombre minimal de lignes ensemble.

Page 1 (bottom)              Page 2 (top)
┌──────────────────┐         ┌──────────────────┐
│ ...               │        │ but the leap into │  ← orphan: just 1 line
│                   │        │ electronic ...    │     was left behind on
│ It has survived   │        │                   │     page 1 → looks bad
└──────────────────┘         └──────────────────┘

Avec orphans: 2, un paragraphe qui ne laisserait qu'une seule ligne en bas est entièrement déplacé vers la page suivante, afin de conserver au moins deux lignes ensemble.

Quand `orphans` s'applique-t-il ?

La propriété ne joue un rôle que dans les contextes fragmentés — là où le contenu est réparti entre plusieurs boîtes :

L'impression (et l'aperçu avant impression / impression en PDF), où le flux de contenu se répartit sur plusieurs pages.
Les mises en page multi-colonnes créées avec la propriété columns, où les lignes se répartissent entre les colonnes.
Les médias paginés CSS, souvent combinés avec la règle @media (ex. @media print { … }) pour n'appliquer la propriété qu'à l'impression.

Dans les mises en page à colonne unique ordinaires affichées à l'écran, il n'y a ni saut de page ni saut de colonne, donc définir orphans n'a aucun effet visible. Pour observer son comportement, consultez l'exemple ci-dessous en aperçu avant impression ou utilisez la mise en page multi-colonnes incluse.

La propriété orphans a une propriété sœur, widows, qui définit le nombre minimal de lignes autorisées en haut de la page ou colonne suivante. Elles sont généralement définies ensemble.

Valeur initiale	2
S'applique à	Éléments conteneurs de type bloc.
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.orphans = "2";

Syntaxe

orphans: <integer> | initial | inherit;

La valeur doit être un entier positif. Les valeurs négatives et 0 sont invalides et ignorées (la propriété conserve sa valeur précédente). La valeur par défaut est 2.

Exemple de la propriété orphans

Exemple de code CSS orphans

<!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;
      }
      .text {
        padding: 20px;
        background-color: #fff;
        -moz-columns: 10em 3;
        -webkit-columns: 10em 3;
        columns: 10em 3;
        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        column-gap: 2em;
        text-align: justify;
      }
      .text p {
        orphans: 4;
      }
    </style>
  </head>
  <body>
    <h2>Orphans 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>
          <span style="color: #8ebf42; font-weight: bold">Lorem Ipsum is simply 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.</span>
        </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 »

Dans cet exemple, orphans: 4 oblige au moins quatre lignes de chaque paragraphe à rester groupées en bas d'une colonne. Le paragraphe vert l'illustre bien : le navigateur maintient quatre de ses lignes en bas de la première colonne plutôt que de laisser une seule ligne isolée.

Appliquer orphans uniquement lors de l'impression

Étant donné que orphans n'affecte que le contenu fragmenté, il est courant de le limiter à la sortie imprimée à l'aide d'une media query :

@media print {
  p {
    orphans: 3;
    widows: 3;
  }
}

Cela conserve au moins trois lignes groupées en bas (orphans) et en haut (widows) de chaque page imprimée, sans affecter la mise en page à l'écran.

Valeurs

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

Propriétés associées

Ces propriétés contrôlent également la façon dont le contenu se répartit entre les pages et les colonnes :

widows — la propriété sœur ; nombre minimal de lignes en haut de la page ou colonne suivante.
page-break-inside — empêche (ou autorise) un saut de page à l'intérieur d'un élément.
columns et column-gap — configurent la mise en page multi-colonnes dans laquelle orphans peut prendre effet.

Exercice

Pratique

Que fait la propriété 'orphans' en CSS ?

Elle définit le nombre minimal de lignes dans un conteneur de type bloc qui doivent rester en bas d'une page lorsque ce conteneur est fractionné entre deux pages.Elle définit la couleur d'arrière-plan d'un élément.Elle contrôle le comportement des tableaux.Elle ajuste la couleur du texte dans un élément.Elle définit le nombre minimal de lignes dans un conteneur de type bloc qui doivent s'afficher en haut de la page suivante lorsque ce conteneur est fractionné entre deux pages.