Ellipsis made easy
Many people have asked for an widgets like labels or buttons that can elide their text as the size of the widget underruns the text length in a visually appealing way. Text ellipses already happens: most widgets (or, since Qt abstracts that, many styles) use ‘…’. However, that doesn’t really look good and it was suggested that ellipsis could be better signified by fading out the last two letters. Dolphin has a hack to achive this with Qt 3, and it is incredibly complicated. So I sat down and looked what it takes to do it better with Qt 4. This is what the result looks like:
Note how the entire sentence is still readable now (at least for the majority of people), and it was really easy to do: I implemented a QLabel subclass that takes 6 lines of code in the paint event to do the actual fading using QGradient:
void ElideLabel::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event)
QPainter p(this);
QFontMetrics fm(font());
if (fm.width(text()) > contentsRect().width()) {
QLinearGradient gradient(contentsRect().topLeft(), contentsRect().topRight());
gradient.setColorAt(0.8, palette().color(QPalette::WindowText));
gradient.setColorAt(1.0, palette().color(QPalette::Window));
QPen pen;
pen.setBrush(QBrush(gradient));
p.setPen(pen);
}
p.drawText(rect(), Qt::TextSingleLine, text());
}
Yeah, really, that’s it. Nothing more to see here. Yes I know, The code doesn’t pass on all text flags that the QLabel API accepts, but hey, it’s a demo. One that made Peter want to replace the old algorithm in Dolphin with a QGradient-based one. The real trick here was to realize that constructing a pen with a brush inherits the gradient. Thanks to Zack for the hint!
Please support transparent-background labels.
Will be needed in TaskBar, at least, and in more and more KDE eye-candy applications.
The problem is that fading out doesn’t have clear semantics; an elipsis does. People could potentially learn the fading out thing, but a lot of people would just assume that it was some weird visual bug (I did when it was introduced to Kicker at one point). An elipsis is widely understood in computer and non-computer contexts as something that’s being continued.
I agree, good point. It has to be very clear (i.e. by having _all_ ellipsis use the fade out effect). I think people will get the meaning pretty fast.
Some practical expiriences from the usability guys would be interesting here. I remember that the fadeout effect from kicker was very well received when it was first introduced.
The current situation however is a mess since some widgets use a special fadeout mechanism, others use the ‘…’. Ideally, this all gets abstracted to the style. If QStyle doesn’t provide a generic mechanism for drawing ellipis, KStyle really should.
I once tried this with a listview, but I failed.
I wanted the ellipsis to appear in the MIDDLE of the text, because the listview often contained filenames like
/foo/bar/subfolder/foo_bar_subfolder_1234.txt
So when the listview was too narrow, I’d like the middle to be shortened, because its more important to see the serial number instead of the (repeated) name.
Can you fade out the middle, too?
Using a QLabel (and thus, this subclass) as a transparent label should just work. See section “Transparency and Double Buffering” in the QWidget docs.
No, not in this version. You are right in that fading out in the middle requires a bit more “intelligence”, since implementation wise, you need to actually start caring on how to elide the text. Still, it shouldn’t be to hard to do with two gradients and two painter calls.
I think using Gradient instead of ellipses is very intuitive. Thanks for showing this sample code, I hope it will find its ways in KDE in places where text tends to underrun.
Hm. I still haven’t made up my mind whether I prefer ellipsis or fade effect.
A love the fade effect in Kicker, where I use the elegant style.
But in your screenshot, I don’t think “Aha, there’s some text missing”. Rather my mind says that it’s just some random thing, as somebody mentioned, a visual bug.
Maybe it’s because the text isn’t cut off, and you actually can read the whole sentence. And my experience also tells me (woah, it sounds like I’m some sort of madman, hearing other voices all the time 😉 that text in windows (as in dialogs etc , not in the OS) aren’t usually cut off.
Well, it’s great to see that someone is doing it, and as you said, it would be interesting to see some feedback from those usability experts.
I’d say for something like this to go in that it should go through FD.o first. Having this (permanently) inconsistant between desktops would be bad.
Another more technical issue is that it’s really only the last letter where the gradiant is visible. You sort of notice it on the next to last letter, but not much.
So that puts a lot of importance on the last letter(s). Suppose it happened to be “. ” With a half-faded period and a blank I wouldn’t assume that there was a continuation. I think if we use this we’ll need to combine it with some other visual queues.
To me it doesn’t just feel like it’s a visual bug, it also always felt (in Kicker) like it’s dirty or something like that.
Like my contact lenses have a piece of dirt on them in that exact spot of text.
That’s not really enjoyable, so I’d rather like to see real ellipsises.