Word-spacing - Propriété CSS
Résumé des caractéristiques de la propriété word-spacing
normalnormalword-spacing passe progressivement d'une valeur à une autre.word-spacing.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description des termes utilisés sur le schéma :
lengthest une valeur numérique suivie d'une des unités de dimension.%est un pourcentage dont l'évaluation correspond à une dimension.
Description de la propriété word-spacing.
La propriété word-spacing définit l'espace entre les mots, ou plus précisément, la valeur à ajouter ou à retrancher de l'espacement normal.
Les séparateurs de mots concernés sont essentiellement, pour les langues latines, l'espace classique et l'espace insécable ( ).
Notez que l'espace entre les caractères peut également être modifié par la propriété CSS letter-spacing.
Mécanisme d'héritage.
La propriété word-spacing est héritée par défaut, après une particularité pour les pourcentages. En effet, ceux-ci sont hérités en tant que valeurs de
pourcentages, et sont donc recalculés en fonction de la taille de caractères des éléments enfants.
100%
Valeurs pour word-spacing.
- word-spacing: normal;
Valeur par défaut. L'espace entre les mots est celui qui est défini par la police.
- word-spacing: 1px;
La valeur est un nombre positif ou négatif, suivi d'une des unités de dimension ou un pourcentage.
L'espace entre les mots sera augmenté de la valeur indiquée. S'il s'agit d'une valeur négative, l'espace entre mots sera réduit d'autant. Avec une valeur négative trop importante, les mots peuvent même se superposer.
Si la valeur est exprimée en pourcentages, ces derniers sont évalués par rapport à la taille des caractères. Mais l'indication en pourcentages souffre encore de nombreux problèmes de compatibilité.
- word-spacing: initial; (
normal) word-spacing: inherit; word-spacing: revert; word-spacing: revertLayer; word-spacing: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de word-spacing.
Ci-dessous, un exemple d'Exemple d'animation de word-spacing.
Accéder à la propriété word-spacing par programme.
Avec Javascript, modifier la valeur de word-spacing.
En Javascript, voici comment modifier la valeur de word-spacing.
Javascript accepte 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['word-spacing'] = '10px';
// ou
let el = document.getElementById('id');
el.style.wordSpacing = '10px';
Avec Javascript, lire la valeur de word-spacing.
Ce code renvoie la valeur de la propriété si celle-ci a été affectée directement à l'élément lui-même et pas en passant par un sélecteur. La valeur est renvoyée telle qu'elle a été définie, avec la même unité.
let el = document.getElementById('id');
let value = el.style['word-spacing'];
// ou
let el = document.getElementById('id');
let value = el.style.wordSpacing;
Avec Javascript, lire la valeur calculée de word-spacing.
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 word-spacing, la valeur est retournée en pixels ou en pourcentages.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('word-spacing');
Avec JQuery, modifier la valeur de word-spacing.
$('#id').css('word-spacing', '10px');
// ou
$('#id').css('wordSpacing', '10px');
Avec JQuery, lire la valeur calculée de word-spacing.
let value = $('#id').css('word-spacing');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété 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 word-spacing. On constate en particulier
que les pourcentages sont bien mémorisés en tant que pourcentages (voir le chapitre sur l'héritage).
Toutes les autres unités sont converties en pixels.
Exemple interactif avec la propriété word-spacing.
word-spacing gère l'espacement des mots, tandis que l'espacement des lettres peut être ajusté avec letter-spacing.
Compatibilité des navigateurs avec word-spacing.
La propriété word-spacing en elle-même est très bien reconnue par les navigateurs actuels. Il reste cependant quelques problèmes de compatibilité avec la
valeur exprimée en pourcentages (2025).
word-spacing qui définit l'espacement des mors dans un texte.word-spacing.word-spacingpourcentage
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Opéra
Firefox
QQ Browser
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Samsung Internet
Chrome
Edge
Opéra mini
Histoire de la propriété word-spacing.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Définition initiale de la propriétéword-spacingdans la première version de langage CSS.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
La valeurinheritest acceptée par la propriétéword-spacing.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Texte - Niveau 3
Pas de modification concernant la propriétéword-spacing.27 Janvier 1999Document de travail.
22 Décembre 2020Candidat à la recommandation. -
Module CSS - Texte - Niveau 4
Les valeurs en pourcentages sont acceptées par la propriétéword-spacing.22 Septembre 2015Document de travail.
A propos de la gestion des textes, voir aussi.
La propriété word-spacing est décrite dans la spécification CSS Text Module, de même que tout ce qui concerne la gestion des textes
(alignement, espacements, césure, débordement, etc...). Les propriétés suivantes figurent également dans ce module de spécification :
Propriétés :
text-align).