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é initial-letter permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).
/* Valeurs avec un mot-clé */
initial-letter: normal;
/* Valeurs numériques */
/* Types <number> puis <integer> */
initial-letter: 1.5; /* La première lettre occupe 1.5 lignes */
initial-letter: 3; /* La première lettre occupe 3 lignes */
initial-letter: 3 2; /* La première lettre occupe 3 lignes et
s'enfonce de deux lignes vers le bas */
/* Valeurs globales */
initial-letter: inherit;
initial-letter: initial;
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 ]?
Exemples
CSS
.exemple {
-webkit-initial-letter: 3 2;
initial-letter: 3 2;
}
HTML
<p class="exemple">
Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il
portait étaient blanches, mais trois jardiniers étaient en train de les
peindre en rouge.
</p>
Résultat
Spécifications
| Specification |
|---|
| CSS Inline Layout Module Level 3 # sizing-drop-initials |
Compatibilité des navigateurs
Chargement…