Justifying Text

Justified text is text that is spaced out from the left to right margin so that the texts fills the space between the margins. For the value justify, CSS does not specify how text is stretched, or spaced out, as part of distributing it between the margins. Some implementations stretch only the spaces between the words. Others may stretch the spaces between the letters as well. Yet others may occasionally shrink spaces instead (and thus put more words on a line). Which method is used depends on the browser and on the language in which the text is displayed.

HTML has a special entity for manually hyphenating words: ­ ("soft hyphen"). When you insert it in the middle of a word, like this: hy­phen­ate, a browser may break the word at the position of the entity. If the word is not broken, the entity remains invisible. Unfortunately, at the time of writing (end of 2004), there are still browsers that insert a hyphen for every ­ without breaking the word.

In languages with long words, you may want to avoid justifying lines, unless the lines are relatively long. Long words are often stretched out to fill the line, sometimes resulting in too much space between the letters. You may have noticed this effect in newspapers, in which full justification can create rivers of white running down through a column of type. One alternative is to use hyphens. CSS2 doesn't support hyphenation. Future versions of CSS may allow you to control hyphenation. At that time, justifying such languages would be feasible, although perhaps at the trade-off of splitting words. In the meantime, you can manually insert hyphens if you want to achieve a better-looking justified appearance.

Not all browsers support justify. Those that don't usually supply a replacement, typically left in Western languages.