Using clamp

1 view
Skip to first unread message

Andrew Poulos

unread,
Jun 1, 2021, 1:13:59 AM6/1/21
to
I'm considering using clamp() in a current project but I'm unsure
exactly how it can be used.

As I understand it the middle of the three parameters, that clamp()
expects, is the preferred size and is or should be of a type that will
vary with the size of the viewport eg 10vw.

This works fine for a P in which all the text is the same size but if I
have an ARTICLE that contains text that needs to be at differing sizes
relative to other text in the ARTICLE how is that achieved?

For example, if I have this

<article>
<p class="large">This is large text.</p>
<p class="medium">This is medium text.</p>
<p class="small">This is small text.</p>
</article>

Here 'large' is always 10% larger than 'medium' text which is itself 10%
larger than 'small' text. Would something like this be appropriate:

article {
clamp: (16px, 5vw, 50px);
}
.large {
font-size: 110%;
}
.medium {
font-size: 100%;
}
.small {
font-size: 90%;
}


Andrew Poulos

Andrew Poulos

unread,
Jun 1, 2021, 1:15:40 AM6/1/21
to
On 1/06/2021 3:13 pm, Andrew Poulos wrote:
> I'm considering using clamp() in a current project but I'm unsure
> exactly how it can be used.
>
> As I understand it the middle of the three parameters, that clamp()
> expects, is the preferred size and is or should be of a type that will
> vary with the size of the viewport eg 10vw.
>
> This works fine for a P in which all the text is the same size but if I
> have an ARTICLE that contains text that needs to be at differing sizes
> relative to other text in the ARTICLE how is that achieved?
>
> For example, if I have this
>
> <article>
>  <p class="large">This is large text.</p>
>  <p class="medium">This is medium text.</p>
>  <p class="small">This is small text.</p>
> </article>
>
> Here 'large' is always 10% larger than 'medium' text which is itself 10%
> larger than 'small' text. Would something like this be appropriate:
>
> article {
>   clamp: (16px, 5vw, 50px);
I meant:
font-size: clamp(16px, 5vw, 50px);

James Kirk

unread,
Jun 3, 2021, 3:42:34 PM6/3/21
to
In Message: <kdmdnVonAMjrXyj9...@westnet.com.au>
The only issue I can think of would be user settings.

default zoom, font-size, font-size-adjust, minimum font size,
maximum font size … any other accessibility setting?

Basically the same settings that everyone should keep in mind with
any design depending on the user and their settings.


--
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜


Thomas 'PointedEars' Lahn

unread,
Jun 7, 2021, 8:08:12 AM6/7/21
to
Andrew Poulos wrote:

> I'm considering using clamp()

I have been waiting for such a feature for ages :-)

> in a current project but I'm unsure exactly how it can be used.
>
> As I understand it the middle of the three parameters, that clamp()
> expects, is the preferred size and is or should be of a type that will
> vary with the size of the viewport eg 10vw.
>
> This works fine for a P in which all the text is the same size but if I
> have an ARTICLE that contains text that needs to be at differing sizes
> relative to other text in the ARTICLE how is that achieved?

Have you already read

<https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()>

?

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Andrew Poulos

unread,
Jun 12, 2021, 2:50:51 AM6/12/21
to
On 7/06/2021 10:08 pm, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> I'm considering using clamp()
>
> I have been waiting for such a feature for ages :-)
>
>> in a current project but I'm unsure exactly how it can be used.
>>
>> As I understand it the middle of the three parameters, that clamp()
>> expects, is the preferred size and is or should be of a type that will
>> vary with the size of the viewport eg 10vw.
>>
>> This works fine for a P in which all the text is the same size but if I
>> have an ARTICLE that contains text that needs to be at differing sizes
>> relative to other text in the ARTICLE how is that achieved?
>
> Have you already read
>
> <https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()>

Yes, I've read it.

My problem is complicated by existing code that dynamically adds nodes
that have font sizes defined. I'm going to have to use other code to
over write any existing font-sizing and test to see how bad it looks (if
clamp causes a sudden jump in font size and associated element resize.)

Andrew Poulos
Reply all
Reply to author
Forward
0 new messages