text fade?
UI Pattern: Long-Text Fade
In some software situations, online or off, text can’t be wrapped and it can’t be allowed to be fully visible. While some UI engineers choose to completely hide the text and give users an arrow to reveal everything beyond the limits (like in IE8 below), I prefer a pattern I call the “Long-Text Fade”.
The idea is simple: limit the number of characters and fade the last few into the background.
Google Chrome uses this pattern on their tab and bookmark bars.
I use this for the post tags here on Hanami Design:
Creating this UI pattern with CSS is fairly easy.
In the parent div, limit the width, hide the overflow, and prevent wrapping:
1 2 3 | overflow: hidden; white-space: nowrap; width: 200px |
Next create a PNG-24 the width of the fade you would like. Make sure it is a gradient fade from alpha 0 to 100, the 100 being the background color. Make this the background of a div or span you will absolutely position to the right. Make sure it matches the height of the parent.
Here’s what I did for the fade on the post tags of this site:
1 2 3 4 5 6 7 8 | .tag-fade { background: url(images/bg-tag-fade.png) 100% 0 repeat-y; height: 24px; position: absolute; right: -5px; top: 0; width: 70px; } |
As a bonus, here is what IE8 does when options are too many for the view:
Since Google Calendar uses something like the Internet Explorer approach for limiting how many calendar items show at once, I might explore this variation a little in the future.