Baseline-source - Propriété CSS

Schéma de la syntaxe de baseline-source.

Description de la propriété baseline-source.

La propriété baseline-source définit si un élément inline susceptible de comporter plusieurs lignes doit être aligné suivant sa première ligne ou suivant sa dernière ligne. Cela concerne donc les éléments affichés en inline-block, inline-flex, inline-grid.

baseline-source est une propriété d'autant plus importante que les éléments inline ne s'alignent pas tous de la même façon par défaut. Par exemple, les éléments inline-block s'alignent sur leur dernière ligne par défaut, tandis que les éléments inline-flex s'alignent sur leur première ligne.

Valeurs pour baseline-source.

• baseline-source: auto;

  Les éléments s'alignent conformément à leur fonctionnement par défaut, suivant leur type :

  • inline-block : alignement sur leur dernière ligne.
  • inline-flex : alignement sur leur première ligne.
  • inline-grid : alignement sur leur première ligne.
  Élément inline-block
  avec 2 lignes de texte.

  Élément inline-block
  avec 3 lignes
  de texte.

  
  

  Élément inline-flex
  avec 2 lignes de texte.

  Élément inline-flex
  avec 3 lignes
  de texte.

  
  

  Élément inline-grid
  avec 2 lignes de texte.

  Élément inline-grid
  avec 3 lignes
  de texte.
• baseline-source: first;

  L'élément s'aligne sur sa première ligne quelque soit son mode d'affichage.

  Élément inline-block
  avec 2 lignes de texte.

  Élément inline-block
  avec 3 lignes
  de texte.

  
  

  Élément inline-flex
  avec 2 lignes de texte.

  Élément inline-flex
  avec 3 lignes
  de texte.

  
  

  Élément inline-grid
  avec 2 lignes de texte.

  Élément inline-grid
  avec 3 lignes
  de texte.
• baseline-source: last;

  L'élément s'aligne sur sa dernière ligne quelque soit son mode d'affichage.

  Élément inline-block
  avec 2 lignes de texte.

  Élément inline-block
  avec 3 lignes
  de texte.

  
  

  Élément inline-flex
  avec 2 lignes de texte.

  Élément inline-flex
  avec 3 lignes
  de texte.

  
  

  Élément inline-grid
  avec 2 lignes de texte.

  Élément inline-grid
  avec 3 lignes
  de texte.
• baseline-source: initial; (auto) baseline-source: inherit; baseline-source: revert; baseline-source: revertLayer; baseline-source: unset;

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

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

Avec Javascript, modifier la valeur de baseline-source.

En Javascript, voici comment changer la valeur de baseline-source. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule au début des mots).

let el = document.getElementById('id'); el.style['baseline-source'] = 'first'; // ou let el = document.getElementById('id'); el.style.baselineSource = 'first';

Avec Javascript, lire la valeur de baseline-source.

Ce code retrouve la valeur de baseline-source lorsque la propriété a été affectée directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur. Deux syntaxes également.

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

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

La valeur calculée est celle qui résulte soit de la cascade des héritages, soit ce sera la valeur initiale, c'est à dire auto dans le cas de baseline-source.

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

Avec JQuery, modifier la valeur de baseline-source.


$('#id').css('baseline-source', 'first');
// ou
$('#id').css('baselineSource', 'first');


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

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

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété baseline-source et affichent ensuite la valeur telle qu'elle a été appliquée, ou la valeur calculée. Dans le cas de baseline-source ce sera la même chose sauf si vous tapez une valeur incorrecte.

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

Compatibilité des navigateurs avec baseline-source.

La propriété baseline-source commence à être bien reconnue (2026). Il est possible de l'utiliser mais attention, Safari   n'est pas encore compatible, ni la plupart des navigateurs marginaux.

1

Propriété
baseline-source

Estimation de la prise en charge globale.

76%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Safari

Firefox

Opéra

Safari sur IOS

Chrome

Androïd Brower

Chrome pour Androïd

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

• 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-source. Prenant la suite des faibles possibilités d'alignement vertical de CSS2, la propriété baseline-source est ajoutée.
  

  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 des éléments par rapport à la ligne, que ce soit dans un objet SVG ou dans un document HTML. La propriété baseline-source est décrite dans ce module, ainsi que les suivantes :

Propriétés :