How do I justify text on both sides on Web pages?

Content:

This is a legacy document, with many references to outdated browser versions. Its content is mostly still relevant and useful.

In order to suggest that some text be justified on both sides, you can use the align="justify" attribute in HTML, or the text-align:justify declaration in CSS, or both. Browser support varies; for the CSS way, support is rel­a­tive­ly wide­spread, and for the HTML way slightly wider, but there are several bugs in the implementations. More­over, due to lack of word division and other quality of implementation issues, the presentation is often not very good-looking, especially in a narrow canvas. There are also some reasons to avoid jus­ti­fi­ca­tion which do not depend on implementation flaws. The conclusion is that jus­ti­fi­ca­tion should be used sparingly and cautiously on Web pages.

What is justification?

Justifying text can mean different things, but here we consider "justification on both sides", or "double justification", where text lines are justified both on the left and on the right. That is, all lines except (usually) the last one have equal width; the method used to achieve that is typically to leave extra space between words as needed. Such justification is very common in books and other printed matter and often regarded as an essential property of quality print­ing. On computer screens, it's more debatable. But before discussing whether we should try to justify text on our Web pages, we'll discuss the how it could be done.

Sometimes the expression right justify is used to mean what was described above. Perhaps the reason to that is that left justification is taken as self-evident, so "right justification" means justifying to the right too. However, in HTML and CSS specifications, "right justification" (achieved by using align="right" or text-align:right) for text means "ragged left": lines are justified on the right only. This is not very common, and should be used for very special effects only.

HTML way: align="justify"

In HTML, according to HTML 4 specifications, the align attribute can be used for a large number elements, though with varying syntax and semantics in details. It takes a value from a small set of alternatives which depends on the context (element). The value "justify" is allowed for the following elements:

Thus, to justify a paragraph, you could use the <p align="justify"> markup. To justify a larger part of a document, such as several consecutive paragraphs, you might slap <div align="justify"> and </div> around the part.

