CSS WG Blog Angles in Gradients

This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, and the Future of CSS syndicator.

Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C.

Angles in Gradients

By fantasai May 17, 2011 (Permalink)
Categories: general

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:

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 »

[Photo: group photo of the CSS working group in Lyon, France] Contact: Bert Bos
Copyright © 2013 W3C®

Last updated 2011-05-17 21:26:44