info
Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Using clamp
1 view
Skip to first unread message
Andrew Poulos
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
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
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:
> 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);
font-size: clamp(16px, 5vw, 50px);
James Kirk
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𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜
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
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 :-)
> 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?
<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
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.
> 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()>
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
0 new messages