Calculate Viewport Size in CSS

A way to calculate the viewport’s width and height without JavaScript, by way of Temani Afif over at CSS Tip:

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */
}

The snippet is a hat tip to Jane Ori who originally published it and wrote an explainer for how it works. I’m no math whiz, but I do recognize the tan() function from my high school days as a method for calculating a ratio for the opposite and adjacent sides of a right triangle based on a provided angle.

In other words, tan() divides the triangle’s height (opposite) by the width (adjacent) to produce an angle. All we do is supply it with the angle, i.e. tan( <angle> ).

Why the heck would we do that when we have calc(), right? The problem is that calc() is unable to do the type of division we need. So, what Jane Ori cleverly did was nest the atan() function inside: tan(atan()).

The cleverness is that atan() is the inverse of tan() where we supply it with a ratio dividing the width and height values: atan( <ratio> ). This way, the triangle’s width and height are taken as separate arguments that are calculated before the tan() function does its thing, giving it what it needs to calculate the tangent of an angle.

I’ll let Jane take it home:

So what this trick is doing is kind of silly in most worlds (and probably why nobody pointed it out sooner) because we’re using two trig functions instead of division that calc() implementations can’t do yet.

atan2( Height, Width ) = angle

tan( angle ) = Height / Width

tan( atan2( Height, Width ) ) = Height / Width

Jane Ori, “CSS Type Casting to Numeric: tan(atan2()) Scalars”

You’ll want to check out Jane’s full explainer for another example that calculates an element’s font-size value.