Search code examples
cssresponsivefluid-layouttypography

What is the resultant unit type of some VW value + some REM value?


In considering:

clamp(1.25rem, 2.5vw + 1rem, 2.5rem);

which I assume to be equivalent to:

clamp(1.25rem, calc(2.5vw + 1rem), 2.5rem);

What is the resultant unit-type of the middle calc expression?

I understand that with the clamp function, in particular respect to the middle target value- if only screen-relative units are used Accessibility concerns arise, as the text will no longer respond to magnification. So we introduce the addition of REM units, and this produces behind-the-scenes some value which now responds to zooming attempts.

But that produced/computed value- is it in REMs or, pixels, etc?


Solution

  • It's complicated.

    From the linked spec we see that the computed value of your clamp expression will resolve to a single value, because it can be so resolved. But had it contained percentages, or something else that depended on layout, then the computed value might be the expression, or a simplified version of the expression, and the single value won't be obtained until the used value is determined.

    The actual unit of the single value is not determined. However, for serialization (as you'd see in the browser's dev tools for example). lengths are represented in pixels. Not all calculations are represented in pixels though. Angles, for example, calculating on degrees and radians and turns, will be represented in degrees. Other types of values have other canonical units.