• 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-orientation properties, while in CSS they’re present in transforms, image-orientation, and the azimuth and elevation aural properties. In all of them (save elevation, 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.

      My vote is for C too.

    • 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.

      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.

      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.

       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.

       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.

      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.

      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.

       C for sure :) Its more….. logical.

    • 42.

      Si, si, C! It’s logical! 

    • 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.

       Got to be option C, makes a lot of sense.

    • 50.
    • 51.

      C makes the most sense, what with TRBL and all.

    • 52.

      I vote for C, if only so that I can finally put this compass and sextant to good use. But seriously: C definitely seems the most natural.

    • 53.

       C please. It’s logical. We already write CSS shorthand for top, right, bottom, left. Why deviate?

    • 54.

       C . for the same reason simurai exposed

    • 55.

      since the canvas has the x axis pointing right and the y axis pointing down, it makes more sense to make it CLOCKWISE. In math positive angles are clockwise and the y axis points up, but this should be different because the y axis points down.

    • 56.
    • 57.

      IT DOESN’T MATTER!

    • 58.

      Just several weeks ago I was thinking about this same issue, however with margin and padding – why does the shorthand start from top and go clockwise. Currently for gradients I would stick with C (0deg N, 90deg E) in order to be consistent with the way these shorthands are used.

    • 59.

       I stand in front of classes on a weekly basis and teach CSS – including CSS3 gradients.

      Every time I show slides of the current angle method, people are surprised (almost as much as shorthand border-radius methodology). The current angle method is so inconsistent with other CSS methods.

      My vote, like many other people above is for C as it is how many “real world” practitioners (people struggling to learn CSS and CSS3) expect it to operate.

      I think before any spec is written, the people involved should test their theories by standing in front of people new to CSS (or new to CSS3 anyway) and try to explain the concept. It is an eye-opening experience in understanding how the average designer or developer thinks.

    • 60.

       C is where it’s at…

    • 61.
    • 62.
    • 63.
    • 64.

       Given that the vast majority of gradients will be horizontal,keep it at A 0 = East, 90 = North.

      That way the default (0) serves the greatest number and minimizes code.

      This is an ease of use, not consistency issue.

    • 65.

      C for me.

      Most other properties in Css, especially in shorthand, start at North or 12o’clock and rotate clockwise. Gradients should be the same in css.

    • 66.

      I have to support option C on this one.

    • 67.

      I totally agree with Robin (comment 35) – it’s not about maths, consistency counts.

      And to make things easier: change units so that math obstacles are out of the way, then take C.

    • 68.

      Sorry, Tab, but I disagree with you on this one.

      Adobe is not a standards organization. While Photoshop may be the de-facto standard, it is on Adobe to keep their tools up-to-date. We should not be changing implementations that will persist for 10, 20, 50 years down the line simply because of a program that is relevant today.

      It is relatively easy for Adobe to add an option in Photoshop’s preferences that would allow users to change the starting point. This would only affect the designer using the application. Changing the spec however, is a much more arduous task and affects all of us.

      Keep it consistent.

    • 69.

      I’m happy with any system as I use different systems in different contexts anyway, but I think it should be C in this case for consistency with TRBL.

      I suppose bringing up the question of degrees versus radians would just complicate matters, so I won’t.

       

    • 70.

       I think the way the question should have been asked should have been more like this:

      If we changed the meaning of 90deg in linear-gradient to mean that most existing browsers would draw it in a different direction that existing versions, thus necessitating that authors of wide-audience sites could no longer use it until existing versions dwindled in usage to insignificant portions, would you support such a change? Would you want it to be changed from a very common model based on how teachers diagram angles in grade school and how they are printed on most protractors, to a system based on something else, even though whatever convention we use will need to be learned and gotten used to, and that some people will disagree with the choice? Keep in mind that we are taking about linear direction and using angles to map to a single direction, where rotation is not necessary in order to understand that rotation, and where many people learning CSS might be surprised to learn that it was different from commonplace conventions for specifying linear direction of a line drawn on a flat surface and for specifying gradient direction in a wide variety of design and publishing software.

    • 71.

       Oops. I need to edit:

      I think the way the question should have been asked should have been more like this: If we changed the meaning of 90deg in linear-gradient to mean that most existing browsers would draw it in a different direction that existing versions, thus necessitating that authors of wide-audience sites could no longer use it until existing versions dwindled in usage to insignificant portions, would you support such a change? Would you want it to be changed from a very common model based on how teachers diagram angles in grade school and how they are printed on most protractors, to a system based on something else, even though whatever convention we use will need to be learned and gotten used to, and that some people will disagree with the choice? Keep in mind that we are taking about linear direction and using angles to map to a single direction, where rotation is not necessary in order to understand that _direction_, and where many people learning CSS might be surprised to learn that it was different from commonplace conventions for specifying linear direction of a line drawn on a flat surface and for specifying gradient direction in a wide variety of design and publishing software.

    • 72.
    • 73.

      What direction is that gradient headed? Who knows, unless you can anticipate which way the monitor is being held. Simply put, using the bearing angle system is nonsensical at best in terms of display layout. Option A is the right way.

    • 74.

      C makes the most sense. And seems to be the most popular…Obviously C it is.

      Though to be honest it really doesn’t matter providing all browsers follow the one standard.

    • 75.

      What was the reason for going with hsl() instead of photoshop’s hsb?

      Lots of other programs also use hsb instead of hsl and it seems hsb values don’t exactly match hsl values.

    • 76.
    • 77.

      I’m for whichever option is consistent with math. In a browser, I think all items should use the same <angle> class to simplify things.

    • 78.

       Not C please. Cause it is not normal for dev. I don’t know any platform with 0 at North.

    • 79.
    • 80.

      C, of course (TRBL) – don’t use different formats within the same language. It just makes it more difficult to use.

    • 81.

       I think the vote for consistency is correct. But, I believe the consistency should be within CSS. It is true that most image languages and digital images have (0,0) at the top left of the image: it is actually the same coordinates it is just at a different part of the Cartesian system where x is positive and y negative. But, having said that, most CSS designers are not also doing intense image processing ( things like fast Fourier transforms), so the system should reflect that use.

    • 82.

      Internal consistency almost trumps all else. Things that aren’t consistently designed either stupid or sadistic.

    • 83.

       C. The compass analogy suits well enough for me to be intuitive.
      Clockwise. As margin, padding or border works from top to left, clockwise.

      h_c

    • 84.

      Definitely C. If this is inconsistent with other CSS properties, then those properties need to be changed. Anything else is fun for maths nerds and infuriating for everyone else.

    • 85.

       I’m surprised that people are voting for C. A is natural for anyone who went to school and it’s natural system for centuries since the ancient Greeks! There are two axis: X and Y – we count angles between them.

      The other thing is that as I am aware, in countries using RTL the X axis goes different direction and changing the mathematical order will make just a mess!

      It’s well worn! Don’t change it!

    • 86.

      I’m very much against changing mathematical rules. Does anyone of those who vote on option C was listening at school when they were thought about geometry!?

    • 87.

      use Radians! easy peasy lemon sqeezy! 

    • 88.

      C – internal consistency is very important.

    • 89.

      I definitely think that anything but A is rather stupid, but then again I’m coming from a background in engineering.

    • 90.

       I know that consistency is good, just because it reduces the overhead of learning new things and remembering different things each time that you switch your context (either it’s a compass, it’s mathematics, it’s CSS or anything else).
      I remember when the first days I was confused about Cartesian Coordinates of screens in CSS with y-axis pointing downwards, while in geometry it is pointing upwards.
      I’m for sure for a future of consistent world. I just don’t know which one is really better.

    • 91.

      C, like a normal clock. (:

    • 92.

       Definitely A

    • 93.
    • 94.
    • 95.

      Theoretically I’d say A, but for consistency and general logic, C gets my vote.

    • 96.

      I’d go for A. Just because some lack high school education doesn’t mean we should continue dumbing down to the most common denominator. HTML and JS already have so many problems because of this it’s not even funny anymore.

      As for TRBL being “natural”, WPF uses LTRB and I’m sure the other combinations are also used. There already is a standard for angles and people should get an education before inventing a new one “just because”.

    • 97.

      C.

      css has nothing to do with math really.
      But it would be nice if there would be logic in css.

      Most other things go TRBL, so my vote would be to stay with TRBL.

      But as someone already said, as long as it is consistent throughout every browser, I’m happy.

    • 98.

       I’m all for internal consistency of CSS. Therefore I would prefer that it works like margis: i.e starting at top then going clockwise. Otherwise, follow the standard math…

    • 99.

      […] val­ues are also per­mit­ted, although based on developer feed­back they may change to become bear­ing angles; 0deg (‘north’) is top to bot­tom, 90deg […]

    • 100.

       I think…C – internal consistency is very important.

    • 101.

      C, no question. Margin and padding params run in the same rotation from the same starting point. Within the context of CSS and screen layouts, north-and-clockwise is the norm.

    • 102.

      CCCCCCCCCCCCCCCCCCCCCCCCCCCCC

      Forget math, everyone understands the compass and the clock. You start at the top and move clockwise. It’s the exactly how margins and padding is done now.

    • 103.
    • 104.
    • 105.
    • 106.
    • 107.

      […] the linear-gradient() angles to bearing angles (compass directions) with 0deg pointing up due to overwhelming feedback that this made more […]

    • 108.

      […] Angles The angle used in the gradients have also been switched to be measured always from the north (top) rather than from the right. There is no implementation yet that implements this yet, but this does mean if you have used […]

    • 109.

       Definitely C, it is more logical to the normal user, more consistent with preexisting conventions, and even more mathematically correct.

      Firstly, all rotation for compasses, clocks, computer programs, and programming languages that I have ever used gives clockwise and starts from the top.

      Secondly, like stated by previous posts it is more consistent with standards already in place in CSS and JavaScript.

      Thirdly, for those of you who are considering A because it seems more mathematically correct, consider the following: On a screen the coordinate plane is flipped on its horizontal-axis (x-axis) i.e. y-coordinates are pointing downward; therefore, all mathematical equations still output the correct values with B and C (if you make sure to start from the top). However, if we used A all mathematical equations would have to be negated in order to give the correct values for the screen x and y values. Therefore, C and B are more correct mathematically speaking than A.

    • 110.

       Forget math, everyone understands the compass and the clock. You start at the top and move clockwise. It’s the exactly how margins and padding is done now.

    • 111.

      […] Post your response to www-style or CSS3.info. […]

    • 112.

      […] (compass directions). 0° now points up (bottom-to-top), and angles increase clockwise. See Angles in Gradients for the feedback that informed this […]

    • 113.

      […] (compass directions). 0° now points up (bottom-to-top), and angles increase clockwise. See Angles in Gradients for the feedback that informed this […]

    • 114.

       Definitely C! One less odd quirk. Keeps things more intuitive and natural.

    • 115.

      […] Angles The angle used in the gradients have also been switched to be measured always from the north (top) rather than from the right. There is no implementation yet that implements this yet, but this does mean if you have used […]

    • 116.

       learning CSS3 and HTML5 is easy
      by http://www.top-coder.ir
      طراحی سایت را بیاموزید

    • 117.

       learning CSS3 and HTML5 is easy
      by http://www.top-coder.ir
      طراحی سایت را بیاموزید

Hosting by: