W3C home > Mailing lists > Public > www-style@w3.org > August 2009

Re: Gradient syntax proposal

From: Brad Kemper <brad.kemper@gmail.com>
Date: Sat, 15 Aug 2009 09:02:08 -0700
Cc: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-Id: <82AF62EE-59CE-4BE1-9F98-9E505B194F3B@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>

On Aug 14, 2009, at 8:52 PM, Tab Atkins Jr. wrote:

> On Fri, Aug 14, 2009 at 8:42 PM, Brad Kemper<brad.kemper@gmail.com>  
> wrote:
>>
>>
>> Sent from my iPhone
>>
>> On Aug 14, 2009, at 5:12 PM, "Tab Atkins Jr."  
>> <jackalmage@gmail.com> wrote:
>>
>>> would be equivalent
>>> to linear-gradient(10px 10px to right 10px bottom 10px / white  
>>> black)
>>
>> I have no idea what that would look like. What does 10px bottom  
>> 10px mean?
>
> "right 10px bottom 10px".  It's a background-position.  10px from the
> right, 10px from the bottom.

Oh yeah. I read "to right" as one thing. That is just too long of a  
string of numbers just to get to the first color. Its hard to read.

>>> which is equivalent to linear-gradient(10px 10px to calc(100% -  
>>> 10px)
>>> calc(100% - 10px) / white black)
>>
>> Holy Mackeral! My head is going to explode! Who needs that much  
>> complexity?
>
> Yeah, it's complex.  But it's no more complex than a background, since
> it uses the same syntaxes.  That means that an author can apply the
> knowledge they already have to this, or learn new details from this
> and apply it back to backgrounds.

It means that something that is supposed to be a short function within  
a background is the most complex part of the background property. It  
means you get long, hard to visualize strings of numbers, just to get  
to where the the gradation starts and what direction it goes and where  
it stops. This is al before even mentioning the positions of the 2 or  
more stops.

Yet anyone who can figure out the distance from the left and top could  
just as easily figure out (or estimate) the single distance from that  
corner. Even if you can't get the gradation to start on the exact same  
pixel without a lot of trial and error, who cares? Who's going to be  
able to tell the difference on something the gradually blends from one  
color to another?

There's no learning gain in putting 4 distance/percentage numbers into  
the beginning of the function, for people who are already learning to  
group and associate simpler distance/percentage numbers with the color  
stops (percentages that all refer to the same thing, instead of some  
to the width, some to the height, and some to the length of the  
gradation... or length distances that are all measured from the same  
point, instead of some that are from the left, some from the top, and  
some from the beginning of the gradation). You are just adding a  
second, longer way to do the same thing, one which will not make a  
positive difference for any but a tiny, tiny fraction of its actual  
use in practice (a "tiny minority of a tiny minority", to use your  
earlier language, might find some blending tasks that would benefit  
from the extra complexity).

Speaking of applying previous knowledge, how about my PhotoShop  
experience? When I use the gradient tool in PhotoShop, I consider  
where how far in (or out) I want the starting color to start, what the  
angle it should be as I drag the mouse, and how far I should go along  
that angle before I let the mouse button up. I don't think, "hmm, this  
should start 10% of the way from a point that is 40 pixels from the  
top and 5% from the left, and end 900 pixels from the left and 90%  
from the top." It's just absurd extra complexity to try to shoehorn in  
that kind of measurement, and for infinitesimal gain.

> That sort of knowledge-sharing is
> pretty cool!

Its almost totally redundant. If you like sharing knowledge, take the  
knowledge of how to measure a single distance to each stop, and share  
it with the need to specify where the first and last color-stops are  
positioned, instead of bringing in a second, different mechanism in a  
different place to do the same thing in addition to that.

I think there are vanishing few gradations you could create using this  
longer, more complex notation that I could not reasonably replicate  
without it in a much simpler, easier, shorter, and more consistent way  
without the extra four numbers and units at the beginning.

>> If I stare at this long enough I see that it starts 10px from top,  
>> 10px from
>> left, and ends the same distance from the bottom right, correct?so  
>> why not
>> this instead:
>>
>> Gradient(top-left / white 14px, black calc(100% - 14px))
>
> Because the box may not be square, which would make your version not
> equivalent to my versions.

It would be pretty darn close. It's not like anyone would notice the  
difference on a blend that went mostly corner to corner on long  
vertical box if the gradation started a few pixels off horizontally  
from yours. It's not like I couldn't adjust it a few pixels one way  
for tall boxes or another way for wide boxes. The angle is changing on  
each different sized box anyway, so if you have two side by side they  
will already look different.

Who needs that sort of precision for an effect that usually has no  
sharp edges that would need to align with anything else? Its up to 4  
extra numbers, 2 extra directions, and up to 4 extra units, for a  
level of precision that vanishingly few would need. And that precision  
is replaced by ambiguity once you allow a mixture of percent, pixels,  
inches, ems, and so forth that <bg-position> does. With that, stops  
can trade position based on the width or height or font-size.
Received on Saturday, 15 August 2009 16:02:53 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:20 GMT