`Initial-letter` - Propriété CSS

initial-letter

Résumé des caractéristiques de la propriété `initial-letter`

Description rapide

Définit les paramètres des lettrines.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Valeurs prédéfinies

normal | drop | raise

Pourcentages

Ne s'appliquent pas.

Valeur initiale

normal

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété initial-letter passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Mise en page en ligne

Références (W3C)

CSS Inline Layout Module Level 3

Statut du document: WD (document de travail)

Schéma de la syntaxe de `initial-letter`.

Schéma syntaxique de la propriété initial-letter.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

number est un nombre positif.
integer est un nombre entier positif.

Description de la propriété `initial-letter`.

initial-letter permet de définir facilement des lettrines : taille du caractère et position verticale de ce dernier.

En imprimerie, une lettrine est une lettre majuscule, d’une taille supérieure à celle des caractères employés pour le texte, que l’on place au début d’un chapitre ou d’un paragraphe et qui peut occuper une ou plusieurs lignes en repoussant le texte.

Lettrine du moyen-âge, dessinée, peinte ou dorée à la main

Lettrine moderne, réalisable en CSS ou sur les traitements de texte

Il est possible depuis longtemps de créer des lettrines avec CSS en utilisation seulement le pseudo-élément ::first-letter mais les possibilités sont limitées. initial-letter offre un moyen plus paramétrable pour obtenir le même résultat. Il s'applique lui aussi sur le pseudo-élément ::first-letter.

Lorsqu'un paragraphe commence par un signe de ponctuation, initial-letter le transforme en lettrine avec la première lettre rencontrée. C'est le cas de signes suivants :

