W3C home > Mailing lists > Public > www-style@w3.org > September 2010

Re: Linear gradients, Transforms and angles...

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 23 Sep 2010 00:13:47 -0700
Cc: Chris Marrin <cmarrin@apple.com>, Simon Fraser <smfr@me.com>, DanielGlazman <daniel.glazman@disruptive-innovations.com>, "L. DavidBaron" <dbaron@dbaron.org>, "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
Message-Id: <595C2630-D9E6-4151-935A-97B06651FFA2@gmail.com>
To: David Singer <singer@apple.com>

On Sep 22, 2010, at 4:36 PM, David Singer wrote:

> 
> On Sep 22, 2010, at 13:20 , Brad Kemper wrote:
>>> I think many people, if asked, "on a cartesian grid, what is the relationship between a vector along the Y-axis and a vector at 90 degrees?" would say that they are the same,
>> 
>> Really? I think most would look at you funny and say, "What the heck are you talking about? Speak English, man!" (well, maybe not most; maybe just English speakers would say that). Maybe if you were asking people in a math class or something...
>> 
>> 
> 
>>> and surprise might not be enough if told that the Y axis is at MINUS 90 degrees.  They may need astonishment.
>>> 
>>> David Singer
>>> Multimedia and Software Standards, Apple Inc.
>> 
>> I've not heard of any astonishment from people setting gradient directions in Adobe products or in your own company's products (Pages, Keynote).
> 
> 
> 
> CSS is a language in which you express geometric concepts textually, not wysiwyg.  

Not always true. Many people only deal with it through an interface of a tool, such as Adobe DreamWeaver, Apple iWeb, etc.

> The idea that you can work in a language expressing geometric concepts without understanding geometry is odd, to say the least.  

You think so? I know many people that can handle setting a border width or font size or color, or who can specify a directions in degrees, at yet spend exactly no time each year thinking about vectors and axes on a cartesian grid.

> I could not find a way to ask Photoshop for a gradient at a specified angle (it seems you always click and drag),

Create a gradient layer, or double-click on any layer and create a "gradient overlay" layer style. They both allow you to specify degrees by typing a number, and they all work in the old familiar way. Adobe Illustrator and InDesign have similar controls that interpret the degrees in the same way. So if Adobe ever gets around to putting gradients into DreamWeaver, I would expect the control to follow the same familiar standard. It would certainly be weird for 45 to mean something different in DreamWeaver than in every other Adobe CS app, but I guess in theory the UI could show 45 while the code gets written as 315. But, God, I hope not; that would be confusing to make sense of when reading the code. 

> but the sample preset gradients in the drop-down are actually at 45 -- from top left to bottom right.  

Where in PhotoShop does it say the top-left-to-bottomiright icons representing the gradients are 45? I don't see that. The gradient presets only represent the color stops, and can be used with any angle.

> These programs are all wysiswyg and the user doesn't have to program in a coordinate system, so the CSS consistency issue does not arise.

The user types in a number for the angle. I do it all the time. And in WYSIWYG Web page editors and CSS editors, it is quite common to switch back and forth between the WYSIWYG view and the code view, or to have them both open side-by-side. Even in Apple's design tools, a user types can type in a gradient direct as degrees, and it matches the long-time convention.

What the user DOESN'T have to pay attention to with regard to these consistency of the coordinate system is whether or not the normal way of specifying directions in these apps matches the left-thumb rule of the Y axis of the cartesian vectors. Or whatever.

> I think users want rotations (transforms) and gradients to be consistent --

Well, you do, clearly, any way.

> that two, at 45, go the same way.  

They don't. One goes in a straight direction, the other goes in a circular direction.

> They want to learn one, well-defined, coordinate space,

It's all in your point of view. Put the flat part of the protractor (the zero line) on the gradient line path, then turn the protractor clockwise until the flat part is horizontal. Voila. You've rotated something clockwise, and the gradient path lines up with the correct angle. Happy?

> not have to remember that there are two somewhat intuitive, but different, conventions at work depending on what they are working with.

That is exactly what you are asking designers and other authors to do when they use normal angle notation everywhere in life except CSS, SVG, and Canvas. The convention of saying that a 45 angle goes from lower-left to upper-right is much older than any of those, and is what most people will expect. You want to use a different convention for CSS, because of some reason of mathematical purity in regard to the direction of the Y axis, which I could care less about. I just want to use the angles that are most familiar to me (and others like me) for specifying linear direction.
Received on Thursday, 23 September 2010 07:14:22 GMT

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