From: Dean Jackson <dino@apple.com>
Date: Fri, 6 Nov 2009 09:15:53 +1100
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
Message-Id: <3B27D02B-0E25-4FAE-8D13-7662E716C38E@apple.com>
To: Simon Fraser <smfr@me.com>
```
On 05/11/2009, at 12:41 PM, Simon Fraser wrote:

> 	I think my real unease here stems from my desire to see a linear
> gradient specified precisely by the end points, and having a simple
> way to deduce the end point from the angle. So I propose the
> following.
>
> 	A linear gradient is specified by two points, and optionally an
> angle. In the absence of the angle, those two points are the
> endpoints of the gradient. If the angle is present, then the start
> point of the gradient is the first point and the axis of the
> gradient is given by the angle. The endpoint of the gradient is
> obtained by finding the point on a line perpendicular to the axis
> which intersects with the second specified point.
> 	If no point is specified, the start point is assumed to be the top
> left (and thus the second point is bottom right).
> 	If only one point is specified, then the second point is obtained
> by reflecting the first point about the center of the box.
> 	If the second specified point lies on a line from the first point
> with the specified angle, then the gradient renders as a solid color
> using the color of the last(?) stop.

I like this proposal over the current one on dev.w3.org. As I
mentioned to Simon directly, I'd like a small change.

>
> This gives the following behavior:
>
> 	linear-gradient(yellow, blue) -- start point defaults to top left,
> reflect about center to get an end in the bottom left: get diagonal

Agree that this is the best default (although, typo - you meant bottom
right)

> 	linear-gradient(left, yellow, blue) -- horizontal gradient from
> left to right

I would expect this to be the same as the default case - I assume
"left" == "top left". But, since you're trying to be compatible with
background position, you're making "left" == "center left". I think it
is strange to have the default case be a different rule between not
specifying a point and specifying half a point. I'd prefer the default
cases to be understandable fallbacks.

So, my suggestion is:

linear-gradient(yellow, blue) - diagonal from top left to bottom right
linear-gradient(top, yellow, blue) - same
linear-gradient(left, yellow, blue) - same
linear-gradient(left, right, yellow, blue) - horizontal from left to
right
linear-gradient(top, bottom, yellow, blue) - vertical from top to bottom

The last two have the advantage of being clearly readable/
understandable when read aloud, yet not verbose.

linear-gradient(top right, bottom left, yellow, blue) - diagonal from
top right to bottom left

I also would resist the temptation to change the direction of rotation
for angles, just because it seems more familiar to some people. The
Web has a standard convention that we should follow.

Dean

> 	linear-gradient(top, yellow, blue) -- vertical gradient from top to
> bottom
> 	linear-gradient(top left, bottom right, yellow, blue) -- end points
> are specified, get diagonal gradient.
> 	linear-gradient(10% 20px, yellow, blue) -- diagonal gradient from
> 10% 20px to 90% (height - 20px)
> 	linear-gradient(45deg, yellow, blue) -- start point is top left,
> end point is bottom right, get 45deg gradient.
>
> This still has the nice "fill the box" properties, and allows a lot
> of common gradient types without having to use the angle argument.
> There still isn't a single canonical form -- the angle is
> "absolute", 0deg being up (I think; the current proposal doesn't
> say), so saying that the angle defaults to 0 does not work.
> Specifying the angle as relative to the line between the end points
> doesn't help either, because then you can no longer maintain a 45deg
> gradient as the end points move around.
>
> This form also still has ambiguous parsing of:
> 	linear-gradient(0, yellow blue)
> and similar, where the 0 can be parsed as a position or angle,
> unless we require angle units.
>
> I haven't thought about radial-gradient yet, but I do see that the
> current radial gradient proposal does not allow the author to place
> a radial gradient in an arbitrary spot that does not necessarily
> touch the edges or corners of the box. I think this use case is
> important, for example content that wants to put a gradient on the
> <body> that creates a glow around some element on the page.
>
```
Received on Thursday, 5 November 2009 22:16:37 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:30 UTC