word-spacing

Exemple interactif

word-spacing: normal;

word-spacing: 1rem;

word-spacing: 4px;

word-spacing: 50%;

word-spacing: -0.4ch;

<section id="default-example">
  <p id="example-element">
    Il y avait tant de boue dans les rues qu'on aurait dit que les eaux venaient
    à peine de se retirer de la surface de la terre, et il n'aurait pas été
    étonnant de croiser un mégalosaure d'une douzaine de mètres de long, se
    dandinant comme un lézard gigantesque en haut de Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: "Amstelvar", serif;
}

Syntaxe

/* Avec un mot-clé */
word-spacing: normal;

/* Valeurs de type <length> */
word-spacing: 3px;
word-spacing: 0.3em;
word-spacing: 65%;
word-spacing: -1ex;

/* Valeurs globales */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;

Valeurs

normal

L'espacement normal entre les mots, tel qu'il est défini par la police courante et/ou le navigateur.

<length-percentage>

Définit un espacement supplémentaire en plus de l'espacement intrinsèque entre les mots défini par la police. Les valeurs en pourcentage sont calculées par rapport à la taille de la police (font-size) du texte.

Accessibilité

Utiliser des valeurs trop importantes (positives ou négatives) pour word-spacing rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.

La bonne valeur à utiliser pour word-spacing doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.

• Comprendre le WCAG sur le MDN, explication de la règle 1.4
• Comprendre le critère de succès 1.4.8 | Explications du WCAG 2.0 du W3C ^(angl.)

Définition formelle

Syntaxe formelle

word-spacing = 
  normal               |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

Exemple

Utilisation simple

Cet exemple démontre l'utilisation de base de word-spacing.

HTML

Notre HTML contient deux paragraphes de texte :

<p id="ligne1">Voici le texte de la ligne 1</p>
<p id="ligne2">Et voilà celui de la ligne 2</p>

CSS

Notre CSS applique un word-spacing différent à chaque paragraphe :

#ligne1 {
  word-spacing: 15px;
}

#ligne2 {
  word-spacing: 5em;
}

Résultat

L'exemple s'affiche comme suit :

Comparer l'espacement des mots défini avec une longueur et un pourcentage

Cet exemple démontre que les valeurs de word-spacing en pourcentage sont utiles pour la mise en page réactive du texte.

Le code affiche plusieurs paragraphes ayant le même word-spacing appliqué à un texte avec une taille de police croissante. Nous fournissons une fonctionnalité pour basculer entre une valeur de word-spacing en longueur et une valeur en pourcentage, afin que vous puissiez observer les qualités réactives de l'utilisation d'une valeur en pourcentage.

HTML

Le HTML contient plusieurs éléments HTML <p> contenant du texte, ainsi qu'un <input type="checkbox"> que nous utiliserons pour basculer entre une valeur de word-spacing en longueur et une valeur en pourcentage.

<p class="x-small">X-small font-size (0.8em)</p>
<p class="small">Small font-size (1.3em)</p>
<p class="medium">Medium font-size (2em)</p>
<p class="large">Large font-size (3em)</p>
<p class="x-large">X-Large (3.5em)</p>

<form>
  <label for="ls-toggle">
    Basculer <code>word-spacing</code> (off: <code>10px</code>, on:
    <code>15%</code>)
  </label>
  <input type="checkbox" id="ls-toggle" />
</form>

CSS

Notre CSS commence par appliquer des valeurs de font-size croissantes à chaque paragraphe successif :

html {
  font-family: Arial, Helvetica, sans-serif;
}

.x-small {
  font-size: 0.8em;
}

.small {
  font-size: 1.3em;
}

.medium {
  font-size: 2em;
}

.large {
  font-size: 3em;
}

.x-large {
  font-size: 3.5em;
}

Nous appliquons une valeur de word-spacing de 10px à tous les paragraphes par défaut. Lorsque la case à cocher est cochée, nous changeons cependant la valeur de word-spacing à 15% :

p {
  word-spacing: 10px;
}

p:has(~ form > input:checked) {
  word-spacing: 15%;
}

Résultat

Le résultat rendu est le suivant :

Tout d'abord, notez comment la valeur initiale de l'espacement des mots en longueur semble correcte lorsqu'elle est appliquée aux tailles de police plus grandes, mais elle ne rend pas bien sur les tailles de police plus petites. Maintenant, cochez la case, et notez comment l'espacement des mots en pourcentage semble approprié sur toutes les lignes, car il s'adapte à la taille de la police.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété letter-spacing
• L'attribut SVG word-spacing