Taille de police à échelle linéaire avec CSS clamp () basé sur la fenêtre

La typographie réactive a essayé de nombreuses méthodes dans le passé, telles que les requêtes multimédias et CSS calc ().

Cet article explorera une approche différente, qui consiste à évoluer le texte linéairement entre les tailles minimales et maximales à mesure que la largeur de la fenêtre augmente, dans le but de rendre son comportement plus prévisible à différentes tailles d'écran - le tout avec une seule ligne de code CSS, grâce à clamp() .

Le CSS Function clamp() est puissant. Il fonctionne à toutes fins, mais est particulièrement utile pour la typographie. Il fonctionne comme suit: il accepte trois valeurs:

 <code>clamp(minimum, preferred, maximum);</code>

La valeur qu'il renvoie sera la valeur préférée jusqu'à ce que la valeur préférée soit inférieure à la valeur minimale (la valeur minimale sera renvoyée) ou supérieure à la valeur maximale (la valeur maximale sera renvoyée).

Donc, en supposant que vous ne définissez pas une valeur étrange et que vous la définissez entre les valeurs minimales et maximales, est-ce toujours la valeur préférée? Eh bien, vous devez utiliser des formules avec des valeurs préférées, par exemple:

 <code>.banner { width: clamp(200px, 50% 20px, 800px); /* 是的，您可以在clamp() 中进行数学运算！*/ }</code>

Supposons que vous souhaitiez définir la taille minimale de la police de l'élément à 1 REM lorsque la largeur de la fenêtre est de 360px ou moins et que la taille maximale de la police est de 3,5 REM lorsque la largeur de la fenêtre est de 840px ou plus.

autrement dit:

 <code>1rem  = 360px 及以下缩放= 361px - 839px 3.5rem = 840px 及以上</code>

Toute largeur de fenêtre entre 361 et 839 pixels nécessite une taille de police qui est linéairement mise à l'échelle entre 1REM et 3,5REM. L'utilisation clamp() est en fait très facile ! Par exemple, avec une largeur de la fenêtre de 600 pixels (entre 360 ​​et 840 pixels), nous obtiendrons la valeur intermédiaire entre 1REM et 3,5REM, c'est-à-dire 2.25rem.

L'objectif que nous essayons d'atteindre avec clamp() est appelé interpolation linéaire : obtient les informations intermédiaires entre deux points de données.

Voici quatre étapes pour faire ceci:

Étape 1

Sélectionnez les tailles de police minimales et maximales, ainsi que les largeurs de fenêtre minimales et maximales. Dans notre exemple, la taille de la police est 1REM et 3,5REM et la largeur est 360px et 840px.

Étape 2

Convertir la largeur en rem. Étant donné que 1REM sur la plupart des navigateurs est 16px par défaut (plus à ce sujet plus tard), nous l'utiliserons. Par conséquent, les largeurs de vision minimale et maximale seront respectivement de 22,5 REM et 52,5 REM.

Étape 3

Ici, nous serons légèrement biaisés vers l'aspect mathématique. Lorsqu'il est combiné, la largeur de la fenêtre et la taille de la police forment deux points sur les systèmes de coordonnées X et Y, et ces points forment une ligne.

Nous avons besoin de cette ligne - plus précisément, nous avons besoin de sa pente et de son intersection avec l'axe Y. Voici la méthode de calcul:

 <code>slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope minFontSize</code>

Cela nous conduit à une valeur de pente de 0,0833 et à une valeur d'intersection de l'axe y de -0,875.

Étape 4

Maintenant, nous construisons clamp() . La formule de la valeur préférée est:

 <code>preferredValue = yAxisIntersection[rem] (slope * 100)[vw]</code>

Ainsi, la fonction finit par être ceci:

 <code>.header { font-size: clamp(1rem, -0.875rem 8.333vw, 3.5rem); }</code>

Vous pouvez visualiser les résultats dans la démonstration suivante:

Continuez et essayez-le. Comme vous pouvez le voir, lorsque la largeur de la fenêtre est de 840px, la taille de la police cesse de croître et lorsque la largeur de la fenêtre est de 360px, la taille de la police cesse de diminuer. Tout entre les changements de manière linéaire.

Et si l'utilisateur modifie la taille de la police racine?

