`Word-spacing` - Propriété CSS

word-spacing

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

Description rapide

Permet d'ajuster l'espacement des mots.

Statut

Standard

S'applique à

Éléments contenant du texte.

Utilisable sur

HTML,SVG

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é word-spacing passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Texte

Références (W3C)

🡇

🡅

CSS Text Module Level 4

Statut du document: WD (document de travail)

CSS Text Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma syntaxique de la propriété 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 :

length est 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.

Texte de l'élément parent, les mots sont espacés de 100%

Texte de l'élément enfant

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.

Animation de l'espacement des mots

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 :

normal

HTML

La propriété word-spacing gère l'espacement des mots, tandis que l'espacement des lettres peut être ajusté avec letter-spacing.

SVG

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

Colonne 1

Support par les navigateurs de la propriété word-spacing qui définit l'espacement des mors dans un texte.

Colonne 2

Support de la valeur exprimée en pourcentages pour la propriété word-spacing.

Propriété
word-spacing

Valeur en
pourcentage

Estimation de la prise en charge globale.

96%

19%

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

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

Caniuse

Histoire de la propriété `word-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 word-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 word-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 word-spacing. Pas de modification concernant la propriété word-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 word-spacing. Les valeurs en pourcentages sont acceptées par la propriété word-spacing.

22 Septembre 2015
Document de travail.

A propos de la gestion des textes, voir aussi.

La propriété word-spacing est décrite dans la spécification Module CSS - Texte, 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 :

⚠

hanging-punctuation

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).

hyphenate-character

Définit le caractère qui sera à utiliser comme marque de césure.

⚠

hyphenate-limit-chars

Définit le nombre minimal de caractères pour autoriser la césure d'un mot.

⚠

hyphenate-limit-last

Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.

⚠

hyphenate-limit-lines

Définit le nombre maximal de lignes successives se terminant une césure

⚠

hyphenate-limit-zone

Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.

hyphens

Définit si les mots peuvent être coupés en fin de ligne. La césure des mots donne une mise en page plus agréable mais peut être gênante dans certains cas.

letter-spacing

Espacement des lettres.

line-break

Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).

⚠

line-padding

Ajoute un espace au début et à la fin des lignes.

overflow-wrap

Gestion des coupures de mots pour les langues CJK et quelques autres.

tab-size

Définit la taille des caractères de tabulation.

text-align