Font-variant-position - Propriété CSS
Résumé des caractéristiques de la propriété font-variant-position
normal | sub | supernormalfont-variant-position passe d'une valeur à l'autre sans transition.Schéma syntaxique de font-variant-position.
font-variant-positionLes liens du schéma donnent accès à plus de détails
Description de la propriété font-variant-position.
font-variant-position est très dépendant de la police de caractères utilisée.
La propriété font-variant-position permet la mise en indice ou en exposant.
Elle semble faire double emploi avec la propriété vertical-align ou avec les balise HTML sub
et sup, mais la différence vient du fait que font-variant-position exploite les possibilités des polices
OTF, alors que les autres solutions procèdent par calcul.
Ce qui signifie que font-variant-position peut utiliser pour les exposants ou les indices, des glyphes différents
de ceux utilisés pour les caractères standards. Ces glyphes sont fournis par la police et mieux adaptés à la
mise en indice ou en exposant.
Change l'interligne. Réduit la taille des caractères.
vertical-alignChange l'interligne.
Ne réduit pas la taille des caractères.
font-variant-positionPas tous les caractères (1).
Dépend de la police.
(1) Les polices fournissent rarement les glyphes exposant et indice pour l'ensemble des caractères. Souvent c'est uniquement les nombres qui sont déclinés en exposant et indice.
Ci-dessous un résultat comparé entre les trois méthodes.
Ce premier texte contient des exposants et des indices mis en forme
avec les balises HTML sup et sub.
Les caractères mis en exposant ou en indice sont non seulement décalés par rapport à la ligne de base,
mais ils sont également dans une taille plus petite.
La hauteur de la première ligne a aussi été augmentée.
C'est le fonctionnement normal des balises sup et sub.
vertical-align.Ce deuxième texte contient des exposants
et des indices mis en forme avec la propriété vertical-align.
On voit que la taille des caractères n'a pas été modifiée. L'interligne est augmenté.
font-variant-position.Enfin, ce texte contient des exposants et des
indices mis en forme avec la propriété font-variant-position.
La taille des caractères en exposant ou en indice a été réduite, mais il se peut aussi que leur forme soit également adaptée
(suivant la police).
Il n'y a pas de nécessité de changer l'interligne.
Du point de vue typographique, ce résultat est le meilleur des trois mais malheureusement très dépendant de la
police de caractères choisie et du navigateur utilisé.
⚠ Cet exemple ne fonctionnera pas sur tous les navigateurs : la propriété
font-variant-position est encore mal reconnue. A tester sur Firefox 
.
Voici un code CSS qui permet d'obtenir une mise en forme correcte sur tous les navigateurs, tout en exploitant au mieux les possibilités de chacun
d'eux. Il utilise la directive @supports pour tester la compatibilité du navigateur.
@supports not (font-variant-position:super) {
<selector> {
vertical-align: top;
font-size: 0.75em;
}
}
@supports (font-variant-position:super) {
<selector> {
font-variant-position:super;
}
}
Voir aussi la propriété résumée font-variant, la propriété font-feature-settings pour une présentation générale des possibilités
des polices OTF, et enfin, la propriété font-synthesis-position pour activer ou désactiver le calcul des exposants et indices lorsque
la police de caractères ne propose pas ces variantes.
Syntaxes pour font-variant-position.
- font-variant-position: normal;
Valeur par défaut. Les caractères sont sur la ligne de base.
- font-variant-position: super;
Mise en exposant.
La valeur
superest équivalent àfont-feature-settings:'sups'.
Ceci est une simulation - font-variant-position: sub;
Mise en indice.
La valeur
subest équivalent àfont-feature-settings:'subs'.
Ceci est une simulation
Valeurs standards acceptées par toutes les propriétés:
font-variant-position: initial (normal)
font-variant-position: inherit
font-variant-position: revert
font-variant-position: revertLayer
font-variant-position: unset
Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.
Exemple d'animation de la propriété font-variant-position.
Voici un petit visuel (sans grande prétention) qui utilise l'animation de font-variant-position.
Pour l'instant, il ne fonctionne que sur Firefox.
Simulateur avec la propriété font-variant-position.
Le simulateur applique la propriété font-variant-position sur les parties de texte en bleu. Celles-ci sont délimitées par des balises span.
Surface du cercle = πd2/4
Prise en charge par les navigateurs (compatibilité).
La propriété font-variant-position présente encore des problèmes de compatibilité sur de nombreux navigateurs.
font-variant-position permettant la mise en indice ou en exposant d'un texte.font-variant-positionNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété font-variant-position.
-
Module CSS - Polices de caractères - Niveau 3
Le niveau 3 de cette spécification introduit pour la première fois la propriétéfont-variant-position.
21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.
14 Août 2018Proposé à la recommandation.
20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Pas de changement concernant la propriétéfont-variant-position.11 Juillet 2017Document de travail. -
Module CSS - Polices de caractères - Niveau 5
29 Juin 2021Document de travail.
Voir aussi, au sujet des polices de caractères.
Tout ce qui concerne les polices de caractères est regroupé dans la spécification CSS Fonts Module : la typographie, l'exploitation des possibilités des formats de polices modernes, le téléchargement de polices, etc.
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.