Vous avez peut-être remarqué une petite faille dans cette approche: cela ne fonctionne que si la taille de la police racine est ce que vous pensez (16px dans l'exemple précédent) et ne change jamais.

Nous convertissons les largeurs 360px et 840px en unités REM en la divisant par 16, car nous supposons qu'il s'agit de la taille de la police racine. Si l'utilisateur définit sa préférence sur une autre taille de police racine, comme 18px au lieu du 16px par défaut, le calcul se déroulera et le texte ne redimensionnera pas comme nous l'avons prévu.

Nous n'avons qu'un moyen d'utiliser ici, qui est (1) faire les calculs nécessaires dans le code lorsque la page se charge, (2) écouter les modifications de la taille de la police racine, et (3) recalculer tout si quelque chose de modifications se produit.

Voici une fonction JavaScript utile pour effectuer des calculs:

 // Obtenez la largeur de la fenêtre dans les pixels et la taille de la police dans le clilter de fonction REM (Minwidthpx, maxwidthpx, minfontsize, maxfontsize) {
  const root = document.QuerySelector ("html");
  const pixelsperrem = nombre (getCompuledStyle (root) .fontize.slice (0, -2));

  const minwidth = minwidthpx / pixelsperrem;
  const maxwidth = maxwidthpx / pixelsperrem;

  const slope = (maxfontize - minfontize) / (maxwidth - minwidth);
  Const yaxisInthessection = -minwidth * pente minfontsize;

  return `clamp ($ {minfontsize} rem, $ {yaxisIntersection} rem $ {slope * 100} vw, $ {maxfontsize} rem)`;
}

// ClampBuilder (360, 840, 1, 3,5) -> "pince (1rem, -0.875rem 8.333vw, 3.5rem)"

J'ai délibérément omis comment injecter la chaîne retournée dans CSS car il existe de nombreuses façons de le faire en fonction de vos besoins et si vous utilisez CSS natif, la bibliothèque CSS-in-JS ou autre chose. De plus, il n'y a pas d'événements natifs pour les changements de taille de police, nous devons donc vérifier manuellement. Nous pouvons utiliser setInterval pour vérifier une fois par seconde, mais cela peut affecter les performances.

Cela ressemble plus à une situation extrême. Peu de gens changent la taille de la police de leurs navigateurs, et même moins de personnes le changent lors de la visite de votre site Web. Mais si vous voulez que votre site Web soit aussi réactif que possible, c'est la meilleure façon de le faire.

Pour ceux qui ne se soucient pas des situations extrêmes

MISE À JOUR: Les ressources partagées ici ont cessé de fonctionner depuis la publication de cet article. Si vous recherchez une calculatrice pour aider à déterminer les tailles de police dans diverses fenêtres, envisagez d'utiliser un générateur de type fluide, qui utilise la typographie du fluide moderne.

Comment éviter le réajustement du texte

Un tel contrôle méticuleux sur la taille de la typographie nous permet de faire d'autres choses intéressantes, telles que l'empêche de texte de réajuster à différentes largeurs de la fenêtre.

C'est le comportement normal du texte.

Mais maintenant, avec notre contrôle, nous pouvons garder le texte le même nombre de lignes, enveloppant toujours des lignes au même mot, quelle que soit la largeur de la fenêtre que nous utilisons.

Alors, comment pouvons-nous faire cela? Premièrement, le rapport entre la taille de la police et la largeur de la fenêtre doit rester le même. Dans cet exemple, nous passons de 1REM à 320px à 3rem à 960px.

 <code>320 / 1 = 320 960 / 3 = 320</code>

Si nous utilisons clampBuilder() écrite plus tôt, elle deviendra:

 const text = document.QuerySelector ("p");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);

Il maintient la même largeur / rapport de police. La raison pour laquelle nous le faisons est que nous devons nous assurer que le texte a la bonne taille à chaque largeur afin que nous puissions maintenir le même nombre de lignes. Il sera toujours réajusté à différentes largeurs, mais cela est nécessaire pour le prochain travail que nous devons faire.

Maintenant, nous devons obtenir de l'aide des unités de caractère CSS (CH), car avoir la bonne taille de police ne suffit pas. Une unité CH est équivalente à la largeur du glyphe "0" dans la police de l'élément. Nous voulons rendre le corps du texte aussi large que la fenêtre, non en réglant width: 100% , mais en utilisant width: Xch , où x est le nombre d'unités CH (ou 0) nécessaires pour remplir la fenêtre horizontalement.

Pour trouver X, nous devons diviser la largeur de la fenêtre minimale 320px par la taille CH de l'élément à la taille de la police lorsque la largeur de la fenêtre est de 320px. Dans ce cas, c'est 1 Rem.

Ne vous inquiétez pas, voici un extrait de code pour calculer la taille CH de l'élément:

 // Renvoie la largeur du glyphe "0" de l'élément (en pixels) à la taille de police souhaitée
fonction Calculatech (élément, fontsize) {
  const zero = document.CreateElement ("Span");
  zero.innertext = "0";
  zero.style.position = "absolu";
  zero.style.fontsize = FonTSize;

  element.ApendChild (zéro);
  const chpixels = zero.getBoundingClientRect (). largeur;
  element.removechild (zéro);

  return chpixels;
}

Maintenant, nous pouvons continuer à définir la largeur du texte:

 fonction Calculatech (élément, FontSize) {...}

