Much has been published regarding the usability issues associated
with horizontal scrolling. This note covers another issue
associated with failure to word wrap that may be more serious.
The three figures below illustrate normal text (Figure 1),
enlarged text
without word wrapping
(Figure 2) and enlargement with word wrapping (Figure 3). These
figures will demonstrate just how inefficient enlargement without word
wrapping can be. Figure 2 shows a 8:1 noise to signal ratio. On
average the noise ratio due to enlargement without word wrapping is the
(lpv-1: 1), where lpv
denotes lines per viewport.
Failure to word wrap often results from attempts to enlarge text.
Firefox and Safari allow enlargement of text only as menu options, and
Internet explorer allows this feature through the Internet Options /
Accessibility dialogue box. Poorly constructed web content often fails to support these accessibility features of user agents by failing to word wrap.
Figure 1: The image text illustrated above
fits horizontally in
the area allotted. Word wrapping is in tact.
Figure 2: The image above contains the same text as Figure 1.
The height and width are the same. The only difference is
that the text has been enlarged 200% font size with no word
wrapping. Neighboring lines are not connected logically.
Figure 3 This illustrates enlargement with word wrapping. There is less data than Figure 1, but all lines are connected logically.
Figure 1: represents one screen of a normal presentation of the article Understanding SC 1.4.4
in the Understanding WCAG 2.0 document. In this presentation the last word of
each line is the immediate predecessor of the first word of the next line. Even though the words
are organized in a rectangular array of 132 words, they form a logical sequence. There is no noise.
Figure 2 represents a truncated, enlarged presentation of the same article. Note that the
last word of each line is not the immediate predecessor of the first word of the next. The
visible lines are not logically connected. There are gaps in information. Compare the
highlighted lines in Figures 1 and 2. The line in Figure 1 links logically to its predecessor
and successor lines. In Figure 2 the predecessor and successor lines are logically disjoint.
The net effect is that when you read a line in Figure 2, only that one line contains useful information. All the
other visible lines are just disjoint noise. In the case of the highlighted line,
there are 4 words of information compared to 34 words of noise (8.5: 1). On the average the
noise to signal ratio is 8:1. That is significant data loss, and it is visually confusing.
Figure 3: illustrates the same content. It enlarges with word wrapping. Figure 3 displays
less information (41 words) than Figure 1 (132 words), but the noise to information ratio is
the same for Figure 1 and Figure 3, namely 0:1. Both figures include no noise. Compared
to Figure 2 with its 8:1 noise to signal ratio, word wrapped text is dramatically
superior.