Return numeric values in precomputeValues about capsize HOT 4 OPEN

Hey Travis, very much interested in supporting relative units but have not found the right approach just yet. Curious to see what direction you've taken things and see what is working.

from capsize.

Awesome! Yeah, for sure! I think it should be a simple tweak. Here is a working Codesandbox to see an example.

from capsize.

My relative units workaround is based on 62.5% font-size on html trick, with that, just dividing numeric values of font-size and line-height by 10 do the job.

from capsize.

@michaeltaranto , @souporserious I have found a solution, which also allows CSS-heavy implementation, yet I would have to dive into details, because I have faced two serious browser limitations:

• one can not divide rem/rem in css calc()
• Chrome limits on calc(calc(...)) nesting prevent one from using full formula in CSS calc.

There are two aspects of workaround:

• use values of same size units (rem), but use them as numeric values, and only cast rem type on usage.
• pre-compute some values at compile-time

Example:

    --pro-rata-cap-height-trim:
      calc(
        (
          var(--pro-rata-precomputed-cap-height-trim-factors)
          -
          (
            (
              (
                var(--pro-rata-precomputed-line-height-scale) /* 1.362 */
                *
                var(--pro-rata-font-size)
              )
              - 
              var(--pro-rata-line-height) /* Dynamic numeric, latter converted to rem */
            )
            /
            2
            / 
            var(--pro-rata-font-size) /*  Dynamic numeric, latter converted to rem  */
          )
        )
        * 
        (-1) /* you may use (-1em) here and only here, if you want, actually */
      );
  }

• Here you may see --pro-rata-precomputed-cap-height-trim-factors and --pro-rata-precomputed-line-height-scale parameters, values of those may be statically pre-computed in JS, and injected into utility class for any given font-family to work around CSS calc(calc(...)) call stack limitations.
  In fact it is an inlined memoization of statically calculated value of expression:

(ascentScale - capHeightScale + lineGapScale)

inlined to offset some portion of calculations into compile-time.

• CSS variables --pro-rata-font-size and --pro-rata-line-height are set as numeric values, not as rem, and type casted at final stage:

/* utility class for font-size */
.pro-rata-cap-size-2 {
    --pro-rata-cap-size: 0.5; /* numeric, not rem */
    --pro-rata-font-size: 
      calc(
        var(--pro-rata-cap-size) 
        / var(--pro-rata-cap-height-scale)
      );
    
    font-size: calc(var(--pro-rata-font-size) * 1rem);
  }

Illustrative draft implementation is visible here: https://github.com/andriytyurnikov/andriytyurnikov.github.io/blob/main/src/pro-rata.css,
tailwind plugin is planned sometime later.

from capsize.