Point d'exclamation ( ! ).
Point d'interrogation ( ? ).
Guillemet double et apostrophe ( " ' ).
Dièse ( # ).
Dollar ( $ ).
Pourcentage ( % ).
Et commercial ( & ).
Parenthèse ouvrante ou fermante ( () ).
Crochet ouvrant ou fermant ( [] ).
Accolade ouvrante ou fermante ( {} ).
Astérisque, signe de multiplication ( * ).
Plus, signe d'addition ( + ).
Tiret, signe de soustraction ( - ).
Slash, barre oblique, signe de division ( / ).
Signes de ponctuation : virgule, point, point-virgule, deux-points ( , ; : ).
Signes inférieur, supérieur, ou égal ( < > = ).
Underscore (ou blanc souligné) ( _ ).
Accent circonflexe ( ^ ).
Barre verticale (pipe) ( | ).

A l'heure actuelle (2025), Firefox ne traite pas encore cette propriété : les exemples ne fonctionneront pas sur ce navigateur.

Voici les propriétés et pseudo-élément à connaître au sujet des lettrines :

initial-letter :

Définit les paramètres des lettrines.

initial-letter-wrap :

Définit comment le texte doit contourner les lettrines.

initial-letter-align :

Spécifie le point à utiliser pour aligner la lettrine.

::first-letter :

Pseudo-élément désignant la première lettre du paragraphe.

Valeurs pour `initial-letter`.

initial-letter: normal;

C'est la valeur par défaut : les premières lettres ne sont pas mises en évidence : pas de lettrines.
initial-letter: 2; s

La valeur s est ici un nombre sans unité, supérieur ou égal à 1, et qui peut comporter des décimales. C'est le rapport entre la taille de la lettrine et la taille des caractères du texte. Dans notre exemple la lettrine sera deux fois plus grande que les caractères du texte.

Ce texte illustre une lettrine dont la taille est double de celle des caractères du texte.

initial-letter:2;

Ce texte illustre une lettrine dont la taille est une fois et demie celle des caractères du texte.

initial-letter:1.5;
initial-letter: 2 2; s L

Lorsque deux nombres sont indiqués, la première valeur valeur (s) est celle qui est décrite ci-dessus.
La deuxième valeur (L) est un nombre entier supérieur ou égal à 1. Il indique le nombre de lignes sur lesquelles la lettrine va se disposer.

Si la valeur L n'est pas indiquée, elle est fixée à l'entier immédiatement supérieur à la valeur s.

Ce texte illustre une lettrine dont la taille est double de celle des caractères, et disposée sur une seule ligne.

initial-letter:2 1;

Ce texte illustre une lettrine dont la taille est double de celle des caractères, et disposée sur deux lignes.

initial-letter:2 2;
initial-letter: 2 raise;

L'option raise indique une lettrine dont la ligne de base est alignée sur celle du texte. Autrement dit l'option raise est équivalente à une valeur L égale à 1.

Ce texte illustre une lettrine dont la taille est double de celle des caractères, avec l'option raise.

initial-letter:2 raise;
initial-letter: 2 drop;

L'option drop descend la lettrine de façon à ce que le haut de la lettrine soit aligné avec le haut de la première ligne de texte.

Ce texte illustre une lettrine dont la taille est double de celle des caractères, avec l'option drop.

initial-letter:2 drop;

Ce texte illustre une lettrine dont la taille est triple de celle des caractères, avec l'option drop.

initial-letter:3 drop;
initial-letter: initial; (normal) initial-letter: inherit; initial-letter: revert; initial-letter: revertLayer; initial-letter: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété `initial-letter`.

En attendant la compatibilité des navigateurs, voici comment réaliser des lettrines avec le pseudo-élément ::first-letter.

Ce texte comporte une lettrine, mais n'utilise pas la propriété initial-letter. La lettrine est réalisée avec le sélecteur par pseudo-élément ::first-letter.

Exemple interactif avec la propriété `initial-letter`.

Le simulateur applique la propriété initial-letter au pseudo-élément ::first-letter de chacun des paragraphes du texte ci-dessous.

Mode d'écriture :

initial-letter :

normal

Larousse : Une lettrine est une lettre d'une force de corps supérieure au reste du texte, pouvant être décorée, placée au commencement d'un chapitre ou d'un paragraphe.

En imprimerie, une lettrine est une lettre majuscule, simple ou ornée d’un corps supérieur à celui du caractère employé pour le texte, que l’on place au début d’un chapitre ou d’un paragraphe et qui occupe une ou plusieurs lignes.

Une lettrine est la mise en évidence de la première lettre des paragraphes du texte. Elle est plus grande que les autres caractères du document et attire le regard vers le début du texte. On peut lui attribuer une police de caractère autre que celle du texte, ainsi qu'une autre couleur. Le premier mot qui suit la lettrine est souvent en petites capitales pour effectuer une transition en douceur vers le texte courant. L'usage des lettrines montre une certaine maîtrise de l'outil informatique.

Médiéval : les manuscrits médiévaux pouvaient être enluminés à des fins décoratives, pédagogiques ou structurantes. Parmi les différentes enluminures, on trouve les miniatures, les décors marginaux et les lettrines. Ces dernières sont des initiales plus ou moins décorées, commençant un ouvrage ou bien un paragraphe et permettant d’articuler les parties principales des textes. On distingue plusieurs catégories de lettrines ; celles réalisées par l’enlumineur, dites peintes, et celles réalisées en général par le copiste, dites à l’encre.

Compatibilité des navigateurs avec `initial-letter`.

Colonne 1

Support par les navigateurs de la propriété initial-letter utilisée pour définir des lettrines.

Remarques :

(1) Ne supporte que la propriété initial-letter, pas encore initial-letter-align et initial-letter-wrap.

(2) Nécessite la préfixe -webkit-.
N'accepte pas les Web fonts sur la première lettre.

Prise en charge
des lettrines

Estimation de la prise en charge globale.

73%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `initial-letter`.

Module CSS - Mise en page en ligne - Niveau 3

Introduction de la propriété initial-letter dans ce module de spécification.

18 Décembre 2014
Document de travail.

Voir aussi...

La propriété initial-letter est décrite dans la spécification dénommée "Module CSS - Mise en page en ligne", ou CSS Inline Layout Module en anglais, ainsi que les propriétés suivantes :