CSS TEXT-JUSTIFY
This property appears to offer a refinement on the “justify” value used in the ‘text-align’ property. Indeed, the “justify” value must be set for that property for ‘text-justify’ to have any effect.
‘Text-justify’ offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems.
Example
| div { text-align: justify; text-justify: newspaper }
<div style=”text-align: justify; text-justify: newspaper”>This is “Newspaper” justified content</div> |
Possible Values
| Value | Description |
|---|---|
| auto | The browser will determine the appropriate justification algorithm to use |
| distribute | Justification is handled similarly to the “newspaper” value, but this version is optimized for East Asian content (especially the Thai language.) In this justification method, the last line is not justified. |
| distribute-all-lines | Behavior and intent for this value is the same as with the “distribute” value, but the last line is also justified. |
| inter-cluster | Justifies content that does not have any inter-word spacing (such as with many East Asian languages.) |
| inter-ideograph | Used for justifying blocks of ideographic content. Justification is achieved by increasing or decreasing spacing between ideographic characters and words as well. |
| inter-word | Justification is achieved by increasing the spacing between words. It is the quickest method of justification and does not justify the last line of a content block. |
| newspaper | Spacing between letters and words are increased or decreased as necessary. The IE reference says “it is the most sophisticated form of justification for Latin alphabets.” |
i glanced something that said
text-justify:kashida
for arabic texts…. dont know more about it… i just oversaw it in a search result
thanks..i try yo learn about css n this blog give me good lesson, i hope this blog will improve more and more..thanks again
[...] way to do this is with the auto keyword on the padding or margins of the title, and not using a text-justify declaration (since the title only has one line of text which fits snugly in its own content box). [...]
[...] when you have only one line, justification does nothing. With CSS3, there’s a property called text-justify that lets you specify how you want the text justified. Using text-justify: distribute-all-lines, [...]
I believe this is an invalid CSS2 property and is not fully supported
Jono, this is a CSS3 website you idiot!
Huh, cool, I never thought about how justification must be really tough to pull off for spaceless languages like Japanese.
Suggestion for the article: why not add some actual example textboxes using the various types of justify?