Extending the text-overflow/overflow property to support fading out

[Jonathan Watt]

The design for the Australis theme refresh calls for tab text that needs to be
truncated to be faded out instead of using an ellipsis. This fade should be a
fixed width (say 2em) regardless of the width of the tab, and apparently needs
to work over non-solid color backgrounds (so a right-aligned <div> over the top
with a fading out gradient won't work).

Unfortunately we don't seem to have a good way to do that right now. Using an
SVG mask containing a rect with a gradient fill you can kind of get close, but
the width of the fade will vary with the width of the object to which the mask
is being applied. (Extending SVG length attributes to support CSS calc() would
help, but that's far from trivial.)

One way to cater for this use case is perhaps to extend the 'text-overflow'
property to take a value |fade <length>| or |fade(<length>)| or something.

Another more general solution might be to extend the 'overflow' property to take
a value |fade-rect(<length>, <length>, <length>, <length>)| or something like that.

Thoughts?

http://dev.w3.org/csswg/css-ui/#text-overflow0
http://dev.w3.org/csswg/css-overflow/#overflow

[fantasai]

First thought: I don't think this belongs on 'overflow'. That
says how to handle overflow, not how to style the visible content.

'text-overflow: fade <length>' seems to make sense to me. But
I can also see cases where you'd want to fade other kinds of
overflow, too, though. I've also seen cases where you want to
overlay a gray-transparent gradient, though, so it's not
necessarily a fade that's wanted.

Another consideration: do we want here a linear gradient or a
Gaussian or some other curve?

Also, this should probably go to www-style. ;)

Wrt working around the SVG mask issues -- see the CSS Masking
spec. It should handle what you want. The main issue is how
to trigger it only when there's overflow.
https://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html

~fantasai

[Jonathan Watt]

On 21/05/2013 11:04, fantasai wrote:
> First thought: I don't think this belongs on 'overflow'. That
> says how to handle overflow, not how to style the visible content.

In the case of extending 'overflow', I'd imagine the fade would go on the
outside of the clip rect rather than on the inside. I.e.:

|<--- border-box width --->|
|<--- width of the content that's inside the element --->|
fade area --->| |<---

rather than:

|<--- border-box width --->|
|<--- width of the content that's inside the element --->|
fade area --->| |<---

Combined with a matching length for 'margin-right' that would seem to work, but
very possibly it's not what you'd want in general.

> 'text-overflow: fade <length>' seems to make sense to me. But
> I can also see cases where you'd want to fade other kinds of
> overflow, too, though.

Are you thinking specifically of the overflow controlled by the 'overflow'
property, or something else?

> I've also seen cases where you want to
> overlay a gray-transparent gradient, though, so it's not
> necessarily a fade that's wanted.

When would you want that rather than a gradient mask?

> Another consideration: do we want here a linear gradient or a
> Gaussian or some other curve?

I was thinking linear would be most widely useful and keep things simple, but
maybe it's just wishful thinking.

> Also, this should probably go to www-style. ;)

Indeed. I was just looking for some moz community thoughts and sanity checking
before we take anything to www-style.

> Wrt working around the SVG mask issues -- see the CSS Masking
> spec. It should handle what you want. The main issue is how
> to trigger it only when there's overflow.

Interesting. But without some sort of calc() support in linear-gradient(), I
don't think that linear-gradient() would solve the Australis theme use case. We
basically want to mask with a mask containing a gradient producing "maximum
luminosity from the start of the element to calc(width-2em), then fades to zero
from calc(width-2em) to width".

Allowing SVG gradients to be referenced from linear-gradient() doesn't seem to
provide the flexibility we need, since the way that objectBoundingBox is defined
prevents <length>s with units from being usable inside such a mask. That's
because objectBoundingBox is defined in terms of a transform that maps 1px to be
the width/height of the element's bbox. The only realistic way to allow the
content of a mask to have percentage lengths that are resolved against the size
of the element _and_ <length>s with units is to add a third value for
maskContentUnits, I think. ("objectBoundingBox2"?)

BTW, for the Australis theme, it may be acceptable to just have the right hand
side of the text fade regardless of whether it actually overflows or not.

Thanks,
Jonathan

> https://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html
>
> ~fantasai
>

[Robert O'Callahan]

I'm pretty sure an unconditional mask with a linear gradient on the
right-hand-end of the text could be achieved using 'mask-box-image' and
slicing appropriately: http://www.w3.org/TR/css-masking/#the-mask-box-image.
That's not currently implemented in Gecko, but it's worth implementing.

A pure-CSS solution that makes the mask conditional on the text overflowing
can't be implemented using any existing spec. I agree an extension to
text-overflow would make the most sense.

Rob
--
q“qIqfq qyqoquq qlqoqvqeq qtqhqoqsqeq qwqhqoq qlqoqvqeq qyqoquq,q qwqhqaqtq
qcqrqeqdqiqtq qiqsq qtqhqaqtq qtqoq qyqoquq?q qEqvqeqnq qsqiqnqnqeqrqsq
qlqoqvqeq qtqhqoqsqeq qwqhqoq qlqoqvqeq qtqhqeqmq.q qAqnqdq qiqfq qyqoquq
qdqoq qgqoqoqdq qtqoq qtqhqoqsqeq qwqhqoq qaqrqeq qgqoqoqdq qtqoq qyqoquq,q
qwqhqaqtq qcqrqeqdqiqtq qiqsq qtqhqaqtq qtqoq qyqoquq?q qEqvqeqnq
qsqiqnqnqeqrqsq qdqoq qtqhqaqtq.q"