Gradians and Turns: the quiet heroes of CSS angles

Ken Bellows on January 21, 2019

When a design feels a bit too static and you want to add a little bit of motion to it (either animated or simply implied), think about adding som... [Read Full]
markdown guide
 

If you’re gonna specify 30° (1/3 of a right angle, i.e. 1/12 of a full angle), you don’t need 30deg nor 0.0833turn – nor do you need 33.333grad. You might want to use calc(1/12 * 1turn) – probably the easiest to read notation.

 

Definitely a solid option. I personally would have a hard time visualizing how much of a turn that is, since I'm super not used to thinking in twelfths, but if you like it, roll with it!

That's the big takeaway that I hope people get from this article: adding turns and grads into the mix gives us way more flexibility in finding the most personally useful way to express our angles. Use the one that makes the most sense to you and your team!

 

I’ve given private math lessons for years, so… deg for life!

 

Haha, fair enough! Why not go the distance and go all radians all the time? 😜

Just remember though, ain't all about you, it's about everyone else who has to read/deal with your code!

 
 

Gradians have theirs perks, but on the other hand:

  • nobody uses them;
  • nobody expects them (i.e., they're error inducing);
  • 100 has less divisors than 90 (that's actually why we ended up with degrees in the first place);
  • as you mentioned, they're not supported by SVG.

Actually, gradians are a banned unit on my style linter. Really not worth it.

Turns are very good and expressive, instead. They can also be nice to use with JavaScript computations.

 

Really appreciate the feedback! Here are my thoughts:

  • nobody uses them;
  • nobody expects them (i.e., they're error inducing);

Sure, but that's true of anything before it becomes commonplace; the same is true of turns, which you like. I do take your point about more obscure features being surprising for someone who comes along later, but in the case of CSS, there are a ton of hidden gems that few people are aware of, and I think the answer is to use them more rather than less, along with better education. And IMHO, a new unit is a very small, very concrete thing, and is very easy to learn and understand, especially given the value I see in it.

  • 100 has less divisors than 90

This is absolutely true, and there are definitely cases where that's very valuable, especially with more complex, multi-state, repeated rotations. But when it comes to hand-designing simple animations and static skew/rotation effects, I personally find that the ability to deal with angles as a percent of a quarter turn with no mental math is more than worth the trade-off, especially given that 1) I'm very used to dealing with percentages in fractions anyway (33.333% and all that), and 2) I'm usually sticking to whole-number percentages anyway, usually multiples of 10 and 25. And in fact, 90 isn't evenly divisible by 4 (90˚÷ 4 = 22.5˚), so grads might have a slight benefit in that way, if whole numbers are important to you.

  • as you mentioned, they're not supported by SVG.

True of course, but again, this applies just as well to turns. But I'm happy to concede that if you're doing things complicated enough to make SVGs worth the effort, you probably should be sticking to degrees, since you'll probably wind up using trig functions. And as I mentioned in the article, in my (familiar, but admittedly non-expert) experience, it's rare to hand-jam your SVGs these days anyway, so let the computer handle it when possible.

Overall, I don't think you're wrong in anything you said; those are all very legitimate concerns, especially depending on what you're rotating, and if those concerns are enough to dissuade you from using gradians, then hey, you've gotta do what's best for you. I just find them useful enough to be more than worth the tradeoffs. I hope my main point is clear: I think that gradians are probably the most useful within the very specific context of rotations within a single quadrant, but in that context they're very useful.

 

Thanks Ken ... I came to know about the multiple rotations of the element can be done easily using turns..

code of conduct - report abuse