Text-indent - Propriété CSS

Schéma de la syntaxe de text-indent.

Description des termes utilisés sur le schéma :

• length est une valeur numérique suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport à la largeur de l'élément.

Description de la propriété text-indent.

La propriété text-indent définit le retrait de la première ligne de texte de l'élément. Le retrait peut être une valeur positive ou négative. Dans ce dernier cas la première ligne empiétera sur la marge gauche.
Voici un exemple de texte mis en page avec des retraits de paragraphes :

Les retours à la ligne forcés par une balise br ne génèrent pas de retrait sur la ligne qui suit.

Le retrait se fait sur le côté start des lignes, c'est à dire sur la gauche pour les langues latines, et plus généralement toutes les langues qui s'écrivent de gauche à droite (propriété direction fixée à ltr). sauf si la propriété direction est fixée à rtl Le retrait sera à droite pour les langues qui s'écrivent de droite à gauche (langues arabes par exemple).

text-indent et le mode d'écriture en fonction de la langue.

text-indent s'applique toujours du côté start. Pour les langues latines, ce sera donc à gauche ; pour les langues arabes, l'indentation se fait sur la droite.

Valeurs pour text-indent.

• text-indent: 15px;

  Le retrait de première ligne est fixé à la valeur indiquée. Celle-ci peut être positive ou négative, et doit être suivie d'une unité de dimension (voir les unités de dimension).

  Si la valeur est exprimée en pourcentages, ceux-ci seront calculés par rapport à la largeur de l'élément.

  Remarque : les retours à la ligne forcés (balises br ) ne provoquent pas de retrait.

  L'indentation a pour objectif d'indiquer visuellement le début des paragraphes. Voici est un paragraphe dont la première ligne est indentée.⮐
  Cette ligne, qui suit un retour forcé n'est, quant à elle, pas indentée.
  text-indent:15px;
• text-indent: 15px hanging; ⚠

  Le retrait s'applique à toutes les lignes sauf la première de chaque paragraphe.

  La valeur hanging est encore mal reconnue par les navigateurs (2026). On peut obtenir un effet comparable en fixant une marge intérieure gauche (padding-left) à une certaine valeur, et le retrait de la première ligne à la même valeur en négatif.

  L'indentation en "hanging" laisse la première ligne inchangée, et applique une indentation à toutes les autres lignes.⮐
  Malheureusement, pour l'instant, peu de navigateurs sont capable de restituer le hanging.
  text-indent:15px hanging;
• text-indent: 15px each-line; ⚠

  Avec cette valeur, le retrait s'applique aussi bien à la première ligne des paragraphes, qu'à toutes les lignes qui suivent un retour à la ligne forcé par une balise br.

  La valeur each-line est encore peu reconnue par les navigateurs (2026).

  La valeur each-line applique une indentation aux premières lignes des paragraphes et également aux lignes qui suivent un retour forcé.⮐
  Cette valeur n'est pas prise en charge par de nombreux navigateurs.
  text-indent:15px each-line;
• text-indent: initial; (0px) text-indent: inherit; text-indent: revert; text-indent: revertLayer; text-indent: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de text-indent.

dans l'exemple ci-dessous la propriété text-indent est animée entre 0 et 80% de la largeur du paragraphe. En principe le retrait n'atteint jamais des valeurs aussi importantes.

Accéder à la propriété text-indent par programme.

Avec Javascript, modifier la valeur de text-indent.

En Javascript, voici comment modifier la valeur de text-indent. Deux syntaxes sont possibles : la première avec le nom de la propriété écrit en kebab-case (un tiret pour séparer les mots), la deuxième avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['text-indent'] = '3ex'; // ou let el = document.getElementById('id'); el.style.textIndent = '3ex';

Avec Javascript, lire la valeur de text-indent.

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. La valeur est renvoyée telle qu'elle a été définie, dans la même unité.

let el = document.getElementById('id'); let value = el.style['text-indent']; // ou let el = document.getElementById('id'); let value = el.style.textIndent;

Avec Javascript, lire la valeur calculée de text-indent.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives et de la prise en compte des valeurs héritées éventuelles.

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

Avec JQuery, modifier la valeur de text-indent.


$('#id').css('text-indent', '3ex');
// ou
$('#id').css('textIndent', '3ex');


Avec JQuery, lire la valeur calculée de text-indent.

let value = $('#id').css('text-indent');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété text-indent 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 sérialisée (mémorisée) la valeur de text-indent. La plupart des unités sont sérialisées en pixels.

Exemple interactif avec la propriété text-indent.

Le simulateur vous permet de tester l'effet des retraits sur les premières lignes des blocs (propriété text-indent), mais aussi après les retours à la ligne forcés : présence d'une balise br dans le deuxième paragraphe.

Compatibilité des navigateurs avec text-indent.

La propriété text-indent en elle-même est très ancienne : elle est bien reconnue par tous les navigateurs. Mais les nouvelles valeurs ajoutées récemment ( hanging et each-line ) ne sont pas encore prises en charge. C'est ce qui explique que la première colonne ne soit pas toute en vert.

Remarques :

(1) Support partiel. Ne reconnait pas les mots hanging et each-line.

1

Propriété
text-indent

2

Valeur
hanging

3

Valeur
each-line

Estimation de la prise en charge globale.

17%

18%

18%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

Baidu Browser

1

Opéra

1

Chrome

1

Safari

Firefox

Safari sur IOS

Edge

1

Chrome pour Androïd

1

Samsung Internet

1

Androïd Brower

1

Firefox pour Androïd

KaiOS Browser

1

Opéra mini

1

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété text-indent.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant text-indent. Définition initiale de la propriété text-indent dans la version 1 du langage CSS.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant text-indent. La valeur inherit est acceptée.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Texte - Niveau 3

  Ce module de spécification niveau 3 définit les contrôles typographiques de CSS, c'est à dire les règles de transformation d'un texte source en texte formaté, avec retours à la ligne. De nombreuses propriétés contrôlent l'alignement et la justification des textes, les règles de césure, l'espacements des caractères ou des mots, le regroupement des espaces successifs, etc.
  Ces règles sont souvent dépendantes du langage, il est donc conseillé aux auteurs de spécifier la langue dans lequel le texte est écrit (attribut lang pour le HTML). Il peut même être nécessaire de préciser le système d'écriture utilisé en particulier pour les langues coréenne, japonaise, mongolienne, etc. A défaut la mise en forme typographique sera moins fine.

  Concernant text-indent. Ajout des options hanging et each-line.
  

  27 Janvier 1999

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  

• Module CSS - Texte - Niveau 4

  Ce niveau 4 de ce module de spécification décrit les propriétés qui agissent sur les règles typographiques : alignement et justification du texte, espacement des mots ou des caractères, règles de césure, etc.
  Par rapport au niveau 3, plusieurs nouvelles propriétés ont été ajoutées, en particulier concernant les ruptures en fin de lignes, les césures, les espacements avant et/ou après le texte, etc.

  Concernant text-indent. Pas de changement concernant la propriété text-indent.
  

  22 Septembre 2015

  Document de travail.

  

  

  

A propos de la gestion des textes, voir aussi.

La propriété text-indent est décrite dans la spécification Module CSS - Texte, de même que tout ce qui concerne la gestion des textes (alignement, espacements, césure, débordement, etc...). Les propriétés suivantes figurent également dans ce module de spécification :

Propriétés :