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

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

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);

}
.large {
  font-size: 110%;
}
.medium {
  font-size: 100%;
}
.small {
  font-size: 90%;
}

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In Message: <kdmdnVonAMjrXyj9nZ2dnUU7-fmdnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

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);

}
.large {
font-size: 110%;
}
.medium {
font-size: 100%;
}
.small {
font-size: 90%;
}

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𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

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.

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

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

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)