Letter-spacing - Propriété CSS

Schéma de la syntaxe de letter-spacing.

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

• length est une valeur numérique suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport à la taille des caractères.

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 que letter-spacing ajoute 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.

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.

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

Valeurs pour 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 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; (normal) letter-spacing: inherit; letter-spacing: revert; letter-spacing: revertLayer; letter-spacing: unset;

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

Exemple d'animation de letter-spacing.

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

Sérialisation et manipulation de letter-spacing par programme.

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

let el = document.getElementById('id'); el.style['letter-spacing'] = '0.2em'; // ou let el = document.getElementById('id'); 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.

let el = document.getElementById('id'); let value = el.style['letter-spacing']; // ou let el = document.getElementById('id'); let value = 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. A défaut, ce sera la valeur initiale de la propriété.

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

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('letter-spacing');

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


$('#id').css('letter-spacing', '0.2em');
// ou
$('#id').css('letterSpacing', '0.2em');


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.

let value = $('#id').css('letter-spacing');

Autres exemples de code.

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

Faites le test vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété letter-spacing et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de letter-spacing. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages. Toutes les autres unités sont converties en pixels.

Exemple interactif avec la propriété letter-spacing.

(1) Pangramme anonyme.

Compatibilité des navigateurs avec letter-spacing.

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

1

Propriété
letter-spacing

Estimation de la prise en charge globale.

98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

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

Caniuse

Histoire de la propriété letter-spacing.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant letter-spacing. Définition initiale de la propriété word-spacing dans la première version de langage CSS.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant letter-spacing. La valeur inherit est acceptée par la propriété word-spacing.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Texte - Niveau 3

  Ce module de spécification niveau 3 définit les contrôles typographiques de CSS, c'est à dire les règles de transformation d'un texte source en texte formaté, avec retours à la ligne. De nombreuses propriétés contrôlent l'alignement et la justification des textes, les règles de césure, l'espacements des caractères ou des mots, le regroupement des espaces successifs, etc.
  Ces règles sont souvent dépendantes du langage, il est donc conseillé aux auteurs de spécifier la langue dans lequel le texte est écrit (attribut lang pour le HTML). Il peut même être nécessaire de préciser le système d'écriture utilisé en particulier pour les langues coréenne, japonaise, mongolienne, etc. A défaut la mise en forme typographique sera moins fine.

  Concernant letter-spacing. Pas de modification concernant la propriété letter-spacing.
  

  27 Janvier 1999

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  

• Module CSS - Texte - Niveau 4

  Ce niveau 4 de ce module de spécification décrit les propriétés qui agissent sur les règles typographiques : alignement et justification du texte, espacement des mots ou des caractères, règles de césure, etc.
  Par rapport au niveau 3, plusieurs nouvelles propriétés ont été ajoutées, en particulier concernant les ruptures en fin de lignes, les césures, les espacements avant et/ou après le texte, etc.

  Concernant letter-spacing. Les valeurs en pourcentages sont acceptées par la propriété letter-spacing.
  

  22 Septembre 2015

  Document de travail.

  

  

  

A propos de la gestion des textes, voir aussi.

Tout ce qui concerne la gestion des textes (alignement, espacements, césure, débordement, etc...) est décrit dans la spécification Module CSS - Texte. La propriété letter-spacing dans ce module, ainsi que les propriétés suivantes :

Propriétés :