const text = document.QuerySelector ("p");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);
text.style.width = `$ {320 / calculach (text," 1rem ")} ch`;

Wow, attendez. Quelque chose de mal s'est produit. Il y a une barre de défilement horizontale qui gâche les choses!

Lorsque nous parlons de 320px, nous parlons de la largeur de la fenêtre, y compris la barre de défilement verticale. Par conséquent, la largeur du texte est définie sur la largeur de la zone visible plus la largeur de la barre de défilement, ce qui le fait déborder horizontalement.

Alors pourquoi ne pas utiliser une mesure qui ne contient pas la largeur de la barre de défilement verticale? Nous ne pouvons pas, c'est à cause de l'unité CSS VW. N'oubliez pas que nous utilisons VW dans clamp() pour contrôler la taille de la police. Vous verrez que VW comprend la largeur de la barre de défilement verticale, qui fait l'échelle de la police avec la largeur de la fenêtre, y compris la barre de défilement. Si nous voulons éviter tout réajustement, la largeur doit être proportionnelle à la largeur de la fenêtre, y compris la barre de défilement.

Alors que devons-nous faire? Quand nous le faisons:

 text.style.width = `$ {320 / calculach (text," 1rem ")} ch`;

… Nous pouvons réduire le résultat en le multipliant par un nombre inférieur à 1. 0,9 peut résoudre le problème. Cela signifie que la largeur du texte sera de 90% de la largeur de la fenêtre, ce qui sera suffisant pour compenser le petit espace que la barre de défilement occupe. Nous pouvons le rendre plus étroit en utilisant des nombres plus petits (par exemple 0,6).

 fonction Calculatech (élément, FontSize) {...}

const text = document.QuerySelector ("p");
text.style.fontsize = ClampBuilder (20, 960, 1, 3);
text.style.width = `$ {320 / calculach (text," 1rem ") * 0,9} ch`;

Vous pourriez avoir tendance à simplement soustraire quelques pixels de 320 pour ignorer la barre de défilement, comme ainsi:

 text.style.width = `$ {(320 - 30) / calculach (text," 1Rem ")} ch`;

Le problème avec cela est qu'il restaurera le problème de rééducation! En effet, la soustraction de 320 détruira le rapport de la fenêtre / police.

La largeur du texte doit toujours être un pourcentage de la largeur de la fenêtre. Une autre chose à noter est que nous devons nous assurer que nous chargeons la même police sur chaque appareil qui utilise le site. Cela semble évident, n'est-ce pas? Eh bien, voici un petit détail qui pourrait dévier votre texte. Faire des choses comme font-family: sans-serif ne garantit pas que les mêmes polices sont utilisées dans chaque navigateur. sans-serif définira Arial sur Chrome pour Windows, mais Roboto sur Chrome pour Android. De plus, la géométrie de certaines polices peut provoquer un réajustement, même si vous faites tout correctement. Les polices de monowidth ont tendance à produire les meilleurs résultats. Par conséquent, assurez-vous de vous assurer que vos polices sont exactes.

Voir cet exemple non battant dans la démonstration suivante:

Texte de non-réalisation dans le conteneur

Ce que nous devons faire maintenant, c'est appliquer la taille et la largeur de la police au conteneur, pas directement à l'élément texte. Le texte en elle doit être défini sur width: 100% . Pour les paragraphes et les titres, ce n'est pas nécessaire car ce sont eux-mêmes des éléments au niveau du bloc et rempliront automatiquement la largeur du conteneur.

Un avantage de l'application de cette méthode dans un conteneur parent est que ses enfants répondront automatiquement et redimensionneront sans définir leur taille de police et leur largeur une par une. De plus, si nous devons modifier la taille de la police d'un seul élément sans affecter les autres, nous changeons simplement sa taille de police en n'importe quelle valeur EM et il sera naturellement relatif à la taille de la police du conteneur.

Le texte non raffinant est difficile, mais c'est un effet subtil qui peut apporter de bons résultats à la conception!

Résumer

Pour résumer, j'ai mis en place une petite démonstration de l'apparence de tout cela dans un scénario réel.

Dans cet dernier exemple, vous pouvez également modifier la taille de la police racine et clamp() recalcule automatiquement afin que le texte ait la bonne taille dans tous les cas.

Bien que l'objectif de cet article soit d'utiliser clamp() avec la taille de la police, cette même technique peut être utilisée pour recevoir tous les attributs CSS d'unités de longueur. Maintenant, je ne dis pas que vous devriez l'utiliser n'importe où. Plusieurs fois, une bonne font-size: 1rem suffit. Je veux juste vous montrer combien de contrôle vous pouvez avoir lorsque vous en avez besoin .

Personnellement, je crois que clamp() est l'une des meilleures choses de CSS et j'ai hâte de voir ce que les autres utilisent les gens qui trouveront car cela devient de plus en plus largement utilisé!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!