Propriété CSS initial-letter | Lettrines expliquées

La propriété CSS initial-letter crée une lettrine : elle agrandit la première lettre d'un bloc afin qu'elle s'étende sur plusieurs lignes de texte et s'aligne proprement avec le paragraphe environnant. C'est cette grande lettre d'ouverture que l'on voit souvent dans les livres, les magazines et les articles de fond.

Avant l'existence de cette propriété, les lettrines étaient simulées avec float et un réglage manuel de font-size et de marges négatives — des valeurs fragiles qui se brisaient dès que la police ou la hauteur de ligne changeait. initial-letter effectue le calcul à votre place : vous indiquez la hauteur de la lettre en nombre de lignes, et le navigateur la dimensionne et la positionne automatiquement de façon que sa ligne de base et sa hauteur de capitale s'alignent avec le corps du texte.

Elle s'applique au pseudo-élément ::first-letter (ou au premier enfant en ligne d'un conteneur de bloc), et non à l'ensemble du paragraphe.

Valeur initiale	`normal`
S'applique à	Les pseudo-éléments `::first-letter` et le premier enfant en ligne d'un conteneur de bloc.
Héritée	Non
Animable	Non
Version	CSS3
Syntaxe DOM	`element.style.initialLetter = "2 1";`

Syntaxe

initial-letter: normal | <integer> | <integer> <integer>;

La propriété accepte le mot-clé normal ou un à deux entiers positifs séparés par une espace.

Fonctionnement

La première valeur (size) contrôle la hauteur de la lettre en nombre de lignes. 3 signifie que le glyphe occupe la même hauteur que trois lignes de texte — le navigateur ajuste font-size automatiquement pour y parvenir.
La seconde valeur (sink) est facultative et contrôle le nombre de lignes dont la lettre descend en dessous de la première ligne de base. Si elle est omise, le sink prend par défaut la valeur du size, produisant une lettrine descendante classique. Un sink de 1 maintient la lettre en haut de la première ligne et produit une lettrine montante.

/* 3 lines tall, sunk 3 lines (classic dropped cap — sink defaults to size) */
initial-letter: 3;

/* 3 lines tall, sunk only 1 line — letter rises above the paragraph */
initial-letter: 3 1;

/* Reset to no effect */
initial-letter: normal;

Info

Les deux entiers doivent être positifs — les valeurs nulles et négatives sont invalides. La valeur sink ne doit pas dépasser la valeur size.

Valeurs

Valeur	Description
`normal`	Aucun effet initial-letter. Il s'agit de la valeur par défaut.
`<integer>`	Un seul entier positif définit la taille en lignes ; le sink prend par défaut la même valeur, créant une lettrine descendante.
`<integer> <integer>`	La première valeur est la taille (hauteur en lignes). La seconde est le sink (nombre de lignes dont la lettre descend). Utilisez `1` pour le sink afin d'obtenir une lettrine montante.
`initial`	Réinitialise la propriété à sa valeur par défaut (`normal`).
`inherit`	Hérite de la valeur calculée de l'élément parent.

Exemple de lettrine

