Text-indent - Propriété CSS

text-indent

Résumé des caractéristiques de la propriété `text-indent`

Description rapide

Définit le retrait de la première ligne des paragraphe (indentation).

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

each-line | hanging

Pourcentages

calculés par rapport à la dimension du parent dans la direction inline.

Valeur initiale

0

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété text-indent passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Texte

Références (W3C)

🡇

🡅

CSS Text Module Level 4

Statut du document: WD (document de travail)

CSS Text Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma de la syntaxe de `text-indent`.

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

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 :

Le retrait de paragraphe encore appelé "alinéa" par les professionnels de l'imprimerie est surtout courant en langue française, et lorsque le texte est justifié. L'alinéa peut être rentrant ou saillant suivant que la première ligne des paragraphes est décalée vers la gauche ou vers la droite.

Sur les pages web, l'alinéa est plus rarement utilisé, au profit d'un interligne plus important entre chaque paragraphe.

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.
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 (2024). 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.
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 (2024).
text-indent: initial; (0) 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.

Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.

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. 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 (en particulier le pourcentage) et de la prise en compte éventuelle des valeurs héritées.

Dans le cas de text-indent, la couleur est retournée sous la forme rgb(r,g,b), ou rgba(r,g,b,a) si l'opacité n'est pas totale.


	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.

text-indent :

0

20px each-line

20px hanging

L'indentation est la norme dans la composition des textes en langue française mais ce n'est pas le cas dans d'autres langues, comme les langues anglo-saxonnes.

L'indentation concerne la première ligne de chaque paragraphe ou chaque bloc de texte.⮐
Cette ligne, qui suit un retour à la ligne forcé (balise br) n'a pas de retrait, sauf avec la valeur each-line.

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.

Colonne 1

Support par les navigateurs de la propriété text-indent qui définit le retrait de la première ligne des paragraphes.

Colonne 2

Support par les navigateurs de la valeur hanging pour la propriété text-indent (cette valeur indique un retrait inversé des premières lignes de paragraphe).

Colonne 3

Support par les navigateurs de la valeur each-line pour la propriété text-indent.

Remarques :

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

Propriété
text-indent

Valeur
hanging

Valeur
each-line

Estimation de la prise en charge globale.

17%

18%

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

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

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é `text-indent`.

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

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

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

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

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 CSS Text Module, 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 :

⚠

hanging-punctuation

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).

hyphenate-character

Définit le caractère qui sera à utiliser comme marque de césure.

⚠

hyphenate-limit-chars

Définit le nombre minimal de caractères pour autoriser la césure d'un mot.

⚠

hyphenate-limit-last

Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.

⚠

hyphenate-limit-lines

Définit le nombre maximal de lignes successives se terminant une césure

⚠

hyphenate-limit-zone

Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.

hyphens

Définit si les mots peuvent être coupés en fin de ligne. La césure des mots donne une mise en page plus agréable mais peut être gênante dans certains cas.

letter-spacing

Espacement des lettres.

line-break

Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).

⚠

line-padding

Ajoute un espace au début et à la fin des lignes.

overflow-wrap

Gestion des coupures de mots pour les langues CJK et quelques autres.

tab-size

Définit la taille des caractères de tabulation.

text-align