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 :

baseline-shift - Propriété CSS

baseline-shift

Résumé des caractéristiques de la propriété baseline-shift

Statut
Problèmes de compatibilité
Type de valeur
Dimension | Pourcentage | Valeur prédéfinie
Valeurs prédéfinies
sub | super | top | center | bottom
Pourcentages
Calculée par rapport à la hauteur de ligne.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété baseline-shift passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page en ligne
Références (W3C)
Statut du document:: WD (document de travail)

Description de la propriété baseline-shift.

Cette propriété fonctionne mieux sur les éléments SVG. Pour la mise en forme du texte en HTML, le W3C recommande d'utiliser plutôt vertical-align.

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.

Syntaxes pour baseline-shift.

v est une valeur de décalage par rapport à la ligne de base du texte.

baseline-shift:
 sub sub super super top top center center bottom bottom v v
;

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 standard sub
  • 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 standard super
  • baseline-shift: top;

    SVG standard top
  • baseline-shift: center;

    SVG standard center
  • baseline-shift: bottom;

    SVG standard bottom
  • 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 CSS 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 standard 8px
  • baseline-shift: initial; baseline-shift: inherit; baseline-shift: revert; baseline-shift: revert-layer; baseline-shift: unset;

    La valeur initiale est : 0.

Simulateur sur HTML et SVG.

baseline-shift :
HTML
Le benzène : C6H6
Volume du cube = a3
SVG
Le benzène : C6H6 Volume du cube : a3

Prise en charge par les navigateurs (compatibilité).

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
baseline-shift
2
vertical-align
Estimation de la prise en charge en pourcentage du parc actuel.
93%
96%

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 baseline-shift.

Les spécifications CSS éditées par le W3C sont organisées en modules. baseline-shift fait partie du Module CSS - Mise en page en ligne (CSS Inline Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit comment un élément est aligné, dans le sens vertical, par rapport à son parent.
Définit la ligne de base utilisée pour les alignements verticaux de textes.
Définit la hauteur des lignes de texte.
Spécifie une réduction de la hauteur d'une boîte de texte.
Alignement vertical.