word-spacing - Propriété CSS
Résumé des caractéristiques de la propriété word-spacing
normal
normal
word-spacing
passe progressivement d'une valeur à une autre.Description.
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 sonte 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%
Syntaxes pour word-spacing
.
length
est une valeur numérique suivie d'une unité de dimension.%
est un pourcentage dont l'évaluation correspond à une dimension.
- 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 unité 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.
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
; word-spacing:inherit
; word-spacing:revert
; word-spacing:revert-layer
; word-spacing:unset
;La valeur initiale est :
.normal
Animation de la propriété word-spacing
.
Ci-dessous, un exemple d'animation de la propriété word-spacing
.
Manipulation de la propriété word-spacing
par programme.
Écrire la valeur de word-spacing
en Javascript.
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';
let el = document.getElementById('id');
el.style.wordSpacing = '10px';
Lire la valeur de word-spacing
avec Javascript.
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'];
let el = document.getElementById('id');
let value = el.style.wordSpacing;
Lire la valeur calculée de word-spacing
avec 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 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');
Écrire la valeur de word-spacing
avec JQuery.
$('#id').css('word-spacing', '10px');
Lire la valeur calculée de word-spacing
avec JQuery.
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 as é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.
Simulateur.
(1) Pangramme anonyme.
Prise en charge par les navigateurs (compatibilité).
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 (2023).
word-spacing
.
word-spacing
.
word-spacing
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que word-spacing
.
Les spécifications CSS éditées par le W3C sont organisées en modules. word-spacing
fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.