Open main menu

CDOT Wiki β

CSS GUIDE TEXT-JUSTIFY

This document is a work in progress and is subject to change.

Summary

The text-justify property selects the justification algorithm used when text-align property is set to justify.

Applicability:The text-justify property affects block-level and inline-block elements
Media Group: Visual
Inherited:Yes

Syntax

TARGET_ELEMENT{ text-justify: auto|inter-word|inter-ideograph|distribute|newspaper|inter-cluster|kashida }

Legal Values

The legal values of the visiblity property are:

  • auto - The UA determines the justification algorithm to follow.
  • inter-word - Spreads the text evenly across the line by increasing the width of the space between words only. This is the simplest and fastest full justification behavior.
  • newspaper - Both inter-word and inter-letter spacing can be expanded or reduced to spread the text across the whole line
  • inter-ideograph - letter-spacing modification only occurs for the CJK group
  • distribute - It allows letter spacing modification for most script groups (except the Devanagari group), but unlike newspaper, it does not prioritize between word spacing and letter spacing.
  • inter-cluster - Letter spacing only occurs between script-defined grapheme clusters occurring in Southeast Asian scripts. This is the Southeast Asian counterpart to 'inter-ideograph'.
  • kashida - Letter spacing may be increased between Arabic letters with the extra space being filled by kashida. The amount of kashida is controlled by the text-kashida-space property. If text-kashida-space is set to the initial value, there will be no kashida effect. This is the Arabic counterpart to 'inter-ideograph'.

Mozilla Recommended Values

Usage Examples

/* Set the text-justify property to inter-word */
div { text-justify: inter-word; }
/* Set the text-justify property to inter-word */
div { text-justify: newspaper; }
/* Set the text-justify property to inter-word */
div { text-justify: inter-ideograph; }
/* Set the text-justify property to inter-word */
div { text-justify: kashida; }
/* Set the text-justify property to inter-word */
div { text-justify: newspaper; }


Notes

Here is a list of writing systems:

  • CJK and Hangul and by extension all 'wide' characters
  • Devanagari and all South Asian scripts using baseline connector (such as Bengali and Gurmukhi)
  • South Eastern Asian scripts that do not use space between words (such as Thai, Lao, Khmer, Myanmar)
  • Cursive scripts like Arabic
  • Scripts using space between word without connector (such as Latin, Greek, Cyrillic, Hebrew, etc...) and symbol characters


Specification Conformance

Browser Compatibility

See Also