Line-wrap display in text editors
an information design
Dave Yost
When you're using a text editor that is wrapping long lines of text, it can be impossible to tell whether a line break is a "hard break" associated with an EOL (end-of-line) character in the data or a "soft break" for display only.
One resulting problem is that many spurious-line-break formatting errors (such as the one in this sentence) are missed because an errant line break can't be seen
when it happens to be near the full displayed width in the text editor.
We'll show several different ways of displaying line breaks using the following example. The only line-break clue in the text is an initial capital letter, an unreliable clue because there is a spurious line break somewhere. Here is the example, unadorned:
Most text editors allow you to turn on an indicator for the EOL character, as in this example:
but end-of-line indicators
- add clutter right in the line of fire of the text
- are all over the place horizontally
- give you no indication on the left side of the window, where you often need to look to evaluate whether line breaks are in the right places. In our example, we probably will want to match up line breaks with capital letters.
New designs
It would be nice to have a wrap indication on the left side.
One way to distinguish new lines from continuation lines is to display an EOL character to the left of all new lines, possibly also showing the EOL character on the right, as in this example:
The preceding technique also has the benefit that it exposes the lower extent of text if the text ends within the window. (There is a pathological case, though. If the last line has no trailing EOL character and has enough space characters in it to wrap to one or more extra lines, you won't have even a hint that those space characters are there. An EOF character would be needed to solve this problem.)
Another way to distinguish new lines from continuation lines is to display a continuation character to the left of all continuation lines, as in this example:
The following example is like the previous one except that it displays a gray border instead of a continuation character:
Here is the previous example again, but with a lighter gray border to the left of all new lines as well as the darker band to the left of continuation lines.
In a text editor like this one, which provides a fair amount of space to the left of text, I rather like the idea of this unobtrusive, light gray left border because it makes clear where the actual left edge of text is. This can be difficult to guess, for example, when all the text lines contain initial spacing. Without the visual indication, it is difficult to click the cursor exactly at the beginning of the line. (This is especially hard to do in some word processors where the cursor changes to another function when you move to the left of the beginning of text.) The gray band is also useful for displaying the lower extent of text if the text ends within the window.
My preferred design
Here we display a line break using a separator line on both sides. The separator is on both sides because it is useful on both. The right separator extends leftward to the end of the text so you can associate it easily with its text and so you can see any trailing space characters on the line. It extends all the way to the right border so you can easily notice it and see it in the context of others above and below. A gray border on the left is included as well, for reasons given following the previous example. You can tell which is the last line and that it has no trailing EOL character.
A related topic - unwrapped lines too long to display
When you're using a text editor that is not wrapping long lines of text, it's nice when the editor shows you at a glance whether a line extends beyond the right edge of the window or not. Most don't, as in our example:
In the old days back in the 70s, the Rand Editor displayed a '>' character on the right border if a line was too wide to display, and a '|' character if not:
A modern graphical presentation of this information, by contrast, can be very compact, unobrusive, unambiguous, and aesthetically pleasing.
Also, when you roll the mouse over the right edge of an extra-long line, it would be useful if a pop-up would appear that let you know how many more characters there are on the line and what is at the end.
http://Yost.com/computers/line-wrap-display/ - this page
1999-10-06 Created
1999-10-10 Modified