Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

letter-spacing - Propriété CSS

letter-spacing

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

Description rapide
Espacement des lettres.
Statut
Standard
S'applique à
Éléments contenant du texte.
Type de valeur
Dimension | Pourcentage
Valeurs prédéfinies
normal
Pourcentages
Calculés par rapport à la taille des caractères.
Valeur initiale
normal
Héritée par défaut
Oui
Type d'animation
Computed value : lors d'une animation, la propriété letter-spacing passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Texte
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Description.

letter-spacing définit l'espacement entre les caractères, ou plus précisément la valeur à ajouter ou à retrancher de l'espacement normal entre les caractères.

Aucun espace n'est ajouté avant le premier caractère de l'élément. En principe aucun espace ne devrait être ajouté après le dernier caractère de l'élément, mais les navigateurs appliquent cependant un espace supplémentaire après le dernier caractère. Cette précision est importante lorsque la propriété est appliquée à un élément inline, qui peut donc être précédé et suivi de caractères non concernés par l'espacement supplémentaire.

Exemple : dans cette phrase, la syllabe "ce" de espacement est incluse une balise span sur laquelle on a demandé un espacement supplémentaire de 5px.

Voir aussi la propriété CSS word-spacing pour gérer l'espacement des mots.

Interaction de letter-spacing avec le texte justifié.

L'espace supplémentaire imposé par de letter-spacing est également ajouté au dernier caractère des lignes. Si le texte est justifié, cela peut donner l'impression d'une marge plus grande sur la droite. Néanmoins cet inconvénient sera très peu visible, compte-tenu du fait qu'on ajoute généralement des espaces très petits entre les caractères.

Ce texte est justifié et un espace supplémentaire est ajouté entre les caractères.
Ce texte est justifié, mais l'espacement des lettres n'a pas été modifié. On perçoit en effet une petite différence entre les marges droites de ces deux paragraphes.

Interaction de letter-spacing avec les ligatures.

Une ligature est le remplacement d'une paire de lettres par un caractère unique de meilleure esthétique. L'activation des ligatures se gère avec la propriété font-variant-ligatures.

Lorsque l'espacement des lettres est modifié avec letter-spacing, le navigateur ne doit pas appliquer de ligature. En effet, le caractère unique de la ligature ne pourrait pas traduire l'espacement demandé.

Sur l'exemple ci-après les lettres f et i ont été remplacées par . Pour un œil exercé, la ligature est bien visible car le point du i a été fusionné avec la boucle du f. Cependant sur la deuxième et la troisième ligne, un espacement de caractères a été ajouté avec letter-spacing. Suivant le navigateur que vous utilisez il se peut que la ligature ne se fasse plus, ou se fasse encore. Dans ce deuxième cas, vous pourrez alors constater que le résultat n'est pas esthétique : l'espacement des caractères ne semble pas homogène.

Définir
Définir
Définir

Les écritures cursives.

Une écriture est dite cursive lorsque ses caractères sont lés entre eux. Écrite à la main, cela se traduit par une plume ou un stylo qui ne se lève pas du papier. De nombreuses polices sont dites cursives, car elles imitent ce type d'écriture. Certaines langues comme l'arabe s'écrivent principalement en écriture cursive.

En principe, les navigateurs ne devraient pas ajouté d'espace entre les caractères d'une police cursive. Autrement dit, la propriété letter-spacing devrait être sans effet sur ce genre de police, ou bien, les traits de liaison devraient être étirés pour toujours joindre les lettres. mais les tests montrent que ce n'est pas le cas.

Police Sofia, en écriture cursive
Police Sofia, en écriture cursive

Mécanisme d'héritage.

