Exposés fluides et indices

Les exposés et les indices sont des éléments indispensables dans le contenu académique et scientifique, et ils sont indispensables à partir de références aux formules chimiques et aux expressions mathématiques. Cependant, les navigateurs gèrent ces éléments plus statiquement, ce qui peut facilement causer des problèmes: les éléments peuvent être trop petits sur les appareils mobiles et trop grands sur les moniteurs de bureau.

Je travaille à la résolution du problème de mise à l'échelle de l'exposant et de l'indice dans CSS depuis de nombreuses années, et maintenant je propose une solution moderne utilisant l'informatique fluide. Cet article expliquera pourquoi il existe des lacunes dans les méthodes statiques et comment fournir une meilleure typographie pour toutes les fenêtres tout en conservant l'accessibilité. Mieux encore, cette solution ne nécessite que du code CSS concis et pur.

Problèmes de mise à l'échelle statique

Le problème du zoom est particulièrement visible lors de la comparaison de la typographie professionnelle avec les paramètres par défaut du navigateur. Voir cet exemple (adapté de Wikipedia), où le premier "2" est conçu professionnellement et inclus dans l'ensemble de glyphes, tandis que le second utilise _{(haut) et ^{(en bas) éléments:}}

Historiquement, les navigateurs ont utilisé font-size: smaller pour les éléments ^{et _{, ce qui est environ 0,83 fois la mise à l'échelle. Cela était raisonnable lorsque CSS a été utilisé dans des documents simples au début, mais dans les conceptions réactives modernes, la taille de la police pourrait varier considérablement, ce qui crée des problèmes. Cela est particulièrement vrai lors de l'utilisation de la typographie fluide, les tailles de texte peuvent être mises à l'échelle entre les valeurs extrêmes.}}

Échelle fluide: meilleure solution

J'ai développé une solution qui évolue plus naturellement sur différentes tailles en combinant des unités fixes et proportionnelles. Cette approche assure la lisibilité des petites tailles tout en maintenant les proportions correctes à grande taille sans ajustements spécifiques au contexte.

Ce qui suit est de savoir comment cela fonctionne:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(0.42em - 1.66px) */
}

• Échelle naturelle : La formule décroissante garantit que les exposés et les indices restent proportionnels à toutes les tailles.
• Alignement de base : En utilisant vertical-align: baseline et le positionnement relatif, nous empêchons les éléments d'affecter les hauteurs de ligne et fournissent un meilleur contrôle sur les compensations pour répondre à vos besoins spécifiques. Vous pouvez également savoir d'où viennent ces valeurs - je l'expliquerai ci-dessous.

Décomposition mathématique

Analysons comment cela fonctionne un par un:

Calculer la taille de la police (PX)

En petites tailles, le composant fixe 4px a un impact plus important. En grandes tailles, le rapport 0,5EM domine. Le résultat est une échelle plus naturelle à toutes les tailles.

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

Calculer la taille de la police des parents (EM)

à l'intérieur des éléments ^{et _{, nous pouvons calculer la taille de la police du parent:}}

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

La taille de la police fluide est définie comme calc(0.5em 4px). Pour compenser 0,5EM, nous devons d'abord résoudre 0,5em * x = 1em et obtenir x = 2. Ici, 1EM représente la taille de la police des éléments ^{et _{eux-mêmes. Nous soustrayons le composant fixe de 4px de la valeur EM actuelle avant l'opération de multiplication.}}

décalage vertical

Pour les décalages verticaux, nous commençons par la valeur de positionnement CSS par défaut et l'ajustez en fonction de notre mise à l'échelle des fluides:

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(0.42em - 1.66px) */
}

Cette formule a été soigneusement calibrée pour correspondre au positionnement standard du navigateur:

• 0,5EM (SuperScript) et 0,25EM (indice) sont les valeurs de décalage vertical par défaut (par exemple, utilisées dans des cadres tels que CSS et bootstrap).
• Nous multiplions par 0,83 pour considérer le facteur de mise à l'échelle font-size: smaller du navigateur, qui est utilisé par défaut pour les exposés et les indices.

Cette méthode garantit que nos exposés et nos indices restent dans des positions verticales familières tout en bénéficiant d'une mise à l'échelle des fluides améliorée. Les résultats sont cohérents avec ce que les utilisateurs attendent du rendu traditionnel du navigateur, mais s'adaptant plus naturellement à différentes tailles de police.

Conseils utiles

Le facteur de mise à l'échelle exact font-size: (0.5em 4px) est basé sur mon analyse des caractères Unicode exposés dans les polices communes. Vous pouvez ajuster ces valeurs à volonté pour répondre à vos besoins de conception spécifiques. Voici quelques façons de personnaliser cette méthode:

pour une mise à l'échelle plus grande:

sup, sub {
  font-size: calc(0.5em + 4px);
  /* ... */
}

sub { 
  /* ... */
}

pour la mise à l'échelle plus petite:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(2 * (1em - 4px));
}

sub { 
  top: calc(2 * (1em + 4px));
}

Pour la compatibilité arrière , vous voudrez peut-être tout envelopper dans un bloc @supports:

sup, sub {
  font-size: calc(0.5em + 4px);
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px));
}

sub { 
  top: calc(0.25 * 0.83 * 2 * (1em - 4px));
}

Démo final

J'ai construit cette petite démo interactive pour montrer différentes options de mise à l'échelle des fluides, les comparer à la mise à l'échelle statique du navigateur et à affiner le positionnement vertical pour voir ce qui est le mieux pour votre cas d'utilisation: (le lien de démonstration doit être inséré ici)

Essayez-le dans votre prochain projet et j'aimerais entendre ce que vous pensez!

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!