non linear clamp

Andrew Poulos

unread,

Sep 4, 2021, 2:06:59 AM9/4/21

to

I'm using CSS clamp to set the font size of an element. The rule gets
added dynamically and in the CSS it looks like this

--font-size: calc(100wh / ${ratio});
font-size: clamp(10px, var(--font-size), 64px);

'ratio' is from the preset/initial window width divided by 16 (pixels, 1em).

As I change the window size the font size changes in a linear manner.

I would like it to grow faster (ie in a non-linear manner) while still
keeping the initial font size as 16 pixels? It seems to me that as the
window grows 'ratio' should smoothly get smaller but I'm unsure how to
do that:

--ratio: ?
--font-size: calc(100wh / var(--ratio));
font-size: clamp(10px, var(--font-size), 64px);

Andrew Poulos

Julio Di Egidio

unread,

Sep 4, 2021, 10:05:23 AM9/4/21

to

On Saturday, 4 September 2021 at 08:06:59 UTC+2, Andrew Poulos wrote:
> I'm using CSS clamp to set the font size of an element. The rule gets
> added dynamically and in the CSS it looks like this
>
> --font-size: calc(100wh / ${ratio});

What's "wh"? I can only guess but I cannot find it documented anywhere, and I cannot guess how it actually works since windows aren't just square...

> font-size: clamp(10px, var(--font-size), 64px);
>
> 'ratio' is from the preset/initial window width divided by 16 (pixels, 1em).
>
> As I change the window size the font size changes in a linear manner.
>
> I would like it to grow faster (ie in a non-linear manner) while still
> keeping the initial font size as 16 pixels? It seems to me that as the
> window grows 'ratio' should smoothly get smaller but I'm unsure how to
> do that:
>
> --ratio: ?
> --font-size: calc(100wh / var(--ratio));
> font-size: clamp(10px, var(--font-size), 64px);

Your font-size formula at present looks like:

fs(t) := fs_0 * wh(t) / wh_0

with wh(0) = wh_0, hence fs(0) = fs_0. In fact, fs(t) = fs_0 for all t such that wh(t) = wh_0, i.e. the "base" font size is the 16 pixels.

Now you want it non-linear, to grow/shrink ever faster when the window is resized (if I got you correctly).

I think the easiest approach (in general, to make it non-linear) is to choose an appropriate non-linear function to be applied to the linear result. Say 'nl' is the nonlinear function, chosen such that nl(0) = 0, then the new formula looks like:

fs'(t) := nl( fs(t) - fs_0 ) + fs_0

Now, to get the effect you desire, e.g. take the cubic nl(x) = a * x^3, with 'a' a positive scaling factor, whence:

fs_cubic(t) := a * (fs(t) - fs_0)^3 + fs_0.

That has still the property that fs_cubic(t) = fs_0 for all t such that wh(t) = wh_0, i.e. the "base" font size remains 16 pixels.

Since you want it to grow/shrink ever faster, if not (odd) polynomials then exponentials...

HTH and that I have not made any (serious) mistakes, I haven't tried any of it.

Julio

Julio Di Egidio

unread,

Sep 4, 2021, 10:13:23 AM9/4/21

to

In fact, that property already holds for the fs'(t) above.

> Since you want it to grow/shrink ever faster, if not (odd) polynomials then exponentials...
>
> HTH and that I have not made any (serious) mistakes, I haven't tried any of it.

BTW, to test these "transformations", something like <https://www.desmos.com/calculator> may be your friend.

Have fun,

Julio

Andrew Poulos

unread,

Sep 4, 2021, 7:45:42 PM9/4/21

to

On 5/09/2021 12:05 am, Julio Di Egidio wrote:
> On Saturday, 4 September 2021 at 08:06:59 UTC+2, Andrew Poulos wrote:
>> I'm using CSS clamp to set the font size of an element. The rule gets
>> added dynamically and in the CSS it looks like this
>>
>> --font-size: calc(100wh / ${ratio});
>
> What's "wh"? I can only guess but I cannot find it documented anywhere, and I cannot guess how it actually works since windows aren't just square...

Dang, it's a typo. It should've been vw.

>> font-size: clamp(10px, var(--font-size), 64px);
>>
>> 'ratio' is from the preset/initial window width divided by 16 (pixels, 1em).
>>
>> As I change the window size the font size changes in a linear manner.
>>
>> I would like it to grow faster (ie in a non-linear manner) while still
>> keeping the initial font size as 16 pixels? It seems to me that as the
>> window grows 'ratio' should smoothly get smaller but I'm unsure how to
>> do that:
>>
>> --ratio: ?
>> --font-size: calc(100wh / var(--ratio));
>> font-size: clamp(10px, var(--font-size), 64px);
>
> Your font-size formula at present looks like:
>
> fs(t) := fs_0 * wh(t) / wh_0
>
> with wh(0) = wh_0, hence fs(0) = fs_0. In fact, fs(t) = fs_0 for all t such that wh(t) = wh_0, i.e. the "base" font size is the 16 pixels.
>
> Now you want it non-linear, to grow/shrink ever faster when the window is resized (if I got you correctly).
>
> I think the easiest approach (in general, to make it non-linear) is to choose an appropriate non-linear function to be applied to the linear result. Say 'nl' is the nonlinear function, chosen such that nl(0) = 0, then the new formula looks like:
>
> fs'(t) := nl( fs(t) - fs_0 ) + fs_0
>
> Now, to get the effect you desire, e.g. take the cubic nl(x) = a * x^3, with 'a' a positive scaling factor, whence:
>
> fs_cubic(t) := a * (fs(t) - fs_0)^3 + fs_0.
>
> That has still the property that fs_cubic(t) = fs_0 for all t such that wh(t) = wh_0, i.e. the "base" font size remains 16 pixels.
>
> Since you want it to grow/shrink ever faster, if not (odd) polynomials then exponentials...
>
> HTH and that I have not made any (serious) mistakes, I haven't tried any of it.

Thanks, it's a great start for me. I think I can do it from here.

Andrew Poulos