La propriété letter-spacing est héritée par défaut. Le mécanisme d'héritage dépend de l'unité choisie pour exprimer la valeur du parent. S'il s'agit d'une unité absolue, elle est bien sûr héritée à l'identique. Les unités relatives à une dimension de caractère (em, cap, etc.) sont également héritées en valeur calculée. Mais les pourcentages sont hérités en tant que pourcentages, c'est à dire recalculés en fonction de la taille des caractères de l'élément enfant (cependant les pourcentages sont encore très mal gérés par les navigateurs (2024).

AB
AB
Valeur de letter-spacing exprimée en em sur l'élément parent.
AB
AB
Valeur de letter-spacing exprimée en pourcentages sur le parent.

Valeurs pour letter-spacing.

  • length est une valeur numérique suivie d'une unité de dimension.
  • % est un pourcentage équivalent à une dimension.
Syntaxe de letter-spacingSchéma syntaxique de la propriété CSS letter-spacing (espacement des caractères). normal normal length / % length / %letter-spacing:;letter-spacing:;
  • letter-spacing: normal;

    Valeur par défaut. L'espace entre les caractères est celui qui est défini par la police de caractères.

  • letter-spacing: 1px;

    L'espace entre les caractères sera augmenté ou diminué de la valeur indiquée.

    Une valeur numérique positive ou négative, suivie d'une unité de dimension (voir les unités CSS de dimension). Une valeur négative provoque un rapprochement des caractères. Les valeurs décimales sont traitées. Les pourcentages sont autorisés dans la spécification mais rarement traités par les navigateurs.

  • letter-spacing: initial; letter-spacing: inherit; letter-spacing: revert; letter-spacing: revert-layer; letter-spacing: unset;

    La valeur initiale est : normal.

Animation de la propriété letter-spacing.

L'animation de letter-spacing est très fluide : les valeurs numériques sont interprétées avec de nombreuses décimales.

L'informaticien est un fainéant qui travaille beaucoup.

Manipulation de la propriété letter-spacing par programme.

Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler.

Texte échantillon

Modifier la valeur de letter-spacing en Javascript.

En Javascript, voici comment modifier la valeur de letter-spacing pour un élément el. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).


function setLetterSpacing(el) {
el.style['letter-spacing']='0.2em';
// ou
el.style.letterSpacing='0.2em';
}

Lire en Javascript la valeur de letter-spacing.

Ce code fonctionne si la propriété a été affectée directement à l'élément lui-même via l'attribut style du HTML, et non pas en passant par un sélecteur CSS.


function getLetterSpacing(el) {
alert(el.style['letter-spacing']);
// ou
alert(el.style.letterSpacing);
}

Lire la valeur calculée de letter-spacing en Javascript.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier le pourcentage) et de la prise en compte éventuelle des valeurs héritées.

Dans le cas de letter-spacing, la valeur 0 est renvoyée par le mot normal.


function getCalcLetterSpacing(el) {
alert(window.getComputedStyle(el).getPropertyValue('letter-spacing'));
}

Modifier la valeur de la propriété letter-spacing avec JQuery.


function setLetterSpacing(el) {
$(el).css('letter-spacing','0');
// ou
$(el).css('letterSpacing','0');
}

Lire la valeur calculée de la propriété letter-spacing avec JQuery.

La lecture de la propriété peut se faire avec le code suivant.


function getCalcLetterSpacing(el) {
alert($(el).css('letter-spacing'));
// ou
alert($(el).css('letterSpacing'));
}

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Simulateur.

letter-spacing :
Un quetzal réfugié en kimono achète dix pyjamas verts sur le Web. (1)

(1) Pangramme anonyme.

Prise en charge par les navigateurs (compatibilité).

Pas de problème de prise en charge à signaler pour la propriété letter-spacing.

1
letter-spacing
Estimation de la prise en charge en pourcentage du parc actuel.
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que letter-spacing.

Les spécifications CSS éditées par le W3C sont organisées en modules. letter-spacing fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Définit le caractère qui sera à utiliser comme marque de césure.
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
Définit le nombre maximal de lignes successives se terminant une césure
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
Césure des mots.
Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
Gestion des coupures de mots.
Taille des caractères de tabulation.
Alignement du texte.
Définit l'alignement des lignes d'un texte.
Alignement de la dernière ligne des paragraphes.
Définit l'espace entre les caractères adjacents (CJK).
Définit le retrait de la première ligne des paragraphe (indentation).
Sélectionne la méthode utilisée pour justifier le texte.
Définit comment gérer les espaces et les espaces multiples dans le texte.
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
Definit l'espacement autour des caractères de ponctuation CJK.
Casse du texte (minuscules, majuscules...).
Définit la gestion des retours à la ligne du texte.
Définit la gestion des espaces multiples et des retours chariot.
Définit comment les espaces successifs doivent être réduits.
Définit si comment le navigateur doit supprimer les espaces réductibles.
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
Substitue certains caractères de séparation de mots par d'autres.
Coupure des mots longs.
Normalise les caractères d'espacement (écritures CJK).
Permet d'ajuster l'espacement des mots.
Coupure des mots.