Propriété CSS `initial-letter`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more browser support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété CSS initial-letter définit la taille et l'enfoncement des lettrines descendantes, montantes et enfoncées. Cette propriété s'applique aux pseudo-éléments ::first-letter et aux premiers enfants en ligne des conteneurs de bloc.

css

initial-letter: normal;

/* Une valeur */
initial-letter: 3; /* 3 lignes de hauteur, ligne de base à la ligne 3 */
initial-letter: 1.5; /* 1.5 lignes de hauteur, ligne de base à la ligne 2 */

/* Deux valeurs */
initial-letter: 3 2; /* 3 lignes de hauteur, ligne de base à la ligne 2 (relevée d'une ligne) */
initial-letter: 3 1; /* 3 lignes de hauteur, ligne de base inchangée (relevée de 2 lignes) */

/* Valeurs globales */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

Syntaxe

La valeur de cette propriété peut être le mot-clé normal ou un nombre (<number>) éventuellement suivi d'un entier (<integer>).

Valeurs

normal: Le texte se comporte de façon normale et on n'a pas de lettrines.
<number>: Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.
<integer>: Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.

Définition formelle

Valeur initiale	`normal`
Applicabilité	pseudo-éléments `::first-letter` et le premier fils, en ligne (inline) d'un conteneur de bloc
Héritée	non
Valeur calculée	comme défini
Type d'animation	par type de valeur calculée

Syntaxe formelle

initial-letter = 
  normal                               |
  <number [1,∞]> <integer [1,∞]>       |
  <number [1,∞]> && [ drop | raise ]?  

<integer> = 
  <number-token>

Exemples

Définir la taille de la lettrine

HTML

html

<p class="normal">La lettrine est normale</p>
<p class="onefive">La lettrine occupe 1 ligne et demie</p>
<p class="three">La lettrine occupe 3 lignes</p>

CSS

css

.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

p {
  outline: 1px dashed red;
}

Résultat

Définir la valeur d'enfoncement

Dans cet exemple, toutes les lettrines ont la même taille, mais avec différentes valeurs d'enfoncement.

HTML

html

<p class="four">Lettrine&nbsp;: valeur d'enfoncement = 4</p>
<p class="same">
  Lettrine&nbsp;: valeur d'enfoncement non déclarée (identique à la taille)
</p>
<p class="two">Lettrine&nbsp;: valeur d'enfoncement = 2</p>
<p class="one">Lettrine&nbsp;: valeur d'enfoncement = 1</p>

CSS

css

.four::first-letter {
  -webkit-initial-letter: 3 4;
  initial-letter: 3 4;
}

.same::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

.two::first-letter {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}

.one::first-letter {
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
}

p {
  outline: 1px dashed red;
}