schooltool-developers team mailing list archive

[Tom Hoffman <tom.hoffman@xxxxxxxxx>]

fyi

Sent to you by Tom Hoffman via Google Reader: Ways to handle text
that's too long: clipping, ellipsis, fading, and selective condensing
via flow|state by Jan Miksovsky on 8/19/11

Every UI that renders textual data has to cope with the question of
what to do when text is too long to fit in the space allocated for it
in the UI. Here are some basic approaches:

Clipping. This is straightforward to do, and the result looks clean. If
the text gets clipped in the middle of a word or, ideally, a letter, it
will be obvious to a user what’s happened. In some cases, a column of
clipped letters can create a virtual border, avoiding the need for an
explicit border. (See this discussion of Cozi’s Month view.) The
biggest risk is that text will get clipped at a word boundary, and the
user will be unaware (or unsure) there is more content.





Ellipsis. The traditional client OS solution is to remove the last
character or two that would have fit, and replace those with an
ellipsis (…). The user is easily made aware of missing text. This
strategy requires the ability to quickly measure the width of text runs
at runtime—an ability current browsers lack—to determine where the
ellipsis should go.



One minor disadvantage of this technique is that, even when this
approach is possible, it can lead to visual clutter if many lines of
text will be so long that they require ellipsis. One variant of the
ellipsis technique is employed by OS/X’s Finder and various IDEs, using
ellipsis in the middle of a text run. This is particularly useful when
showing long URLs or file paths, where the final page or file name is
probably more interesting than a long list of directories in the
middle. As a side benefit, this also reduces visual clutter in cases
where many lines of text require ellipsis.



Fading. This strategy employs an alpha-blended gradient on the right
edge (or, for blocks of text, on the bottom) to make the text appear as
if it has faded out. This technique, which looks quite clean, is
beginning to get more popular as modern browsers support alpha-blended
gradients. (See the QuickUI Fader control for sample code.)





Selective condensing. This tactic can be combined with any of the above
techniques. Long strings are rendered with tighter kerning or in a
condensed font variant, permitting extra characters to be shown which
would have otherwise not been visible. If this effect is handled
carefully, users may not even be aware of it. Like ellipsis, condensing
requires the ability to measure text length. This is still not trivial
in a web browser, which will generally require text to be added to the
DOM before its width can be measured, but can be done by rendering text
in an element with “visibility: hidden”. (See the sample QuickUI
TextCondenser control.)



Things you can do from here:
- Subscribe to flow|state using Google Reader
- Get started using Google Reader to easily keep up with all your
favorite sites