Baseline-shift - Propriété CSS

Schéma de la syntaxe de baseline-shift.

Description des termes utilisés sur le schéma :

• length est une valeur numérique positive ou négative, suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport à la hauteur de ligne.

Description de la propriété baseline-shift.

La propriété baseline-shift définit un décalage du texte dans le sens vertical, par rapport à une ligne de référence. Cette dernière est par défaut baseline mais peut être changée par la propriété alignment-baseline.

Consultez également la page sur la propriété résumée vertical-align qui fonctionne mieux sur un document HTML.

Valeurs pour baseline-shift.

Tous les exemples qui suivent sont réalisés en SVG. En effet, les navigateurs traitent mieux cette propriété sur les éléments SVG (2024).

• baseline-shift: sub;

  Le texte de l'élément est décalé vers le bas : mis en indice.
  Cependant la taille des caractères n'est pas changée comme cela se fait habituellement pour les indices.

  SVG
• baseline-shift: super;

  Le texte de l'élément est décalé vers le haut (mis en exposant).
  La taille des caractères reste inchangée

  SVG
• baseline-shift: top; ⚠
  SVG
• baseline-shift: center; ⚠
  SVG
• baseline-shift: bottom; ⚠
  SVG
• baseline-shift: 8px;

  Avec cette syntaxe, le décalage du texte est spécifié par une valeur suivie d'une unité de dimension ou un pourcentage (voir les unités de dimension).
  Si la valeur est positive, le texte sera décalé vers le haut. Une valeur négative décale le texte vers le bas.

  SVG
• baseline-shift: initial; (0) baseline-shift: inherit; baseline-shift: revert; baseline-shift: revertLayer; baseline-shift: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de baseline-shift.

L'animation de baseline-shift peut se faire soit de façon continue, soit de façon discrète (passage brutal d'une valeur à une autre). Cela dépend de comment est définie l'animation : avec des valeurs numériques, ou avec les mots prédéfinis.

Exemple interactif avec la propriété baseline-shift.

Compatibilité des navigateurs avec baseline-shift.

La propriété baseline-shift est normalement destinée aux fichiers SVG. Pour les documents HTML le W3C conseille l'utilisation de vertical-align à la place.

1

Propriété
baseline-shift

2

Propriété
vertical-align

Estimation de la prise en charge globale.

93%

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété baseline-shift.

• Module CSS - Mise en page en ligne - Niveau 3

  Prenant la suite de la pauvre propriété vertical-align de CSS2, ce module de spécification précise et enrichit les possibilités d'alignement par rapport à la ligne de base.
  Introduction de la propriété baseline-shift.
  

  18 Décembre 2014

  Document de travail.

  

  

  

Voir aussi, concernant les dispositions en ligne.

Le module de spécification dénommé "Module CSS - Mise en page en ligne", ou CSS Inline Layout Module en anglais, définit ce qui est relatif à la disposition en ligne des éléments, que ce soit dans un objet SVG ou dans un document HTML. La propriété baseline-shift est décrite dans ce module, ainsi que les suivantes :

Propriétés :