Re: Updated Summary of Discussions about FX work items

From: Rik Cabanier <cabanier@adobe.com<mailto:cabanier@adobe.com>>
Date: Fri, 1 Jul 2011 12:38:09 -0700
To: "'Tab Atkins Jr.'" <jackalmage@gmail.com<mailto:jackalmage@gmail.com>>, Alex Danilo <alex@abbra.com<mailto:alex@abbra.com>>
Cc: Adobe Systems <vhardy@adobe.com<mailto:vhardy@adobe.com>>, Erik Dahlstrom <ed@opera.com<mailto:ed@opera.com>>, "public-svg-wg@w3.org<mailto:public-svg-wg@w3.org>" <public-svg-wg@w3.org<mailto:public-svg-wg@w3.org>>
Subject: RE: Updated Summary of Discussions about FX work items


If you told your high school math teacher that 90deg was down, like the
'azimuth' property says, you'd be just as wrong.  SVG uses screen-polar
angles, not math-polar.  CSS previous used math-polar.
My poll gave three options - math-polar, screen-polar, and bearing angles -
and bearing angles won by an enormous margin.

Transformations are always relative to the current coordinate system which might already be transformed.
In the initial CTM, the X-axis goes left to right which is how it's done in high school math, but the Y-axis goes top to bottom which is different. (0,0) is in the top left.

So, when rotating from 0 to 90 degrees will move you coordinate system towards the Y-axis and this is in both screen-polar and math-polar. This is why the rotate formula is the same in CSS/SVG (= screen polar) as it is in PDF/PostScript (=math polar)
I think that this is where the confusion is coming from.
So, with this in mind, all that the gradient spec needs to do is define the initial CTM of the gradient. It should mark the center of the shape as (0,0), the X-axis as bottom to top and the Y-axis as right to left.

I have to admit that it's a little strange that 0 deg is vertical...

>> Also, in this discussion, I think that it is important to consider precedents in the W3C specifications. Not that because things have been done a certain way is a guarantee it is the best way. But I think consistency is important because it makes the authors' lives easier. If someone authors a gradient in CSS or in SVG, it would be best, for them, that the models are consistent. Since there is a precedent in the SVG specification for gradient angles and there is no glaring issue that I am aware of (they have been implemented in viewers/browsers and authoring tools/transcoders for a long time now), I think we should keep the same model for CSS gradients.

Vincent

