-
201117 May
Posting on behalf of Tab Atkins about an open spec issue:
I’ve been pretty adamant for some time that gradients should use the math-y interpretation of angles, where 0deg is East and 90deg is North. In addition to matching what you learn in school about polar coordinates, it matches what tools like Photoshop expose. Other members of the WG, though, have been equally adamant that we should more closely match existing language conventions, particularly that bigger angles mean clockwise rotation.
The strength of my conviction has eroded over time. It really is true that every other use of angles uses them to represent clockwise rotations. In SVG, angles are present in transforms and the
glyph-orientationproperties, while in CSS they’re present in transforms,image-orientation, and theazimuthandelevationaural properties. In all of them (saveelevation, which rotates in a different axis), the rotation is clockwise.I also know that, as an author, there have been several places where SVG has annoyed me because it does two similar things in an inconsistent way (unfortunately, I don’t remember exactly what things annoyed me). I suspect these things were designed to be consistent with other tools that SVG wanted to align with. I, having never used these tools, don’t understand this and just see the self-inconsistency. I’d prefer to avoid a similar situation with CSS, where users that don’t remember their polar coordinates and never used gradients in Photoshop look at CSS gradients and just see that the angles are defined in a way that’s inconsistent with how they’re defined elsewhere. Plus, an argument can be made that actually respecting polar coordinates would involve clockwise rotation, as the angles should progress from the X-axis toward the Y-axis, which points downward on the screen.
So, we have three choices:
- A) Keep the angles as they are, with 0deg=East and 90deg=North (counter-clockwise)
- B) Switch to screen-coord polar, with 0deg=East and 90deg=South (clockwise)
- C) Switch to bearing angles (compass directions), with 0deg=North and 90deg=East (clockwise)
Except for ‘azimuth’ [which uses ‘0deg’ to indicate straight ahead], current properties are consistent with either B or C, as they just use the angles for rotation, not direction.
What do you think?
You can skip to the end and leave a response.
-
Comments
-
01.
I’m all for consistency. I’ve been in that place where I was thrown off by a number meaning two different things. It’s a huge waste of time.
It’s much easier to remember all css angles are screen-coord polar than to remember the special case where the angle matches Photoshop’s behavior.
-
02.
My vote is for C.
As a front-end developer that didn’t to polar co-ordinates in school and has never done his own gradients in Photoshop C is what I would try first of all using instinct.
If it worked any other way I would probably do C first, get pissed that that didn’t work, read the docs and shout out loud “that doesn’t make any logical sense” go to wikipedia, learn about polar co-ordinates, get even more confused, grudgingly fix my CSS and then get on with things.
I would then do the exact same next time round as I wouldn’t have remembered that gradients ares different to everything else
-
03.
I’m all for consistency too, but that being said, the greatest consistency would be with the rules laid out by math a long time ago: 0 degrees East, 90 degrees North (counter-clockwise).
That being said, if it’s the only case in the CSS spec where this would be the case, it would be annoying, and confusing (at least at first), indeed. Final vote:B, clockwise.
-
04.
For gradients we definitely need a consistent implementation and using option B to me, makes most sense.
-
05.
Personally, I think that it makes more sense to run with C, it makes more sense to be that North would be 0, East 90 etc.
I would prefer to have this as a general rule and then learn one exception – makes things simpler.
-
06.
-
07.
C, it feels like a more natural fit with properties like margin and borderwidth that start at the top and move clockwise. Plus that’s what I though it was already, which explains some confusion (I’ve mostly been avoiding the topic by using top and left instead).
-
08.
C – Easiest to remember.. 0 starts at the top like a normal clock.
-
09.
C, would be the most logical for me.It seems the most natural for people to grasp. I agree with m0xby and Pam.
-
10.
B and C both work for me. C feels more natural.
In CSS we’re constantly doing TRBL which keeps our heads thinking in clockwise fashion.
-
11.
Agos says:Comment » May 18th, 2011 at 1:00 am
I’d stick with counter-clockwise, as is normally taught in math classes.
-
12.
I agree with Paul and Pam, and the top-right-bottom-left thinking. So my vote is C.
-
13.
Top-Right-Bottom-Left should align more closely with a large share of the user base.
Put me down for a C
-
14.
Chris says:Comment » May 18th, 2011 at 1:44 am
I’m for C, even though I remember my polar coordinates very very well. Same reason Pam and Paul stated: when I do CSS I’m always thinking TRBL.
-
15.
I prefer the A option as it’s the way how you do geometry at school and how other programs count degrees by default, for example AutoCAD. To me changing to C may be an option, but B is completely confusing and I even wouldn’t consider it, because it would turn my world by 180 deg. ;)
-
16.
As an example: draw a simple triangle an mark angles. Now do same, but using option B or C. It won’t work for most of people.
-
17.
-
18.
C; it’s how i’d think about it unprompted, and it’s consistent with TRBL.
-
19.
Definitely voting for C; it’s what my intuition would tell me and seems to fit with the CSS “top right bottom left” precedent.
-
20.
Andres Pagella says:Comment » May 18th, 2011 at 2:12 am
C; it’s way more intuitive (at least to me).
-
21.
B.
In CSS we use the very common mirrored-Y coordinates for computer graphics. The top is 0 and the bottom is a positive number. In math, we have all studied the mirrored version of this.
So, to me, the most logical is to use angles the same way as text books, but mirrored too… so B.
-
22.
I agree with C, in that it fits with top, right, bottom, left syntax.
-
23.
I vote for C as well. TRBL is consistent with the rest of CSS.
-
24.
I vote for C, which is a vote for consistency with TRBL as well as a preference for ease of use over a more mathily-correct alternative. Yeah, “mathily”, look it up.
-
25.
Brad (Kemper) says:Comment » May 18th, 2011 at 4:07 am
If it was a rotation, I might vote for C or D. But it isn’t; it is a linear direction. So general math experience provides the convention: A. I don’t see it as having anything to do with rotation conventions.
-
26.
Sylvain Galineau says:Comment » May 18th, 2011 at 5:34 am
Tough one. Math-wise, I do thing 0deg==East. But like Paul and others, TRBL is the natural order of things in CSS and it has helped make clockwise transforms natural in that environment. Given that SVG also goes clockwise I don’t see a good reason to branch out. That these angles are a linear direction misses the principle of least surprise.
-
27.
-
28.
-
29.
Of course A. I.e. → — 0°, ↑ — 90°, ← — 180°, ↓ — 270°. It is mathematical agreement that would be clear to anyone who learn something in school/high school. Also as you mentioned, it matches graphic editing tools like a Photoshop.
-
30.
Me and my colleagues here just voted C for Consistency.
-
31.
I’m all for C, it matches the TRBL in CSS as others pointed, and I like the match with compass directions.
-
32.
C gets my vote, matches the TRBL pattern that others have mentioned
-
33.
My vote is for C, as it is the easiest to remember imo :-)
-
34.
If you’re sticking to degrees, the only logical solution is A. Those who disagree please explain to me what’s consistent about 90deg being east? Absolutely nothing. Change units to something else otherwise leave as is.
TRBL argument would work if the units weren’t degrees.
-
35.
As much fun as maths may be, CSS isn’t targeted at maths geeks. What’s more, even considering maths you have to take into account variations in education. I went through some reasonably advanced maths classes in school, but never touched polar coordinates — those were only for the scientific sections (I was in the economics section, where we did a whole lot more probabilities).
Even taking the mathematical argument into account, consistency still trumps it. If some properties are mathematically logical and others are not, for all that I may understand the maths I’m still in pain because I’ll need to remember which ones fall into which category. Don’t clutter my syntactical brainspace, don’t make me think (dammit).
Consistency with Photoshop could be important — but consistency with the same context (CSS, and closely associated tech) is more important than consistency with related, but more distant, tools. Frankly I used to use Photoshop every day until some years ago but if you’d asked me today I’d have said it used C.
At the end of the day, more people have seen a watch or a compass (likely, both) than have sat through a course on polar geometry; and those who have sat through such courses have all seen clocks and compasses. So I’d go with C, failing that B.
Besides, aren’t polar coordinates going to disappear anyway what with all that global warming and stuff?
-
36.
CSS is a design tool, not a math tool, so more humane APIs are better. My vote goes to option C.
-
37.
Alexander Trefz says:Comment » May 18th, 2011 at 1:25 pm
As Paul Irish already said, TRBLis the way everything in CSS works so i say stick with it. C.
-
38.
I prefer A as I believe this the best way to get universal consistency in the long run. It should of course be consistent in the whole CSS spec though.
On the other hand, if the convention that the Y-axis is flipped is made apparent and consistent through the spec, I believe B could also be made a good choice since this matches the coordinate system used for positioning and would still match the math convention.I strong oppose C though unless it actually uses the devises internal compass and changes direction on the fly. On vertical monitors compass directions doesn’t make much sense (unless you are standing directly at the magnetic poles)…
-
39.
Cyrille says:Comment » May 18th, 2011 at 2:27 pm
Consistency is most important within the CSS spec. Whether it’s A, B, or C doesn’t matter. We’re having this debate because there are so many different options in the wild already. We don’t want to create a new unit/method. We should simply choose what’s most commonly used (A?) and move on.
-
40.
Generally I would say A, because it’s more logical. But to stay consistent my final vote is B.
-
41.
-
42.
-
43.
If ‘C’ is chosen we will still have to face problem ‘A’ and ‘B’. Inception!
-
44.
It’s a no-brainer. C would follow the “top right bottom left” order used for everything else (margin, padding, border etc).
-
45.
Definitely one of the clock-wise variants (so B or C, preferably C as it makes most sense)
-
46.
I don’t care, as long as it’s consistent with everything else.
-
47.
I’m torn between A and C, C makes far more sense with the TRBL format but A is exactly polar coordinates. My vote has to be for C though. To keep consistency with the rest of the language e.g. margins, padding, borders etc.
-
48.
I vote for C because it’s more intuitive, that’s what’s most often used in physics say for spherical coordinate systems and it’s consistent with the rest of CSS.
A is the mathematical representation and could be used too I guess.
B is just dumb. -
49.
-
50.
-
01.
