text-indent - Propriété CSS
Résumé des caractéristiques de la propriété text-indent
each-line
| hanging
0
text-indent
passe progressivement d'une valeur à une autre.Description.
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.
Syntaxes pour text-indent
.
length
est une valeur numérique suivie d'une unité de dimension.%
est un pourcentage dont l'évaluation correspond à une dimension.
- 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 CSS 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
; text-indent:inherit
; text-indent:revert
; text-indent:revert-layer
; text-indent:unset
;La valeur initiale est :
.0
Animation de la propriété 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.
Manipulation de la propriété text-indent
par programme.
Écrire la valeur de text-indent
en Javascript.
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';
let el = document.getElementById('id');
el.style.textIndent = '3ex';
Lire la valeur de text-indent
avec Javascript.
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'];
let el = document.getElementById('id');
let value = el.style.textIndent;
Lire la valeur calculée de text-indent
avec Javascript.
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');
Écrire la valeur de text-indent
avec JQuery.
$('#id').css('text-indent', '3ex');
Lire la valeur calculée de text-indent
avec JQuery.
let value = $('#id').css('text-indent');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété et affichent ensuite soit la valeur telle qu'elle as é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.
Simulateur.
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.
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
.
Prise en charge par les navigateurs (compatibilité).
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.
text-indent
.
hanging
dans la syntaxe de cette propriété.
each-line
dans la syntaxe de cette propriété.
text-indent
hanging
each-line
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que text-indent
.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-indent
fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.