Text-justify - Propriété CSS

Schéma de la syntaxe de text-justify.

Description de la propriété text-justify.

La propriété text-justify définit la méthode utilisée pour justifier le texte. La justification suppose un étirement des lignes de texte afin de leur donner à toutes une longueur identique. Cet étirement peut se faire en augmentant les espaces entre les mots ou en jouant sur les espaces entre les caractères.

Bien entendu, cette propriété n'a d'effet que si le texte est justifié (voir propriété text-align).

Valeurs pour text-justify.

• text-justify: auto;

  Valeur par défaut. Le navigateur choisit la méthode de justification.

  Le navigateur détermines lui-même comment sera justifié les textes, en ajoutant des espaces entre les mots, ou en répartissant cet espace entre les caractères.
• text-justify: none;

  Cette valeur désactive la justification, même si la propriété text-align a la valeur justify.

  Avec la valeur none aucune justification du texte n'est réalisée. Cette valeur désactive la justification quelque soit la valeur affectée à la propriété text-align.
• text-justify: inter-word;

  La justification du texte est réalisée en ajustant les espaces entre les mots.

  Ce type de justification peut produire un résultat peu élégant lorsque les espaces entre les mots deviennent importants ou lorsque les lignes sont courtes. La solution est alors d'insérer des tirets de césure ( ­ ), solutions peu pratique, de passer en césure automatique (voir hyphens) ou de passer en justification entre les caractères.

  Ce texte est justifié par un allongement des espaces entre les mots. Sur les lignes courtes, ou qui comportent peu de mots parce que ceux-ci sont longs, le résultat peut être assez laid.

  Ci-dessous une simulation pour les navigateurs qui ne traient pas la propriété text-justify.

  

• text-justify: inter-character;

  La justification du texte est réalisée en ajustant les espaces entre les caractères.

  Ce texte et justifié par un allongement des espaces entre les caractères. Cette solution est généralement la plus esthétique, mais nécessite un traitement plus lourd.

  Dans le cas particulier de la justification des textes en arabe ou dans une autre langue comportant des caractères liés, les espaces entre les caractères liés ne doivent pas être changés.

  L'échantillon ci-dessous est une image, afin d'être visible sur tous les navigateurs, même ceux qui ne traitent pas encore la propriété text-justify.

  

• text-justify: inter-character no-compress; ⚠

  Avec la valeur no-compress, le processus de justification ne doit pas réduire les espaces définis par les propriétés text-spacing-trim ou text-autospace. Elle peut seulement les augmenter. Si no-compress n'est pas utilisé, la justification peut réduire ces espacements, sauf s'ils se trouvent au début ou à la fin d'une ligne.

• text-justify: ruby;

  Cette valeur est utilisée pour les annotations Ruby.

• text-justify: distribute; ✗

  Cette valeur est maintenant obsolète. Elle a été remplacée par inter-character.

• text-justify: initial; (auto) text-justify: inherit; text-justify: revert; text-justify: revertLayer; text-justify: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de text-justify.

Bien entendu, l'exemple d'animation ci-dessous ne fonctionnera que sur les navigateurs qui reconnaissent correctement la propriété text-justify. Nous vous conseillons d'essayer sur Firefox. L'animation alterne les valeurs inter-character et inter-word. L'effet visuel est assez discret.

Exemple interactif avec la propriété text-justify.

Compatibilité des navigateurs avec text-justify.

La plupart des navigateurs actuels ne supportent que partiellement cette propriété. Il est généralement possible de l'activer avec le flag Experimental platform features mais il est déconseillé d'utiliser cette propriété en production.

Remarques :

(1) Supporte seulement les valeurs inter-word. Mais supporte quelques valeurs non standards.

(2) inter-word et distribute supporté via la plateforme expérimentale. Mais la version de distribution est boguée.

1

Propriété
text-justify

Estimation de la prise en charge globale.

2%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

2

Opéra Mobile

2

QQ Browser

2

Baidu Browser

2

Opéra

2

Safari

Safari sur IOS

Chrome

2

Edge

2

Firefox

Chrome pour Androïd

2

Androïd Brower

2

Firefox pour Androïd

Samsung Internet

2

KaiOS Browser

Opéra mini

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

Caniuse

Histoire de la propriété text-justify.

• Module CSS - Texte - Niveau 3

  Introduction de la propriété text-justify.
  

  27 Janvier 1999

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  

• Module CSS - Texte - Niveau 4

  Pas de changement dans la définition de la propriété text-justify.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, à propos de la gestion des textes.

La propriété text-justify est décrite dans le module de spécification CSS Text Module, de même que tout ce qui concerne la gestion des textes (alignement, césure, espacements, débordement, etc...). Les propriétés suivantes figurent également dans ce module :

Propriétés :