text-justify - Propriété CSS
Résumé des caractéristiques de la propriété text-justify
auto
| none
| inter-character
| inter-word
| ruby
| no-compress
auto
text-justify
passe d'une valeur à l'autre sans transition.Description.
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
).
Syntaxes pour text-justify
.
- text-justify: auto;
Valeur par défaut. Le navigateur choisit la méthode de justification.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque quam metus vitae pharetra odio pulvinar eget. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Ut auctor augue et elementum ultricies. Sed scelerisque urna eu porta dapibus. - text-justify: none;
Cette valeur désactive la justification, même si lapropriété
text-align
a la valeurjustify
.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque quam metus vitae pharetra odio pulvinar eget. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Ut auctor augue et elementum ultricies. Sed scelerisque urna eu porta dapibus. - 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. La solution est alors d'insérer des tirets de césure ( ­ ) 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éstext-spacing-trim
outext-autospace
. Si ces propriétés ne sont pas définies, 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 surtout 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
; text-justify:inherit
; text-justify:revert
; text-justify:revert-layer
; text-justify:unset
;La valeur initiale est :
.auto
Animation de la propriété 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.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
Cette propriété est encore mal reconnue (2022) : à utiliser avec précaution.
text-justify
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Safari
Safari sur IOS
Oméra mini
Voir aussi, dans le même module de standardisation que text-justify
.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-justify
fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.