initial-letter
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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.
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 spécifié |
| Type d'animation | by computed value type |
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
<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
.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
<p class="four">Lettrine : valeur d'enfoncement = 4</p>
<p class="same">
Lettrine : valeur d'enfoncement non déclarée (identique à la taille)
</p>
<p class="two">Lettrine : valeur d'enfoncement = 2</p>
<p class="one">Lettrine : valeur d'enfoncement = 1</p>
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;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Inline Layout Module Level 3 # sizing-drop-initials |
Compatibilité des navigateurs
Voir aussi
- Le pseudo-élément
::first-letter - La pseudo-classe
:first-child - Lettrines en CSS (angl.) sur Oddbird (2017)