This post was imported and is awaiting clean up.
Graph with alpha and beta sections

CSS measurements: the normal, the strange, the obscure. Part 2

Published on 2017-08-10 09:00

In part one I stopped in the middle of the strange chapter because I wasn't sure if I should classify certain units into the strange or obscure category. Now I made up my mind, so without a further ado let's finish the strange ones.

Degrees, radians and turns (deg, rad, turn) are angle units used in CSS usually for transformations which rotate element.

transform: rotate(90deg);
transform: rotate(1.570796rad);
transform: rotate(0.25turn);

All three transformations in example above do the same thing and that's rotating an element 90 degrees. At the moment easiest to use are degrees and turns because CSS at the moment1. isn't able to to process calculations and function calc() , as far as I can tell doesn't work as I would like to[2. calc(.5 π)rad]  and most common angles are multipliers of number π. So you would have to calculate them manually.

The Obscure

I started this post with angle units and there is one left, Gradian or grad which is defined as 1/400th of one turn or π/200 of one radian. Frankly speaking I have no idea when to use because the definition is weird and it isn't taught in schools that much.

Another unit group where I struggled what to think about it are dots per area units, specifically Dots Per Inch (dpi), Dots Per CentiMeter (dpcm) and Dots Per PiXel (dppx). Dots per pixel is useful when we talk about retina displays where it can be desirable to serve higher quality images but without something like Network Information API for CSS its use is a bit questionable. Our user can have retina display but can be on a train at the same time, do we really want to serve them bigger images when they can't download them?

Dots per Inch and Centimeter are usable in print and probably should be avoided on screen because trying to calculate width of physical screen is guesswork at best and pure magic at worst.

In CSS there are two units which are based on letters, ex and chex is based on the height of small letter x of the first font the browser can find and in case a browser is unable to find a letter x in the font then the browser assumes that ex is equal to 0.5em. ch is based on "0" (ZERO, U+0030) and depends on the flow of the text, default values are 0.5em and 1em. Frankly speaking both units sound more obscure than I thought and I'll avoid them like devil avoid holy water in my work.

Q![3. Not the one from Star Trek] Q is a quite obscure unit called quarter-millimeter and is defined as 1/40th of an centimeter. I wish I knew when to use this unit but honestly I am happy with Base-10, Base-2 and Base-16 calculations. Base-40 is something I am not sure I can ever understand or use.

Last but not least CSS standard defines also frequency units Hz and kHz. Unfortunately no browser supports them at the moment and I am afraid that it won't change anytime soon. 1 Hz means one event per one second and if humans need at least 200ms to register something it would be hard to use anything with frequency higher than 5Hz. And unless something happens and sounds will get into official CSS standards it will sit in CSS Values Level 3 standard unimplemented by browsers.


There are a lot of units (26) in CSS and it is interesting to go through them every once in a while although I am quite sad about the frequency units because they probably stay unimplemented for a long time.


  1. August 2017