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)
Statut du document: WD (document de travail)

Schéma de la syntaxe de initial-letter.

initial-letter - Syntax DiagramSyntax diagram of the initial-letter CSS property. See stylescss.free.fr for details. normal normal number number integer integer drop drop raise raiseinitial-letter:;initial-letter:;
Schéma syntaxique de la propriété initial-letter.
Les liens du schéma donnent accès à plus de détails

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 moyenâgeuse
Lettrine du moyen-âge, dessinée, peinte ou dorée à la main
Lettrine moderne
Lettrine moderne, réalisable en CSS ou sur les traitements de texte

initial-letter est une propriété qui s'applique habituellement sur le pseudo-élément ::first-letter, mais la spécification prévoit qu'elle puisse s'appliquer également à un élément inline (span par exemple) dans la mesure où celui-ci est le premier enfant d'un bloc.

A l'heure actuelle (2024), le fonctionnement n'est possible que sur le pseudo-élément ::first-letter. Et, d'autre part, Firefox ne traite pas encore cette propriété : les exemples ne fonctionneront pas sur ce navigateur.

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.

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.

initial-letter :

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.

1
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

1

QQ Browser

Baidu Browser

Opéra

1

Samsung Internet

1

Firefox pour Androïd

Edge

1

Firefox

Chrome pour Androïd

1

Androïd Brower

1

Safari

2

Safari sur IOS

2

Chrome

1

KaiOS Browser

Opéra mini

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

Histoire de la propriété initial-letter.

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 :

Propriétés :

alignment-baseline
Définit comment un élément est aligné, dans le sens vertical, par rapport à son parent.
⚠
baseline-shift
⚠
baseline-source
Définit si l'alignment vertical d'un élément doit se faire par rapport à sa premère ou sa dernière ligne de texte.
dominant-baseline
Définit la ligne de base utilisée pour les alignements verticaux de textes.
⚠
initial-letter-align
Spécifie le point à utiliser pour aligner la lettrine.
⚠
initial-letter-wrap
Définit comment le texte doit contourner les lettrines.
line-height
Définit la hauteur des lignes de texte.
⚠
text-box-edge
Définit le métrique des textes CJK.
⚠
text-box-trim
Spécifie comment la réduction des dimensions d'une boîte de texte doit se faire pour se conformer à text-box-edge (langages CJK).
vertical-align
Alignement vertical.