On 05/21/2013 05:31 PM, Jonathan Watt wrote:
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?
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
_______________________________________________
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform
