letter-spacing - Propriété CSS
Résumé des caractéristiques de la propriété letter-spacing
normal
normal
letter-spacing
passe progressivement d'une valeur à une autre.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.
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 fi
.
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.
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
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).
letter-spacing
exprimée en em
sur l'élément parent.
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.
- 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.
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.
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.
(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
.
letter-spacing
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.