Cet exemple dimensionne la première lettre à deux lignes de hauteur avec un sink de 1 (la lettre se place en haut de la première ligne, partiellement surélevée, partiellement descendante). Le margin-right empêche le texte suivant de se serrer contre la lettrine.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Slabo 27px';
        font-size: 1.5em;
        line-height: 1.5;
        padding: 40px 0;
      }
      article {
        width: 80%;
      }
      .example::first-letter {
        -webkit-initial-letter: 2 1;
        initial-letter: 2 1;
        color: #8ebf42;
        font-weight: bold;
        margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
      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.
    </article>
  </body>
</html>

Essayez vous-même »

Exemple de lettrine montante

Définissez le sink (seconde valeur) à 1 pour que la lettre agrandie se place en haut de la première ligne et s'élève au-dessus du paragraphe plutôt que d'y descendre :

.example::first-letter {
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
  color: #8ebf42;
  font-weight: bold;
  margin-right: 0.1em;
}

Un sink de 1 avec une taille de 3 signifie que la lettre fait trois lignes de hauteur mais que seul son bord inférieur descend jusqu'à la première ligne de base — le reste se dresse au-dessus de la ligne d'ouverture.

Mise en forme de la lettre initiale

Vous pouvez appliquer toute propriété fonctionnant également avec ::first-letter pour habiller la lettrine. Les approches courantes incluent :

color — utilisez une couleur de marque ou d'accentuation pour faire ressortir la lettrine.
font-size — évitez de le définir dans la même règle ; initial-letter prend en charge le dimensionnement de la police.
font-family — associez une police décorative d'affichage à la lettrine tandis que le corps utilise une autre police.
font-weight — les lettrines en gras sont traditionnelles en typographie éditoriale.
margin-right — ajoutez un petit espace (0,1–0,6 em) entre la lettrine et le texte suivant.
padding — ajoutez de l'espace entre le glyphe et tout background-color ou border.
color — définissez une couleur de texte contrastée.

p::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  font-family: Georgia, serif;
  color: #b5451b;
  font-weight: bold;
  margin-right: 0.15em;
  padding: 0.05em 0.1em;
  background-color: #fdf3ee;
}

Compatibilité navigateur et solution de repli

initial-letter est largement pris en charge dans Safari et Chrome/Edge (Blink), mais Firefox ne l'implémente pas encore. Fournissez toujours une solution de repli afin que la page reste présentable dans les navigateurs non compatibles.

Avertissement

Utilisez le préfixe -webkit-initial-letter conjointement avec la propriété sans préfixe pour couvrir les anciennes versions WebKit/Blink.

Solution de repli par amélioration progressive

La règle @supports vous permet d'appliquer la propriété moderne uniquement là où elle fonctionne, et une mise en page plus simple basée sur float partout ailleurs :

/* Fallback for Firefox and older browsers */
p::first-letter {
  font-size: 3.5em;
  font-weight: bold;
  float: left;
  line-height: 0.65;
  margin: 0.05em 0.1em 0 0;
}

/* Override with the proper property where supported */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  p::first-letter {
    font-size: unset;
    float: unset;
    line-height: unset;
    margin: unset;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

L'approche float nécessite un réglage manuel de line-height et de margin pour aligner visuellement la lettre — c'est précisément la configuration fragile que initial-letter remplace. Le bloc @supports réinitialise proprement ces valeurs manuelles et applique la propriété standard.

Quand utiliser `initial-letter`

Utilisez initial-letter lorsque :

Vous souhaitez des lettrines éditoriales qui restent alignées même si le lecteur modifie la taille de police de son navigateur.
Vous réalisez des mises en page de style magazine, des articles de fond ou des pages de chapitres de livres.
Vous pouvez tolérer l'absence de support Firefox grâce à une solution de repli avec float.

Évitez-la lorsque :

La première « lettre » est en réalité un chiffre, un emoji ou un signe de ponctuation — l'alignement visuel peut être inattendu.
Vous avez besoin d'un contrôle précis au pixel sur la position dans tous les navigateurs actuels sans solution de repli avec float.

Propriétés associées

::first-letter — le pseudo-élément ciblé par initial-letter.
::first-line — mise en forme de la première ligne d'un bloc.
float — la méthode classique (pré-CSS3) pour simuler une lettrine.
font-size — dimensionner le texte manuellement quand initial-letter n'est pas pris en charge.
line-height — détermine la grille de lignes sur laquelle la lettrine s'aligne.
text-indent — un autre outil typographique de première ligne, souvent utilisé avec les lettrines.

Pratique

Quel est le but de la propriété CSS 'initial-letter' ?

Elle est utilisée pour définir un style spécifique à la ponctuation dans un texte.Elle est utilisée pour créer un effet de lettrine descendante ou montante sur la première lettre d'un paragraphe.Elle est utilisée pour aligner le texte verticalement dans une ligne.Elle est utilisée pour définir la taille et le type d'alignement de la lettre initiale, permettant de la suréléver ou de la faire descendre.Elle est utilisée pour définir la taille de police d'un paragraphe.