CSS GUIDE TEXT-JUSTIFY
This document is a work in progress and is subject to change.
Contents
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