CSS WG Blog Angles in Gradients

Angles in Gradients

Posting on behalf of Tab Atkins:

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?

Post your response to www-style or CSS3.info.

« Previous article Next article »