For the first group, i.e. for p, div, and heading elements, the align attribute is in principle deprecated, and a document using it does not conform to a "Strict" version of HTML syntax. For the second group, i.e. for elements for table markup, it is not deprecated. (It's hard to see why. The attribute is basically presentational in both cases, and the general idea is that presentational suggestions should be made in a style sheet, not in HTML.)

If you use XHTML 1.0, note that the XHTML 1.0 Transitional DTD does not allow "justify" as a value for align in p, div, h1, h2, h3, h4, h5, h6. (The Strict DTD does not allow align there at all.) This is probably due to an oversight, i.e. the change from HTML 4 was not intentional. But this means that a validator will report align="justify" there as an error.

For the first group, the meaning of align="justify" is defined as follows:

This attribute specifies the horizontal alignment of its element with respect to the surrounding context. Possible values:

For the second, table-related group, the definition is largely similar, with different wording (which uses the expression "double-justify"), but assumably with equivalent meaning. (Why separate definitions then? Well, perhaps because there are differences in other respects; the sets of other possible values for the attribute are different.)

Browser support

The align="justify" attribute is widely supported, at least starting from browser versions such as Internet Explorer 4, Netscape Navigator 4, and Opera 3.62. There are bugs and deficiencies, though. For example, Netscape sometimes leaves a line unjustified (left-aligned). This paragraph has the <p align="justify"> markup, without any style sheet rule related to alignment, so it will demonstrate how your browser treats the HTML way of justifying a paragraph.

This document, originally written in 2000, contains references to fairly old browser versions. They have been retained for historical interest.

Table cells

Important browsers such as IE do not support align="justify" for a table cell element (directly for a td or th element or indirectly via a tr element). This applies to IE 7, too. This paragraph has been put into a single-cell table so that you can see what your browser does with it. Naturally you can circumvent this problem by using the attribute for p or div elements inside a cell. Cf. to a similar restriction in Netscape's CSS support.

A margin note: using preformatted text as poor man's justification method

For completeness, let's briefly discuss a completely different "justification" method: preformatted text, using the pre element and "hand-made" justification. The point here is that it's possible but hardly useful.

It is possible  to write plain text  so that  it is  justified
when viewed in monospace font. You could do such preformatting
by hand,  or perhaps  using some  preprocessor.  And you could
then put the fill (spaces) where you want. But this is clumsy,
and the text would really  look plain text too  (although some
markup can be used), and fixed line length would be imposed.

CSS way: text-align:justify

In CSS, according to the draft CSS2 Specification, the text-align property can be used to suggest alignment, for any element that is a block-level element in CSS terms. Possible values include justify. No explicit definition is given for that really means. Obviously the meaning is expected to be intuitively more or less clear. The specification mentions: “The actual jus­ti­fi­ca­tion algorithm used is user-agent and written language dependent.” But probably no current browser actually applies algorithms that would depend on the human language used in the document, in this respect or other­wise.

There are various ways to associate CSS rules with HTML documents. To associate the declaration text-align:justify with one particular paragraph, i.e. to justify a single p element using CSS, you could embed the declaration directly into HTML, writing <p style="text-align:justify">, or you could assign a class to the element (writing e.g. <p class="special"> in HTML) and using a selector based on that (writing e.g. p.special {text-align:justify;} in a style sheet in a separate CSS file linked to the document or inside a style element in the document). This paragraph has such a declaration associated with it (using the latter technique, but that is irrelevant, or at least should be, by the specifications), so it will demonstrate how your browser treats the CSS way of justifying a paragraph.

Note that although the HTML markup align="justify" and the CSS declaration text-align:justify resemble each other and serve the same purpose, they belong to different languages, are written into different contexts, and have different syntax.

Since text-align applies to all block level elements, you could write e.g. blockquote {text-align: justify} into a style sheet to suggest justification for all block quotations in a document. In the HTML way, you would need to wrap each blockquote element into a div "container" and use align="justify"> for it, since the HTML syntax does not allow the align attribute for blockquote.

Browser support to CSS is generally defective and buggy. For text-align:justify, the situation looks relatively good. The Master Compatibility Chart (of CSS support in browsers) says:

Unfortunately, the situation is somewhat worse; see the bug list below.

At least Netscape 4.0 (on Windows) fails to support text-align for a table cell. This is probably related to general Netscape bugs in applying CSS rules to data in tables. Cf. to a similar restriction in HTML support.

The combined way

There's not much to be said about the combined way. You can use both the HTML way and the CSS way of suggesting justification, e.g. simply as <p align="justify" style="text-align:justify">, but there's not much point in doing so. Although there might be differences in exactly how a browser handles such things, it's natural to expect that the two ways lead to the same actions in implementations. Usually any browser that supports the CSS way supports the HTML way too (despite the official deprecation). An exception was mentioned implicitly above: for a table cell, IE ignores the HTML attribute but supports the CSS way. But on the other hand, if you wished to cover Netscape 4 too, you probably want to add extra markup (like div) for the cell content use either the HTML or the CSS way to that.

So it's basically a matter between selecting the two. Note that CSS support could be disabled via browser settings, and it's up to you to decide whether this is a problem or a solution. (It's certainly a solution to people viewing your document in an environment where jus­ti­fi­ca­tion makes the text hard to read due to narrow canvas.)

Browser bugs

The following is almost surely an incomplete as well as largely outdated list of browser bugs. I've tried to include those bugs in CCSPG's CSS Bugs and Workarounds that more or less directly relate to justification. Note that bugs that e.g. generally cause "styles to be lost" may affect justification too; naturally the same applies to syntax errors in the author's HTML markup or style sheet.

A rather strange effect needs to be mentioned too: if an image inside the text is taller than one line, IE may justify the text so that it leaves gaps inside words in the first line. (We present this here, since putting such a paragraph into a list would have triggered a different bug on IE!)

The references to browsers above should not be taken as more than notes about situations where a bug may manifest itself. There can be differences between platforms, versions, etc. The bugs listed above have mostly been observed on IE 4 and Netscape 4, and newer versions may have fixed them.

Quality of implementations

A rather simple algorithm can be used for justification. Assuming a given text width, which is by default determined by the width of the canvas and margins, you could just put words on a line, leaving normal spaces between them, until the next word won't fit there, and then add inter-word spacing. At the simplest, the required padding could be divided evenly between the inter-word gaps.

You would sometimes have to deal with the problem that only one word, like supercalifragilisticexpialidocious, fits into a line, or even requires more width than there's available. Then you'd need to decide e.g. whether to left-align or center it, or perhaps right-align, or add spacing between characters.

Web browsers mostly seem to use such simplistic algorithms, just with some bugs as spices. As a result, they very often leave a lot of space between words; this is naturally affected by the lengths of words and the width of the block. In English, words are rather short in the average, as compared with many other languages.

However, IE has some nonstandard CSS properties that may affect the method of jus­ti­fi­ca­tion, such as text-justify. The following table illustrates the effects of some of those values that seem to make sense for English text, in principle, and observed effects for such text. Naturally if your browser is not IE, you should not expect any effect.

text-justify
value
Microsoft’s descriptionObserved IE behavior Sample text, justified, with the given text-justify value
auto Default. Allows the browser to determine which justification algorithm to apply. inter-word is used This is sample text in English, containing both lines with short words and some elaborated expressions involving relatively long unhyphenated words, expected to cause problems in justification.
distribute Handles spacing much like the newspaper value. This form of justification is optimized for documents in Asian languages, such as Thai. Letter spacing is increased; word spacing remains constant. The added spacing appears in the first few words of a line. This often creates a rather unbalanced appearance on multi-word lines. This is sample text in English, containing both lines with short words and some elaborated expressions involving relatively long unhyphenated words, expected to cause problems in justification.
inter-word Aligns text by increasing the space between words. As described. The extra spacing needed to make a line fit the column width is divided evenly between the inter-word spacing, on each line. This is sample text in English, containing both lines with short words and some elaborated expressions involving relatively long unhyphenated words, expected to cause problems in justification.
newspaper Increases or decreases the spacing between letters and between words. It is the most sophisticated form of justification for Latin alphabets. Mostly like inter-word but with some of the added spacing directed between letters of words. This is sample text in English, containing both lines with short words and some elaborated expressions involving relatively long unhyphenated words, expected to cause problems in justification.

IE (version 5.5 and later) also recognizes the property text-align-last, which affects the horizontal alignment of the last line of text within an element's box. It applies to block-level elements, and the possible values are auto, center, justify, left, and right.

Compared to what best page layout systems for printed publications, or software like TeX, can do, the printing functions of browsers are really primitive. For high-quality formatting, it can be necessary to analyze a paragraph as a whole, trying to find a presentation which is optimal for it as a whole, instead of formatting each line individually. In problematic cases, where inter-word gaps would become excessive or too small, the algorithm might allow minor deviation from the line length ("overfull boxes"). Larger space could be left after a punctuation character that terminates a sentence. And for texts containing long words, some word division is a must - and it naturally must take place according to language-specific rules. (Web browsers generally don't split words, or they do it wrong.)

Even with the best possible software for high-quality formatting, situations arise where human interaction (intervention) is needed. When preparing a book for publication, the software might encounter pieces of text where any formatting it can produce by its rules would exceed some tolerance limits for overfull boxes, inter-word gaps, etc., that have been set in the software configuration. Then it would prompt a human being for an answer, and that person should preferably understand what the text and its notations are about so that he can make the best decision. And someone might, as part of final checking, scan through the product of the formatting algorithm, to find out any observable deviations from good typesetting, to be fixed somehow. It is possible to run such formatting programs without any possibility to fix or interactively control the process, but this has an impact on the quality of results. And in normal Web browsing situations, there is no such possibility; we can hardly imagine a browser contact the document author when it notices that it must decide between writing an overfull line and using excessive spacing!

Should text be justified?

As mentioned in the prologue, justification is normal practice in high-quality printing. But Web documents are typically viewed on screen rather than printed, and it seems that in such situations justification reduces readability, although it may at first sight give a nicer appear­ance. As WDG's Web Authoring FAQ says: “though justified text may look pretty, human factors analysis shows that ragged right is actually easier to read and understand%”. More­over, as the previous section suggests, the actual appearance of justified text will usually be worse, and sometimes much worse, than would be theoretically possible.

Web publishing is essentially different from traditional publishing of books, newspapers, etc. In particular, it is one of the strengths of the medium that presentation varies and is con­trol­la­ble by the user. For justification, this statement is well-justified. The reader might be using a browser which can nicely format the page justified when printing; this is presently just a possibility, but it will turn into reality some day. And even in the future, people will be reading Web documents under circumstances where justification is undesirable, e.g. on devices that won't even permit wide enough canvases.

It's also a matter of personal preferences. The more you personally prefer justification, the better you should understand that other people, including your (potential) readers, may have equally strong but opposite views. The possible annoyance factor has a large multiplier that originates from the bugs and deficiencies; they are not the author's fault, but they are part of the medium in practice. All human communication fails, except by accident; this is the result of a large number of factors, and there's no reason to add yet another factor.

Note that the text width is unknown to the author. The only thing you can know about it is that due to different devices, different browsers and settings, and different window widths the the width of lines varies quite a lot. So even if justified text looks good when you view it, even on different browsers, it may look badly formatted on visitors' screens. And attempts to fix the text width tend to create new, possibly much more serious problems.

The font may have great impact on the effects of justification, since word width and hence division into lines depends on font. Thus, you should check the appearance of your justified text for the different fonts that you suggest in your style sheet, as well as for commonly used default or override fonts such as Times New Roman and Arial.

The conclusion is that usually the decision between justification and no justification is best left to the user. Anyone who really wants to read justified text should get a browser that lets him specify that in a user style sheet or in preferences. For IE 4 and newer, for example, you could simply create a CSS file with content like
body, td { text-align: justify; }
and select, via the Accessibility section in the browser settings, that you want the browser to use that file as the user style sheet. (By the way, that's how I detected some of the bugs in justification I've listed.)

Thus, in particular, trying to make all text on a page justified is hardly a good idea. But justification could justifiably be used locally for special effects, in contexts where the problems and risks are tolerable. A typical example could be a page which quotes both online resources and printed publications, e.g. making some point about their differences. It would be nice to make a visual distinction between the two; and you could use, perhaps in addition to other styling, CSS rules which suggest justification for the extracts from printed publications. (You could just use class="printed" in those blockquote tags that are used for such quotations, and .printed {text-align:justify} in a style sheet.)

When you need a good-quality print copy, you might consider using a special style sheet that formats the document with justification, page breaks, etc. You would tune it for you printing environment, probably with some experimentation. (Note the usefulness of Print Preview for this purpose!) You could check the worst problems caused by justification and find some ad hoc solutions to them.

In conclusion, justification might make sense for small pieces of text pre­sented in a special way. The text should be checked for its visual appear­ance as justified in some typical browsing conditions. Adding soft hyphens (&shy;) might help to avoid problems with long words that would other­wise cause great variation in line length.