Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

font-variant-position - Propriété CSS

font-variant-position

Résumé des caractéristiques de la propriété font-variant-position

Description rapide
Mise en exposant ou en indice des caractères.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
normal | sub | super
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété font-variant-position passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Description de la propriété font-variant-position.

Encore des problèmes de prise en charge : seul Firefox traite correctement cette propriété (2022). De plus le fonctionnement de 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.

Balises HTML sup et sub
Bonne compatibilité
Change l'interligne. Réduit la taille des caractères.
Propriété vertical-align
Bonne compatibilité.
Change l'interligne.
Ne réduit pas la taille des caractères.
Propriété font-variant-position
Meilleure esthétique.
Pas 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.

Balises sup et sub.

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.

Propriété 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é.

Propriété 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.

Syntaxe de font-variant-positionSchéma syntaxique de la propriété CSS font-variant-position (mise en exposant ou en indice). normal normal sub sub super superfont-variant-position:;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 super est équivalent à font-feature-settings:'sups'.

    Exemple pour font-variant-position:super
    Ceci est une simulation

  • font-variant-position: sub;

    Mise en indice.

    La valeur sub est équivalent à font-feature-settings:'subs'.

    Exemple pour font-variant-position:sub
    Ceci est une simulation

  • font-variant-position: initial; font-variant-position: inherit; font-variant-position: revert; font-variant-position: revert-layer; font-variant-position: unset;

    La valeur initiale est : normal.

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.

On hésite parfois entre l'exposant et l'indice

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.

font-variant-position :
Formule chimique du sucre : C12H220

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.

1
font-variant-position
Estimation de la prise en charge en pourcentage du parc actuel.
21%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

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.

Propriétés.

Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
Détermine le comportement du navigateur face aux polices de caractères longues à charger.
Permet d'appliquer quelques effets au texte : relief, bordure...
Définit le nom de la police de caractères.
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Ajustement du crénage entre caractères.
Définit le langage à prendre en compte lors du choix des caractères.
Optimise la forme des caractères en fonction de leur taille.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
Ajuste la taille des caractères.
Définition du coefficient d'aspect de la police.
Modifie l'étirement ou la compression des caractères.
Sélectionne les styles italique ou oblique de la police de caractères.
Autorise ou non le calcul des styles manquants dans la police de caractères.
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Définit la substitution de caractères (polices OTF, WOFF).
Applique une capitalisation des caractères.
Typographie spécifique aux caractères chinois ou japonais.
Choisit entre une présentation en emoji ou en texte.
Active ou désactive la ligature des caractères.
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
Donne accès aux possibilités stylistiques des polices OTF
Sélectionne une graisse pour les caractères.
Synonmye de font-stretch (largeur/élargissement des caractères).

Directives.

Définit tous les paramètres d'une police de caractères téléchargeable.
Définit les variantes typographiques à utiliser.
Définit une palette de couleurs appliable ensuite à une police de caractères.