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.
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 prorpriété font-variant-position présente encore des problèmes de compatibilité sur de nombreux navigateurs.
font-variant-positionNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que font-variant-position.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-variant-position fait partie du module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.