`Alignment-baseline` - Propriété CSS

alignment-baseline

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

Description rapide

Définit comment un élément est aligné, dans le sens vertical, par rapport à son parent.

Statut

Standard

S'applique à

Balises text, textPath et tspan.

Utilisable sur

SVG

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

baseline

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété alignment-baseline passe d'une valeur à l'autre sans transition.

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

Schéma syntaxique de la propriété alignment-baseline.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété `alignment-baseline`.

La propriété alignment-baseline définit quelle est la ligne de référence pour l'alignement vertical d'un élément, par rapport à la ligne de référence du parent. Cette propriété ne s'applique que aux élément du type inline

Un écart par rapport à cette ligne de référence peut être défini par baseline-shift.
Consultez également la page sur vertical-align qui est une propriété résumée, et également dominant-baseline.

Valeurs pour `alignment-baseline`.

Tous les exemples qui suivent sont réalisés en SVG. La propriété alignment-baseline est en effet mieux supportée par les navigateurs en SVG.

alignment-baseline: auto;

Cette valeur est équivalente à baseline.

SVG
alignment-baseline: baseline;

La ligne de référence de l'élément est la même que celle du parent.

SVG
alignment-baseline: text-top; alignment-baseline: text-bottom;

Ces deux valeurs, bien que figurant dans la spécification du W3C, sont très mal reconnues par les navigateurs.

Aligne le texte sur une ligne correspondant à text-under et text-over.

SVG
alignment-baseline: middle;

L'alignement se fait sur le milieu des minuscules.

SVG
alignment-baseline: central;

L'alignement se fait sur le milieu des majuscules.

SVG
alignment-baseline: alphabetic;

Utilise la ligne de base des caractères latin, cyrillique, grec, etc. Est équivalent à normal dans la plupart des cas.

SVG
alignment-baseline: ideographic;

Utilise le ligne de base des caractères idéographique.

SVG
alignment-baseline: mathematical;

Utilise la ligne de base autour de laquelle les caractères mathématiques sont conçus.

SVG
alignment-baseline: hanging;

Correspond à une ligne de base suspendue à partir de laquelle les caractères en tibétain et en écritures monocamérales avec un bord supérieur fort, semblent suspendus.

SVG
alignment-baseline: text-before-edge; alignment-baseline: text-after-edge;

SVG
alignment-baseline: initial; (baseline) alignment-baseline: inherit; alignment-baseline: revert; alignment-baseline: revertLayer; alignment-baseline: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

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

Modifier la valeur de `alignment-baseline` en Javascript.

En Javascript, voici comment modifier la valeur de alignment-baseline pour un élément el. La propriété est ajoutée ou modifiée directement sur l'élément lui-même, comme avec l'attribut style du HTML. Deux syntaxes sont possibles, avec le nom de la propriété écrit en kebab-case ou en camel-case.


	let el = document.getElementById('id');
	el.style['alignment-baseline'] = 'middle';
	// ou
	let el = document.getElementById('id');
	el.style.alignmentBaseline = 'middle';

Lire en Javascript la valeur de `alignment-baseline`.

La propriété doit avoir été affectée directement à l'élément lui-même par l'attribut style et non pas en passant par un sélecteur CSS. Ce code est donc le symétrique du précédent.


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

Lire la valeur calculée de `alignment-baseline` en Javascript.

La valeur calculée est celle qui résulte du mécanisme d'héritage en cascade. Ce sera soit la valeur appliquée à l'élément via un sélecteur, soit une valeur héritée, soit encore la valeur initiale de la propriété.


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

Modifier ou relire la valeur de la propriété `alignment-baseline` avec JQuery.

Dans ces deux exemples de code, le nom de la propriété peut être écrit indifféremment en camel-case ou en kebab-case.


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


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

Testez vous-même.

Les boutons ci-dessous appliquent une valeur à la propriété alignment-baseline et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de alignment-baseline ces deux valeurs seront identiques (sauf si votre navigateur ne reconnaît pas la propriété).