How to Set Justified Text With CSS

Using the Text-Align Property to Justify Text

justified text
justified text. Image courtesy J Kyrnin

Justified text is a block of text that aligns on the left right sides. This effect is accomplished by adjusting the word and letter spaces in each line of text to make each line the same length. This effect is called full justification. You justify text in CSS using the text-align property.

How Does Justification Work?

The reason you often see an uneven edge on the right side of a block of text is each line of text is not the same length.

Some lines have more or longer words while others have fewer or shorter words. To justify a block of text, extra space must be added to some lines.

Every web browser maker has its own algorithm for applying the extra spaces within a line. The browsers look at word length, hyphenation and other factors to determine where to put the spaces. As a result, justified text may not look identical from one browser to the next. However, major browser support is good for justifying text with CSS.

How to Justify Text

Justifying text with CSS requires a section of text to justify that is inside a block with a set width. That second bit is important. If the width on the container element is not set, justification still works, but it is more difficult to maintain because you won't know how much text you need to create a block of text to be justified.

After you have a block of text to justify, it's just a matter of setting the style to justified with the text-align style property.

text-align: justify;

When to Justify Text

Justified text can be hard to read. When you justify text, lots of extra space may be added between some words on the line. Those inconsistent gaps make the text more difficult to read. This is especially important on web pages, which can be difficult to read already because of lighting, resolution or other hardware quality.

The blank spaces sometimes line up with one another to create rivers of white space in the middle of the text. On extremely short lines, justification can cause awkward lines that contain one word with extra spaces between the letters themselves.

The best time to justify text occurs when the lines are long and the font size is small. There is no hard and fast number for the length of the line or the size of the text; use your best judgement. 

After you apply the text-align style to justify text, test it to make sure the text doesn't have rivers of white space. The easiest way to do this is to view it with squinted eyes. The rivers stand out as blotches of white in an otherwise gray block of text. If you see rivers, you should make changes to the text or the width of the text block to get rid of them.

Only use justification after you've compared it to left-aligned text as seen in this article. It is usually more readable. You should justify text because you've chosen to justify the text for design purposes. Don't justify text simply because you can.