Relative font-size support

[andriytyurnikov]

I am exploring some approaches to responisve typography, and I am trying to use tricks like

.rescale-from-rem {
  font-size: calc(100% / 1.428);
}

.autoscaled-base {
  font-size: calc(1rem / 4 * 8);
}

Which results in

--font-size-px: NaN

I am not sure, what is going on here. Is implementation somehow reliant on pixel values?

[andriytyurnikov]

Ok, I gave it more thought... Just thinking out loud - comments are totally welcome: 1) Solution we rely on in general - needs line height to be known. 2) Current implementation performs some transformations during compile-time. 3) Current implementation assumes single rem value (known during compile-time)

Therefore using current implementation with responsive rem won't be possible.

In order to implement responsive rem one would need to not rely on compile-time knowledge of rem and line-height, but current line-height value would have to be injected into context of CSS calc() anyway.

Conceptually it would look like:

font-size: 
  calc(
    1rem, 
    var(--rem-relative-font-size), 
    var(--rem-relative-line-height), 
    var(--font-metrics)
);

To achieve that one would have to alter(or bring his own) line-height utility classes, which would set --rem-relative-line-height, and his own --rem-relative-font-size and --rem-relative-font-metrics utility classes, and to express value of font-size as a dynamic calc()

[andriytyurnikov]

Related to https://github.com/seek-oss/capsize/issues/121

[andriytyurnikov]

Ok, I've put some work into it, and here it is: CSS calc doesn't support division operation on unit values: calc(2rem / 1rem) doesn't work, therefore deriving ratios in CSS is problematic.

[andriytyurnikov]

CSS-only rem solution is here: https://jsbin.com/danobedoye/11/edit?html,css,output