Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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).

css
/* 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 initialenormal
Applicabilitépseudo-éléments ::first-letter et le premier fils, en ligne (inline) d'un conteneur de bloc
Héritéenon
Valeur calculéecomme spécifié
Type d'animationby computed value type

Syntaxe formelle

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

Exemples

CSS

css
.exemple {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}

HTML

html
<p class="exemple">
  Un grand rosier se trouvait à l’entrée du jardin&nbsp;; 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