baseline-shift

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS baseline-shift repositionne la ligne de base dominante d'un élément de texte par rapport à la ligne de base dominante de son élément parent de contenu textuel. L'élément déplacé peut être un indice ou un exposant. Si la propriété est présente, la valeur remplace l'attribut baseline-shift de l'élément.

Note : La propriété baseline-shift ne s'applique qu'aux éléments SVG <textPath> et <tspan> imbriqués dans un <svg>. Elle ne s'applique pas aux autres éléments SVG, HTML ou pseudo-éléments.

Syntaxe

css

/* Valeurs de type <length-percentage> */
baseline-shift: -0.5px;
baseline-shift: 4%;

/* Valeurs avec un mot-clé */
baseline-shift: sub;
baseline-shift: super;

/* Valeurs globales */
baseline-shift: inherit;
baseline-shift: initial;
baseline-shift: revert;
baseline-shift: revert-layer;
baseline-shift: unset;

Valeurs

sub: La ligne de base dominante est déplacée à la position par défaut pour les indices.
super: La ligne de base dominante est déplacée à la position par défaut pour les exposants.
<length-percentage>: Rehausse (si positif) ou abaisse (si négatif) la ligne de base dominante de l'élément de contenu textuel de la longueur ou du pourcentage spécifié, le pourcentage étant relatif à la ligne de base dominante de la propriété line-height de l'élément parent de contenu textuel.

Définition formelle

Valeur initiale	`0`
Applicabilité	boîtes en ligne et éléments de contenu textuel SVG
Héritée	non
Pourcentages	se rapporte à la valeur utilisée de la hauteur de ligne (`line-height`)
Valeur calculée	le mot-clé défini ou une valeur calculée de type <length-percentage>
Type d'animation	par type de valeur calculée

Syntaxe formelle

baseline-shift = 
  <length-percentage>  |
  sub                  |
  super                |
  top                  |
  center               |
  bottom               

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

Utiliser des valeurs avec mot-clé

Cet exemple démontre l'utilisation de base des valeurs de mot-clé sub et super de la propriété baseline-shift, ainsi que la manière dont la propriété CSS baseline-shift prend le pas sur l'attribut SVG baseline-shift.

HTML

Nous définissons un SVG avec deux éléments SVG <text>, chacun contenant un élément <tspan> avec l'attribut SVG baseline-shift défini dessus.

<p>SVG d'origine</p>

html

<svg viewBox="0 0 560 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    un tuyau en exposant !
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    un tuyau en indice !
  </text>
</svg>

<p><code>baseline-shift: sub;</code></p>
<svg viewBox="0 0 560 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    un tuyau en exposant !
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    un tuyau en indice !
  </text>
</svg>
<p><code>baseline-shift: super;</code></p>
<svg viewBox="0 0 560 120" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50">
    Ceci
    <tspan baseline-shift="super">n'est pas</tspan>
    un tuyau en exposant !
  </text>
  <text x="10" y="90">
    Ceci
    <tspan baseline-shift="sub">n'est pas</tspan>
    un tuyau en indice !
  </text>
</svg>

Le SVG est répété trois fois ; nous n'avons montré qu'une seule copie pour des raisons de concision.

CSS

Nous rendons le texte de toutes les trois images SVG grand et cursif, en ajoutant un peu de couleur pour différencier le contenu des éléments <tspan>.

Nous définissons la valeur de la propriété baseline-shift sur sub pour l'élément <tspan> du deuxième SVG et sur super pour l'élément <tspan> du troisième SVG. Le premier SVG n'a pas de CSS supplémentaire appliqué.

css

text {
  font-family: cursive;
  font-size: 2rem;
}
[baseline-shift="sub"] {
  fill: deeppink;
}
[baseline-shift="super"] {
  fill: rebeccapurple;
}

svg:nth-of-type(2) tspan {
  baseline-shift: sub;
}
svg:nth-of-type(3) tspan {
  baseline-shift: super;
}

svg {
  border: 1px solid;
  width: 15em;
  margin-bottom: 10px;
}
@supports not (baseline-shift: sub) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la propriété `baseline-shift`.";
    background-color: wheat;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5em;
  }
}

Résultats

Les valeurs de l'attribut SVG baseline-shift sont utilisées dans le premier SVG. Dans les deuxième et troisième SVG, les valeurs CSS de baseline-shift remplacent les valeurs de l'attribut.

Spécifications

Spécification
CSS Inline Layout Module Level 3 # baseline-shift-property
Scalable Vector Graphics (SVG) 2 # BaselineShiftProperty

Compatibilité des navigateurs

Voir aussi

L'attribut SVG baseline-shift
Propriétés de présentation : baseline-shift, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor et vector-effect

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 18 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu