Text-justify - Property CSS
Summary of characteristics of the text-justify property
auto | none | inter-character | inter-word | ruby | no-compressautoDiscrète : during an animation, the text-justify property passes from one value to another without transition.Syntax diagram of text-justify.
text-justify property.The links in the diagram provide more details about the values.
Description of the text-justify property.
The text-justify property defines the method used to justify the text.
Justification implies stretching the lines of text in order to give them all an identical length.
This stretching can be done by increasing the spaces between words or by playing with the spaces between characters.
Of course, this property only has an effect if the text is justified (see text-align property).
Values for text-justify.
- text-justify: auto;
Default. The browser chooses the justification method.
The browser determines itself how the texts will be justified, by adding spaces between words, or by distributing this space between the characters. - text-justify: none;
This value disables justification, even though the
text-alignproperty is set tojustify.Avec la valeurnoneaucune 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;
The justification of the text is achieved by adjusting the spaces between the words.
This type of justification can produce an inelegant result when the spaces between words become large or when the lines are short. The solution is then to insert hyphens ( ­ ), an impractical solution, to switch to automatic hyphenation (see
hyphens), or to pass in justification between characters.This text is justified by a lengthening of the spaces between words. On short lines, or those that have few words because they are long, the result can be quite ugly.Below is a simulation for browsers that do not tread the
text-justifyproperty.
- text-justify: inter-character;
The justification of the text is achieved by adjusting the spaces between the characters.
This text is justified by a lengthening of the spaces between the characters. This solution is usually the most aesthetically pleasing, but requires heavier treatment.In the particular case of the justification of texts in Arabic or in another language containing linked characters, the spaces between linked characters must not be changed.
The sample below is an image, so that it can be seen on all browsers, even those that do not yet process the
text-justifyproperty.
- text-justify: inter-character no-compress; ⚠
With a value of
no-compress, the justification process must not reduce the spaces defined by thetext-spacing-trimortext-autospace. It can only increase them. Ifno-compressis not used, the justification can reduce these spaces unless they are at the beginning or end of a line. - text-justify: ruby;
This value is used for ruby annotations.
- text-justify: distribute; ✗
This value is now obsolete. It has been replaced by
inter-character. - text-justify: initial; (
auto) text-justify: inherit; text-justify: revert; text-justify: revertLayer; text-justify: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,unset.
Animation of the text-justify property.
Of course, the example animation below will only work on browsers that correctly recognize the text-justify property.
We recommend trying it out on Firefox.
The animation alternates between inter-character and inter-word values. The visual effect is quite discreet.
Simulator.
Browsers compatibility with text-justify.
Most current browsers only partially support this property. It is usually possible to activate it with the flag "Experimental platform features", but it is not recommended to use this property in production.
text-justify property to indicate how the justification should be done.Notes:
(1) Inter-word and distribute supported via the experimental platform. But the distribution verse is buggy.
(2) Only supports inter-word values. But supports some non-standard values.
text-justifyproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Safari
Safari sur IOS
Chrome
Edge
Firefox
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
Samsung Internet
KaiOS Browser
Opéra mini
Historic of the text-justify property.
-
CSS Text Module Level 3
Introduction of thetext-justifyproperty.
January 27, 1999Working Draft.
December 22, 2020Candidate Recommendation.
-
CSS Text Module Level 4
No change in the definition of thetext-justifyproperty.September 22, 2015Working Draft.
See also, about text management.
The text-justify property is described in the CSS Text Module specification, as well as everything related to
text management (alignment, hyphenation, spacing, overflow, etc.). The following properties are also included in this module:
Properties:
text-align).