W3C home > Mailing lists > Public > www-style@w3.org > October 2013

Re: [css-ui] text-overflow: fade ?

From: Rik Cabanier <cabanier@gmail.com>
Date: Thu, 3 Oct 2013 12:46:10 -0700
Message-ID: <CAGN7qDDt_wp=oD2ER=9uq8KRXELTp246L0cxO6BpNd_n1yg9zQ@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
Wouldn't this be trivial to implement with masking and a linear gradient.
ie:
p {
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1)
80%,rgba(0,0,0,0) 100%);
}


On Tue, Oct 1, 2013 at 3:55 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> I recently received a request from a Blackberry implementor to look
> into specifying a "fade" value for text-overflow.  It would have the
> effect of fading overflowing content over the space of 1em, rather
> than dropping content and inserting an ellipsis.
>
> This effect is commonly used in Android apps, and currently requires
> some difficult hacking around with masking to achieve a bad simulacrum
> of the effect.
>
> I like the idea quite a bit - it's familiar to a lot of people,
> non-intrusive, and in my opinion rather attractive.
>
> Variants on this idea:
>
> 1. Make the amount of fade controllable, by providing an optional
> length along with the "fade" keyword.  This defaults to 1em.
>
> 2. Make the amount of fade somewhat dynamic, so that a line that just
> *barely* overflows won't pop in with a full-power fade.  Basically,
> make the fade size the minimum of 1em and the overflow amount.
>
> Thoughts?
>
> ~TJ
>
>
Received on Thursday, 3 October 2013 19:46:37 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 3 October 2013 19:46:37 UTC