`Baseline-shift` - Propriété CSS

baseline-shift

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

Description rapide

Fixe le décalage, vers le haut ou vers le bas, de la ligne de base des textes.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

SVG

Valeurs prédéfinies

sub | super | top | center | bottom

Pourcentages

Calculés 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.

Ordre canonique

Single : valeur unique (l'ordre n'intervient pas).

Module W3C

Module CSS - Mise en page en ligne

Références (W3C)

CSS Inline Layout Module Level 3

Statut du document: WD (document de travail)

Schéma de la syntaxe de `baseline-shift`.

Schéma syntaxique de la propriété baseline-shift.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.

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`.

⚠

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.

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.

SVG

Accéder à la propriété `baseline-shift` par programme.

Avec Javascript, modifier la valeur de `baseline-shift`.

En Javascript, voici comment ajuster le décalage vertical par rapport à la ligne de référence. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec la notation en camel-case.


	let el = document.getElementById('id');
	el.style['baseline-shift'] = 'sub';
	// ou
	let el = document.getElementById('id');
	el.style.baselineShift = 'sub';

Avec Javascript, lire la valeur de `baseline-shift`.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['baseline-shift'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.baselineShift;

Avec Javascript, lire la valeur calculée de `baseline-shift`.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages : en priorité la valeur affectée à l'élément lui-même, puis la valeur héritée, s'il y en a une. A défaut, c'est la valeur initiale qui est prise en compte (0 dans le cas de baseline-shift. Dans tous les cas, la valeur calculée est définie.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('baseline-shift');

Avec JQuery, modifier la valeur de `baseline-shift`.

JQuery propose lui aussi deux syntaxes pour modifier la propriété baseline-shift. Ces syntaxes sont plus compactes que celles de Javascript.


 $('#id').css('baseline-shift', 'sub');
 // ou
 $('#id').css('baselineShift', 'sub');

Avec JQuery, lire la valeur calculée de `baseline-shift`.


	let value = $('#id').css('baseline-shift');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété baseline-shift et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de baseline-shift. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages. Toutes les autres unités sont converties en pixels. Les valeurs prédéfinies (sub par exemple) sont inchangées.

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

HTML

Le benzène : C6H6
Volume du cube = a3

SVG

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.

Colonne 1

Support par les navigateurs de la propriété baseline-shift pour l'alignement vertical des textes.

Colonne 2

Support de la propriété vertical-align pour aligner les blocs inline qui se suivent et pour aligner verticalement dans une cellule de tableau.

Propriété
baseline-shift

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

Histoire de la propriété `baseline-shift`.

Module CSS - Mise en page en ligne - Niveau 3

Ce module traite de tout ce qui concerne l'alignement des blocs de texte, aussi bien dans un conteneur du type grille, que pour les blocs inline (contenu dans un flex-box ou un inline-block). Les propriétés d'alignement vertical en particulier ont été bien enrichies.

Concernant baseline-shift. 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 Module CSS - Mise en page en ligne 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 :