Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.
Type de valeur
Dimension | Pourcentage
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)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: Ancienne norme, obsolète

Statut du document:: Ancienne norme, obsolète

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.

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

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.
Syntaxe de word-spacingSchéma syntaxique de la propriété CSS word-spacing. normal normal length / % length / %word-spacing:;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 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.

Animation de l'espacement des mots

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

Javascript
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é.

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

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

Écrire la valeur de word-spacing avec JQuery.

JQuery
$('#id').css('word-spacing', '10px');

Lire la valeur calculée de word-spacing avec JQuery.

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.

word-spacing :
Un quetzal réfugié en kimono achète dix pyjamas verts sur le Web. (1)

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

Colonne 1
Support par les navigateur de la syntaxe générale de la propriété word-spacing.
Colonne 2
Traitement correct des valeurs exprimées en pourcentages pour la propriété word-spacing.
1
word-spacing
2
Percentages
Estimation de la prise en charge en pourcentage du parc actuel.
96%
21%

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.

Propriétés.

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Définit le caractère qui sera à utiliser comme marque de césure.
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
Définit le nombre maximal de lignes successives se terminant une césure
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
Césure des mots.
Espacement des lettres.
Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
Gestion des coupures de mots.
Taille des caractères de tabulation.
Alignement du texte.
Définit l'alignement des lignes d'un texte.
Alignement de la dernière ligne des paragraphes.
Définit l'espace entre les caractères adjacents (CJK).
Définit le retrait de la première ligne des paragraphe (indentation).
Sélectionne la méthode utilisée pour justifier le texte.
Définit comment gérer les espaces et les espaces multiples dans le texte.
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
Definit l'espacement autour des caractères de ponctuation CJK.
Casse du texte (minuscules, majuscules...).
Définit la gestion des retours à la ligne du texte.
Définit la gestion des espaces multiples et des retours chariot.
Définit comment les espaces successifs doivent être réduits.
Définit si comment le navigateur doit supprimer les espaces réductibles.
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
Substitue certains caractères de séparation de mots par d'autres.
Coupure des mots longs.
Normalise les caractères d'espacement (écritures CJK).
Coupure des mots.