Re: Gradient syntax proposal

On Fri, Aug 14, 2009 at 12:38 PM, Brad Kemper<brad.kemper@gmail.com> wrote:
>
> On Aug 13, 2009, at 4:35 PM, Tab Atkins Jr. wrote:
>
> Just linear gradients for now:
>
> http://www.xanthir.com/document/document.php?id=d65df9d10442ef96c2dfe5e1d7bbebf7aa42f2bcf24e68fc3777c4b484fa8a4ce55fed2189cac20ccad8686127f4c08917c4ca8b7614e9f89c2a950ec083a9c6
>
> ~TJ
>
>
> I won't get into my objections to [inner | outer] right now, but about the
> rest of this:
>
> The <gradient-line> stands for:
>
> [
>   <angle> [inner | outer]?
> |
>   [ left | right | top | bottom ] [ left | right | top | bottom ]
> |
>   <bg-position>, <bg-position>
> ]
>
> One of the things I really hate about using "<bg-position>, <bg-position>"
> is that comma to separate the two lengths or keywords on the left from those
> on the right. Since commas are already being used to separate color-stops,
> this just makes the whole thing harder to read, because they are no longer
> used consistently to group like things. When they are used only for
> color-stops, then you can see in a glance how many color-stops there are
> instead of having to study it more closely with a line full of distances and
> commas. For instance, I find the following very hard to read, and it
> probably doesn't even make sense (which is another problem with this kind of
> construction).
>
> linear-gradient(10px 30%, 100% 4%, 50% green, 20% blue)
>
> The problem is too many commas being used in different ways, and too many
> percentages used in different ways The confusion is compounded when the
> color stop begins with a percentage, because then you can end up with two
> percentages, used in different way, separated by a comma ("4%, 50%", above),
> while in another place two percentages that are used the same way (mostly)
> are also separated by a comma ("30%, 100%", above). Some percentages are of
> the length of the gradient, and other percentages are of  the width or
> height of the element for bg-position. I believe this is probably why
> mozilla and webkit resorted to functional notation for their three types of
> color stops, but I don't like that much either.

I agree about the extra comma in the third construction.  I don't like
it much, but I also think I may use the functionality provided by it.
Not quite sure what to do about that yet.

> The positional keywords can also create ambiguity. Such as like this:
> linear-gradient(top right, 50% green, 20% blue)
> Also, even with "top bottom" instead of "top right", this doesn't seem that
> clear, because it looks kind of like like 3 stops to me (or maybe even 4),
> instead of two.
> I think this can be improved significantly in a way that makes everything
> more clear, by using the following change:
>
> linear-gradient(
>
> [
>
>   <angle>
> |
>   [ top-left | top-right | bottom-right | bottom-left | top | bottom | right
> | left ]
>
> ]

Hmm, I like the corners being specified as separate keywords.  Changed to that.

> <color-stop>, <color-stop>
>
> )
>
> <color-stop> is [<color> [<percentage>|<distance>]*],

FYI, you want a ? there, not a *.

I don't see why the color *has* to come first, still.  Leaving it as
it is, where you can specify them in either order.

Also, leaving out <distance>.  Mixing percentages and distances brings
up the possibility (in fact, the certainty) of color-stops swapping
their order based on box size.  I don't think that's desirable.  The
only way around it would be to force the color-stops to be specified
in order, and say that out-of-order stops are treated the same as
same-position stops (they produce an instant transition from the first
specified to the last).  Would this be okay?

> Thus, these go from blue in the lower left corner at a 45 degree angle until
> the last line of the gradient intersects the opposite corner:
> linear-gradient(45deg green, blue)
>
> linear-gradient(45deg green 0%, blue 100%)
>
> These start in the same corner and continue directly towards the opposite
> corner (along an angle that would be a line connecting those corners):
>
> linear-gradient(bottom-left green, blue)
>
> linear-gradient(bottom-left green 0%, blue 100%)
>
> These start in the bottom and continue towards the top:
>
> linear-gradient(bottom green, blue)
>
> linear-gradient(bottom green 0%, blue 100%)
>
> Adding stops then is very consistent:
>
> linear-gradient(bottom green, white, orange, blue)
>
> linear-gradient(bottom green 0%, white 33.3%, orange 66.6%, blue 100%)

Dropping the comma separating the direction from the stops just looks
crazy.  I'll keep it there.

> Briefly, about "inner": I think it is very unusual. When I create an angled
> gradient box in PhotoShop, it fills the whole thing to all corners. It does
> not start in one corner and then just stop once it hits a side. That would
> be weird.

In GIMP I have a choice.  I just click at the starting point, drag to
the ending point, and let go.  I can definitely see me wanting this
type of gradient, especially as a visual effect at the top of an
unpredictably tall box.

> If you did want the length of the blend to be a certain distance
> that is consistent between two boxes of the same width, then just use an
> absolute distance measure instead of 100%.
> On another note, I think that if the beginning and ending stops are
> specified as >0% and <100% respectively, then their starting and ending
> colors should fill the space between those corners and the points at which
> there is actual gradation. Don't just leave those areas transparent. In the
> unusual event that you  DO want transparency there, you could do this:

I agree, and that's how my proposal already handles it.  Before the
first color-stop the color is the same as the first color-stop, and
same with the last color-stop.

> If you have named sides (like you do) and named corners (something like
> border-radius has in its 4 names), then you don't need to mention the
> opposite side at all. You also then don't need to use the bg-position
> coordinate system with its possibility of 4 lengths separated by another comma.

Agreed; I've already changed to named corners based on your email.

You do still need bg-position coordinates if you want anything more
controlled than the angle or side-side/corner-corner gradients.

~TJ

Received on Friday, 14 August 2009 18:04:43 UTC