Re: radial-gradient() proposal

On Sun, Sep 6, 2009 at 10:32 PM, David Perrell<davidp@hpaa.com> wrote:
> Tab Atkins Jr. wrote:
> | Ah, I think you're somewhat confused here then.  The -side values,
> | when used with an ellipse, refer to *two* sides - the closest
> | horizontal *and* the closest vertical.  After all, you can't specify
> | an ellipse with only one axis - you need some way to determine the
> | second axis.
>
> I question who's confused. The ellipse parameters derive from a single -side value. The gradient-line can also be derived from that -side value.

I think I understand what you're getting at, but I'm not sure.  To
route around the possibility that we've adopted different definitions
for higher-level terms, let me explain myself in very basic terms, and
let you verify that you understand the situation the same way.
(Please don't take this insultingly ^_^; I just find that when two
people start disagreeing about the truth of simple statements it's
almost always a definitional issue and can be cleared up by rebuilding
the shared terminology from the bottom. Even if they don't find
agreement, they'll remove any confusion about what's being argued.)

Axis-aligned ellipses are defined with at least two parameters.  This
can be the lengths of both axes, or the length of one axis and a value
relating the two axes such as a length ratio or the eccentricity.  In
the radial-gradient rule I define ellipses by simply (implicitly)
specifying the lengths of both axes.

Specifically, when using closest-side, the vertical axis of the
ellipse is the distance from the starting-point to the top or bottom
of the box, whichever is closer, and similarly for the horizontal
axis.  Thus there are two axis-aligned lengths that are relevant when
discussing ellipses; the vertical axis and the horizontal axis.

Now, one can certainly favor a particular axis over the other.
Particularly, there will always be one side of the four that is the
actual closest (or, to be precise, you can always choose a side which
is not farther than any other side), and also one that is the actual
farthest side.  This corresponds to choosing the minor axis under
closest-side, and the major axis under farthest-side.

However, I don't feel that this axis is important *enough* to justify
favoring absolutely (though it may indeed be a decent choice by
default).  In fact, I feel that it's often going to be *more*
important to choose between "horizontal" and "vertical" than between
"major" and "minor", as the former two allow you to control alignment
with other design elements on the page.

So, thoughts so far?  Excepting the final paragraph, do we agree on all points?

> | If you don't know the actual dimensions of the box, <length>s aren't
> | very helpful anyway.  I recommend sticking with percentages in that
> | case.
>
> Not a bad recommendation. However, there are valid exceptions.

Just to be certain, this is purely about the case where you're
aligning with a corner, right, when <size> is closest-corner or
farthest-corner?

Can you illuminate?  I can't personally think of any time when you'd
need to measure precise lengths along a line pointed at an unknown
angle.  (Unknown because it depends on the box dimensions, which
aren't known beforehand - if they *were* known beforehand one could
just use <angle>.)

If there's no need for *precise* lengths, then the angle can be
approximated and used in <angle> so that lengths will be close to the
desired values (they will usually be very close, within a few px I
think), or % can just be used, which produce the same result no matter
where the gradient-line is pointed.

> | It's not meant to be an analogy in those terms, though; it's meant to
> | match with the definition of gradient-line that linear gradients use.
> | When talking about gradient-lines, radial and linear gradients use
> | them nearly identically; the only things different are the default
> | values and how the ending-point is inferred.
>
> Could you expound on this further? In what way is the effect of an angular gradient line identical for your linear and radial gradients? I can certainly see how linear gradients are altered by a change of angle. I fail to see how changing the angle affects radial gradients.

Ah, this may be the source of our mutual confusion, then.  Let me
explain (and if you *do* know all this and instead are objecting to
something else, just let me know):

Start with a 100px by 200px box and a background rule like
"background: radial-gradient(top left, ellipse farthest-side, red,
yellow 50px, green);"  Because <angle> was omitted it defaults to
0deg, which means we measure all lengths from the center (as always)
to the right, with 100% being where this line intersects the
ending-shape (in this case, 100% means 100px).  So we have an
elliptical gradient which transitions from red->yellow for half of its
size, then from yellow->green for the other half.
http://www.xanthir.com/test.php?width=100&height=200&radial-gradient=top%20left,%20ellipse%20farthest-side,%20red,%20yellow%2050px,%20green

But now say we specify "90deg" as the degree.  Now we're measuring
starting from the center and going up, and 100% is now 200px away
because that's the distance to the ending-shape in that direction.
The same rule (with just the addition of the angle) now produces a
gradient where the transition from red->yellow only takes up a
*quarter* of the size, and the yellow->green transition happens over
the remaining 3/4ths.
http://www.xanthir.com/test.php?width=100&height=200&radial-gradient=top%20left%2090deg,%20ellipse%20farthest-side,%20red,%20yellow%2050px,%20green
(It appears that my code for handling <angle> isn't working right at
the moment.  I'll go fix it, but in the meantime here's a link that
shows an equivalent rendering:
http://www.xanthir.com/test.php?width=100&height=200&radial-gradient=top%20left,%20ellipse%20farthest-side,%20red,%20yellow%2025px,%20green
)

Specifying an angle anywhere between 0deg and 90deg creates gradients
somewhat between these two, where the red->yellow transition takes up
somewhere between 25% and 50% of the image.  However, the transition
is always 50px wide *in the direction specified*.  So that's the
significance of specifying the direction.  It lets you be certain that
the <length> you're using will actually align with things properly in
at least one direction.  In any other direction the length might be
stretched or squished as the ellipse deforms from a true circle.

Bringing this back to the original question, radial gradients
determine the color at a particular point be intersecting an ellipse
with the gradient-line - the color at that point of the gradient-line
is the color used for the ellipse.  Similarly, linear gradients
intersect perpendicular lines with the gradient-line, and again the
color at that point of the gradient-line is the color used for the
perpendicular line.

If you've ever used GIMP (I presume Photoshop works similarly), the
gradient-line is precisely the abstraction you use to draw gradients
of both types.  You click and hold at the center point, then drag a
line out to where you want the ending-shape to be and release.  That
line you pull out is the gradient-line that I reference in the
proposal.

~TJ

Received on Monday, 7 September 2009 16:25:42 UTC