Rik
-----Original Message-----
From: public-svg-wg-request@w3.org<mailto:public-svg-wg-request@w3.org> [mailto:public-svg-wg-
request@w3.org<mailto:request@w3.org>] On Behalf Of Tab Atkins Jr.
Sent: Thursday, June 30, 2011 8:29 PM
To: Alex Danilo
Cc: Vincent Hardy; Erik Dahlstrom; public-svg-wg@w3.org<mailto:public-svg-wg@w3.org>
Subject: Re: Updated Summary of Discussions about FX work items
On Thu, Jun 30, 2011 at 6:19 PM, Alex Danilo <alex@abbra.com<mailto:alex@abbra.com>> wrote:
> --Original Message--:
>>On Thu, Jun 30, 2011 at 4:24 PM, Alex Danilo <alex@abbra.com<mailto:alex@abbra.com>> wrote:
>>> However,  there's been a large thread on www-style that I've stayed
>>> away from that relates to the angles used for CSS gradients.
>>>
>>> CSS3 gradients is specifying 0 degrees to be vertical, i'e. poiting up along
the Y axis.
>>> Their rationale is that it's like a compass.
>>>
>>> SVG uses the X-axis as 0 degrees, like in maths, architectural
>>> drawing and many other things.
>>>
>>> The angle concept in CSS gradients is incompatible with SVG's model
>>> so perhaps someone who is in both domains can point this out to them.
>>
>>The decision to use bearing angles (0deg is up, positive is CW) was
>>based on overwhelming preference for it expressed in a poll of authors
>>which got about 100 responses.
>
> A statistician would take the 100 responses against the potential
> number of authors and classify that result as having  a _very_ low
confidence interval.
That's not at all true.  Sampling is a bog-standard statistical technique, and
definitely doesn't require you to sample a large percentage of a population,
so long as your sample is "appropriately large" (in practice, this is somewhere
above 10 and below 100 usually) and you have reason to believe your sample
is representative.
> A sweeping generalization could be that those 100  responses were from
> people that flunked math, didn't do any technical drawing or tried to
> build a driveway with an elevation of 5 degrees then promptly drove off a
cliff...
I'm not sure why you'd think that's a reasonable generalization.  In any case,
it's irrelevant, as we're not trying to make solutions for those groups, we're
trying to make solutions for web developers, whatever that ends up
meaning.  We drew the sample from people who follow @css3info on
Twitter, which I believe is reasonably representative of skilled CSS-using web
authors as a whole.
>>Where precisely are angles used in SVG?  So far I've found the following:
>>
>>1. glyph-orientation-*
>>2. rotate
>>3. translate (the rotate() and skew*() commands) 4. azimuth 5.
>>elevation 6. orient 7. d (the elliptical arc commands)
>>
>>In 1-3 and 6-7, the angle indicates a CW rotation, not a direction.
>>This is compatible with angles in linear-gradient().
>>
>>In 4 and 5, the angle indicates a direction.  4 indicates a CW
>>rotation from the x axis, which is slightly incompatible with angles
>>in linear-gradient().  5 indicates a rotation from the plane of the
>>screen toward the viewer, which can't be compared with angles in
>>linear-gradient().
>
> If you do orienteering and your world is a compass then it makes some
sense.
> If you do maths, or engineering drawing or are a builder, architect,
> plane designer looking at your cockpit indicators you might consider 0
> degrees to be in the horizontal plane.
In many of these instances, you also consider 90deg to point upwards, which
is contrary to SVG.
Unless I'm missing something, though, only a single usage of angles in SVG is
inconsistent here.  One usage is incomparable, and the rest are just
rotations, not directions, and go CW, same as CSS angles and the other uses
of SVG angles.
> SVG gradients:
>
> http://www.w3.org/TR/SVG/pservers.html
>
> When linear with _no_ explicit direction specified assume:
> x1, y1, y2 == 0%
> x2 == 100%
>
> i.e. a vector in the horizontal direction.
>
> Applying a gradientTransform of rotate(5) would rotate the gradient
> 5 degrees from the horiztonal plane.
>
> Thus, this is different enough that authors would get confused.
Similar considerations apply to CSS gradients.  We did not believe it was
confusing, since you don't normally set the direction via transforms.  Is it
equally confusing that setting a gradientTransform of rotate(5) along with
x1,x2,y1 of 0% and y2 of 100% results in a gradient 5deg CW from a down-
pointing vector?
> How many of your 100 respondents have authored any SVG gradient
markup?
> It would be nice to know.
I have no idea for that poll.  For other similar polls I've explicitly asked for
people with little or no experience with gradients, so I can capture the
natural intuition, rather than whatever they'd already learned.
> Regardless, some people in the world went to school and they were
> taught about radians, polar co-ordinates amongst many other things, see:
>
> http://en.wikipedia.org/wiki/Polar_coordinate_system
> and
> http://en.wikipedia.org/wiki/Radian
>
> All these co-ordinate systems make 0 degrees along the X-axis or
> horizontal if you prefer.
As I said above, the math-polar system does *not* match SVG, as positive
angles go CCW in it.
> As I said, someone who is on both groups should take this up.
I answered because I *am* in both groups, and am the author of the relevant
CSS spec.  ^_^
> I do truly believe that if I told my high school maths teacher that 0
> degrees was up, I would get beaten about the head. They would then
> probably grab my ear, say "look at the compass you idiot", and point
> out that North (0 degrees) required me to walk horizontally along the
> earth and that I couldn't fly.
If you told your high school math teacher that 90deg was down, like the
'azimuth' property says, you'd be just as wrong.  SVG uses screen-polar
angles, not math-polar.  CSS previous used math-polar.
My poll gave three options - math-polar, screen-polar, and bearing angles -
and bearing angles won by an enormous margin.
~TJ