Text-justify - Property CSS

text-justify

Summary of characteristics of the text-justify property

Quick description
Select the method used to justify the text: spacing between words or between letters.
Status
Compatibility issues ⚠
Usable for
HTML
Predefined values
auto | none | inter-character | inter-word | ruby | no-compress
Percentages
Not applicable.
Initial value
auto
Inherited by default
Yes.
Animation type
Discrète: during an animation, the text-justify property passes from one value to another without transition.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Text Module
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: CR (Candidate Recommendation)

Syntax diagram of text-justify.

Text-justify property - Syntax diagramSyntax diagram of the text-justify CSS property. See stylescss.free.fr for details. auto auto none none inter-word inter-word inter-character inter-character ruby ruby no-compress no-compresstext-justify:;text-justify:;
Syntax diagram of the 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-align property is set to 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;

    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-justify property.

    Justification by spaces between words

  • 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-justify property.

    Justification by spaces between characters

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

    With a value of no-compress, the justification process must not reduce the spaces defined by the text-spacing-trim or text-autospace . It can only increase them. If no-compress is 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.

The justification of a text can be the cause of a poor readability of this text: in fact, justification implies that the spaces between the words are not all identical, which requires an additional, albeit unconscious, effort, from the reader. The cross-character justification limits this disadvantage. On the other hand, when the lines are short, the spaces between words become increasingly important, which, not only complicates reading, but detracts greatly from aesthetics. The solution can also be to insert hyphens in the text or switch to automatic hyphenation.

Simulator.

text-justify :
The justification of a text can be the cause of poor readability of that text: indeed, justification means that the spaces between words are not all identical, which requires an additional, albeit unconscious, effort on the part of the reader. To avoid this, one would prefer, when possible, a character spacing justification.

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.

Column 1
Support of the text-justify property to indicate how the justification should be done.

Notes:

(1) Only supports inter-word values. But supports some non-standard values.

(2) Inter-word and distribute supported via the experimental platform. But the distribution verse is buggy.

1
text-justify
property
Estimated overall support.
2%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

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

See Caniuse.com for more compatibility information.
Caniuse

Historic of the text-justify property.

  • CSS Text Module Level 3

    This level 3 specification module defines the typographic controls of CSS, that is to say the rules for transforming source text into formatted text, with line breaks. Many properties control the alignment and justification of text, hyphenation rules, spacing of characters or words, grouping of consecutive spaces, etc.
    These rules are often language-dependent, so it is advisable for authors to specify the language in which the text is written (the lang attribute for HTML). It may even be necessary to specify the writing system used, particularly for Korean, Japanese, Mongolian, etc. languages. Otherwise, the typographic formatting will be less precise.

    Regarding text-justify. Introduction of the text-justify property.
    WD
    January 27, 1999
    Working Draft.
    CR
    December 22, 2020
    Candidate Recommendation.
    PR
    REC

  • CSS Text Module Level 4

    This level 4 of this specification module describes the properties that affect typographic rules: text alignment and justification, word or character spacing, hyphenation rules, etc.
    Compared to level 3, several new properties have been added, particularly concerning line breaks, hyphenation, spacing before and/or after the text, etc.

    Regarding text-justify. No change in the definition of the text-justify property.
    WD
    September 22, 2015
    Working Draft.
    CR
    PR
    REC

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:

⚠
hanging-punctuation
Langue française
Sets suspended punctuation (characters allowed to overflow into the margin).
hyphenate-character
Langue française
Defines the character that will be used as a hyphenation mark.
⚠
hyphenate-limit-chars
Langue française
Sets the minimum number of characters to allow hyphenation of a word.
⚠
hyphenate-limit-last
Langue française
Defines whether hyphenation is allowed at the end of a column, page, and so on.
⚠
hyphenate-limit-lines
Langue française
Sets the maximum number of successive lines ending in a hyphenation
⚠
hyphenate-limit-zone
Langue française
Sets the maximum number of spaces to allow or disallow hyphenation.
hyphens
Defines whether words can be hyphenated at the end of a line. The hyphenation of the words gives a more pleasant layout but can be annoying in some cases.
letter-spacing
Sets the letter Spacing.
line-break
Langue française
Defines line breaks for the CJK languages (Chinese, Japanese, Korean).
⚠
line-padding
Langue française
Adds a space at the beginning and end of lines.
overflow-wrap
Langue française
Word breaking for CJK languages and a few others.
tab-size
Langue française
Définit la taille des caractères de tabulation.
text-align
Langue française
Specifies how the element's text should be aligned.
⚠
text-align-all
Langue française
Defines the alignment of the lines of a text (synonym for text-align).
text-align-last
Langue française
Sets the alignment of the last line of paragraphs.
⚠
text-autospace
Langue française
Defines the space between adjacent characters (usable for CJK languages).
text-indent
Defines the indentation of the first line of paragraphs.
Text-justify
Select the method used to justify the text: spacing between words or between letters.
✗
text-space-collapse
Langue française
Defines how to handle spaces and multiple spaces in text.
✗
text-space-trim
Langue française
Defines whether spaces at the beginning and end of the element's text should be kept or removed.
⚠
text-spacing
Short hand property for text-spacing-trim and text-autospace. Groups character spacing information for CJK languages.
⚠
text-spacing-trim
Langue française
Sets the spacing around CJK punctuation characters.
Text-transform
Sets the text case (lowercase, uppercase, small caps...).
⚠
text-wrap
Langue française
Defines the handling of text wraps.
text-wrap-mode
Defines whether newlines are allowed in a container.
text-wrap-style
Langue française
Defines how line breaks will be made.
white-space
Defines how multiple spaces and carriage returns are restored.
white-space-collapse
Langue française
Defines how successive spaces and newlines should be treated.
⚠
white-space-trim
Langue française
⚠
word-boundary-detection
Langue française
✗
word-boundary-expansion
Langue française
word-break
Langue française
⚠
word-space-transform
Langue française
Normalize the spacing characters (CJK writings).
word-spacing
Langue française
word-wrap
Langue française
Word breaking for CJK languages and a few others.
⚠
wrap-after
Langue française
Allows or does not allow line breaks after the box.
⚠
wrap-before
Langue française
Autorise ou non les sauts de lignes avant la boite.