Telephone: 01932 355 222

Mobile: 07918 952 874

PWS Ltd web editorial services

Text justification – issues and techniques

Keywords: HTML, CSS3, PDF, readability, dyslexia, hy­phenation, word spacing, letter spacing, glyph resizing, PDF, HTML

13 June 2009

Justified text used inappropriately can cause serious readability problems. However, handled with care, and with the aid of the right software, it can work well in PDF-based con­tent. But it may be some time before it can be made to work as well in web pages due in part to the limitations of current browsers. The CSS3 work­ing draft offers some intriguing options for the future, but limited browser support remains a problem.

The image below shows two versions of an extract from Robert Bringhurst's The Elements of Typographic Style.1

Two columns of justified text. The text in the first column is evenly spaced but the text in the second column has large gaps between words.

The technical differences between the two examples

Both examples use word spacing to achieve straight column edges on each side. But the left-hand column also employs letter spacing and letter (or glyph) resizing as well as hyphenation to distribute the text more evenly along each line. In addition, the text in the right-hand column contains another common problem, namely double spaces between sentences (the subject of the extract). Because of all these factors the left-hand column is easier to read.

Defining the problem

With simple justified text (as seen in the right-hand column above) the uneven variation in spacing between words makes the text more difficult to read because, instead of moving smoothly along the line, the eye has to jump from word to word. For people with certain disabilities such as dyslexia the problems can be serious; justification can interfere with their ability to understand the text at all. (In the UK, dyslexia affects 10% of the population, 4% of them severely.)

Rivers of white

The problem for dyslexic people occurs because large gaps between words are more likely to line up above one another than are the smaller gaps typical of more evenly spaced text. When they do, readers may perceive highly distracting white patterns flowing through the page that can become more prominent than the text itself. The effect is known as "rivers of white" and it can make reading difficult, if not impossible.

Screen magnifier users

Uneven word spacing can also cause problems for people with various vision impairments who use screen magnification software. For these people the already exaggerated spaces between words are magnified still further, making the gaps even harder to jump across.

The colour of text

For justified text to work well for all readers it must have "even colour". To check the colour of text you should squint at it until the lines appear blurred. If the shading is more or less even across each line it is said to have even colour. However, if lines appear blotchy the justification settings will need further adjustment.

How to achieve even colour

Leaving aside hyphenation for a moment, the bulk of the justification work is done through variations in word spacing. But in English there are on average five times as many letters as there are spaces, so character spacing and glyph resizing can have a significant impact. Char­acter spacing of ±3% and resizing of as much as ±2% can work well.2

Hyphenation

Also important in achieving even colour is the ability to break words across lines using hyphens. There are established rules of etiquette for hyphenation, the most important of which are:

  • Leave at least two characters at the end of a line and carry forward at least three.
  • Don't leave the end part of a hyphenated word on its own as the last line of a paragraph.
  • Avoid having more than three consecutive lines ending in hyphens.
  • Break any rule of hyphenation that fails to serve the needs of the text.3

Double spaces between sentences (don't)

A related problem – the idea that you should insert double spaces between sentences – is a myth. A popular myth, but a myth nonetheless. The additional spaces are a problem for the same reason that exagg­erated word spacing is. To reiterate the Robert Bringhurst quotation above:

"In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were en­cour­aged to stuff extra space between sentences. Generations of twentieth-century typists were then taught to do the same, by hitting the spacebar twice after every period. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit."4

Typing any white space character twice or more in succession is generally regarded as a no-no of graphic design, and all modern web browsers collapse multiple consecutive spaces to one anyway. But word processors do allow it – just say no!

InDesign, QuarkXPress, Word and HTML

Professional page layout software packages such as InDesign or QuarkXPress include fully featured text justification engines. Microsoft Word provides automatic hyphenation (although it seems it is little used) as well as word spacing justification. If working in HTML, current browser support is limited to CSS2.1 word spacing justification {text-align: justify;} (excluding, of course, the deprecated HTML variant of the same).

Hyphenation on the web

On the web soft hyphens (­ or ­) can be added manually to tell browsers where a word can be broken across lines. A soft hyphen will be displayed only when needed and, if desired, can be added multiple times to long words to give the browser options as to where a break might occur. The mark up might look like the following: hy­phen­at­ion, which might be rendered as:

	  … hy-
	  phenation
	  
	  … hyphen-
	  ation

	  or … hyphenat-
	  ion
	  

Some older browsers struggle with or ignore the soft hyphen, but all modern browsers render it correctly. However, because soft hyphens must be added manually, in the real world they aren't much used. In the future, CSS3 will no doubt provide some form of automated hyphenation such as, perhaps, {hyphenate: auto;} but as of this writing the exact form it will take is still open to debate.5

Justification in web pages

As mentioned at the top of this article the CSS3 working draft does also offer the promise of a fine level of control over text justification. There are currently a total of seven options available including:

inter-word

{text-align: justify; text-justify: inter-word;} – simple spacing between words – does not justify the last line of a content block.


newspaper

{text-align: justify; text-justify: newspaper;} – combines letter spacing and word spacing. According to the Internet Explorer reference "it is the most sophisticated form of justification for Latin alphabets."6

However, also as noted above, to date there is virtually no browser support for these.

In sum, if you have InDesign or QuarkXPress you can produce good quality justified text relatively easily. But for web pages or for word processor generated documents there are fewer tools available and a good deal more manual work may be required, at least for the time being.

Ted Page Director PWS

PDF accessibility editing, auditing and training

We specialise in PDF accessibility training, PDF accessibility editing and PDF accessibility auditing.

ted@pws-ltd.com

Top

Registered in England, number 065084100