text-align - Propriété CSS
Résumé des caractéristiques de la propriété text-align
start
| center
| end
| justify
| left
| right
| match-parent
| justify-all
start
text-align
passe d'une valeur à l'autre sans transition.Description de la propriété text-align
.
La propriété text-align
définit l'alignement du texte dans l'espace qui lui est réservé : les lignes sont elles calées à gauche,
à droite, ou bien le texte est-il justifié ?
Plus précisément, text-align
est une propriété raccourcie qui permet de définir en une seule écriture les deux propriétés
suivantes :
text-align-all
: alignement de toutes les lignes du ou des paragraphes, sauf la dernière si celle-ci est définie spécifiquement par la propriété suivante.text-align-last
: alignement de la dernière ligne du ou des paragraphes. Si cette propriété n'est pas spécifiée, la dernière ligne est alignée comme le reste du paragraphe. Une exception cependant : si le paragraphe est justifié, la dernière ligne(1) sera alignée du côtéstart
(à gauche pour les langues latines).
(1) On désigne par "dernière ligne" bien sûr celle qui termine le texte de l'élément, mais aussi celles qui précèdent les retours à la ligne éventuels (balises br/).
Voici, en résumé ce que fait la propriété text-align
sur l'ensemble des lignes de texte de l'élément.
On voit, en examinant ce tableau, que la propriété text-align-all
n'est vraiment pas nécessaire, et que la propriété
text-align-last
ne sera utilisée que dans un cas très particulier : cette présentation que l'on voit dans certains livres
(et sur ce paragraphe), qui consiste à justifier le texte, sauf les dernières lignes des paragraphes qui sont centrées.
text-align | Toutes les lignes | Dernière ligne |
---|---|---|
left | left | left |
right | right | right |
center | center | center |
start | start | start |
end | end | end |
justify | justify | start |
justify-all | justify | justify |
Dans le cas d'un texte justifié, la justification peut être finement ajustée avec la propriété text-justify
.
Prise en charge de la langue (sens d'écriture).
Les langues non latines ne s'écrivent pas toutes de gauche à droite et du haut vers le bas.
Pour prendre en compte ces particularités, il est conseillé d'utiliser les valeurs logiques (start
, end
)
plutôt que les valeurs physiques (left
, right
).
left
right
Syntaxes pour text-align
.
char
est un caractère unique, inscrit entre apostrophes ou guillemets.
- text-align: start; text-align: end;
Le contenu est aligné du côté du début ou de la fin des lignes, compte tenu du sens d'écriture.
start
est donc équivalent àleft
pour les langues latines, tandis que pour les langues arabes,left
est équivalent àright
. D'autres langues s'écrivent verticalement (CJK, hébreu, etc.), dans tous les cas,start
correspond au début des lignes, etend
à la fin des lignes.Voir la propriété
direction
pour ce qui est de la gestion de la direction d'écriture.Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.Langue françaisetext-align:start
يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.Langue arabetext-align:start
- text-align: left; text-align: right;
Le contenu est aligné sur la droite de l'élément. Ces valeurs sont des valeurs physiques, qui ne prennent pas en compte la direction d'écriture en fonction de la langue.
Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.Langue françaisetext-align:left
يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.Langue arabetext-align:left
- text-align: center;
Le texte est centré enter les bords droit et gauche de l'élément.
Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.Langue françaisetext-align:center
يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.Langue arabetext-align:center
- text-align: justify;
Justifie le texte dans l'élément, c'est à dire que toutes les lignes de texte ont la même longueur. La dernière ligne de chaque paragraphe ou les lignes qui sont suivies d'un retour forcé (balise br restent cependant calée du côté
start
sauf indication contraire par la propriété .La méthode utilisée pour justifier le texte est définie par
text-justify
: cela peut se faire soit en espaçant les mots, soit en espaçant les lettres.Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.Langue françaisetext-align:justify
يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.Langue arabetext-align:justify
- text-align: justify-all; ⚠
Le texte est justifié y compris la dernière ligne des paragraphes.
Attention ! La justification de la dernière ligne des paragraphes peut donner un résultat inesthétique, particulièrement s'il y a peu de mots sur la dernière ligne.
⚠ L'exemple ci-dessous est une simulation car peu de navigtateurs traitent encore correctement cette valeur.
Le texte peut être aligné par rapport à un des bords d’un bloc de texte. Si le texte est aligné par rapport aux deux bords, on dit qu'il est justifié. En général, la dernière ligne du texte d’un paragraphe n'est pas justifiée: elle peut être alignée à droite, à gauche, ou centrée.Langue françaisetext-align:justify; text-align-last:justify
يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.Langue arabetext-align:justify-all
- text-align: match-parent; ⚠
Cette valeur est équivalente à
inherit
, sauf si les directions d'écriture de l'élément et du parent sont différentes.Exemple : le texte du parent est aligné sur la valeur
start
et son mode d'écriture est adapté aux langues latines : son texte est donc aligné sur la gauche.
L'élément enfant est quant à lui adapté aux langues arabes. Le simple héritage de la valeurstart
l'aligne sur la droite, mais la valeurmatch-parent
le maintient aligné sur la gauche, comme son parent.يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.Langue arabe
Parent en langue latinetext-align:inherit
يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.Langue arabe
Parent en langue latinetext-align:match-parent
- text-align: ',' right; ⚠
Le texte indiqué entre apostrophes ou guillemets ne doit comporter qu'un seul caractère. Cette syntaxe est utilisable pour aligner le contenu des cellules d'un tableau par rapport au caractère indiqué. On s'en servira surtout pour aligner une colonne de nombres sur le séparateur décimal.
Cas particuliers :
- Si seul un caractère est précisé, sans mention de l'alignement, la valeur par défaut pour ce dernier est
right
. - Si le caractère indiqué n'apparaît pas dans le texte à aligner, l'alignement se fait comme si ce caractère était à la fin.
- Si le caractère d'alignement apparaît plusieurs fois, c'est la première occurrence qui est prise en compte.
245,10 24 1245,10 41,10 244,50 24,710 5,451 240,100 45,10 ⚠ Il et probable que votre navigateur ne traite pas encore cette syntaxe. Le résultat devrait ressembler à la simulation ci-dessous.
245,10
24
1245,10
41,10
244,50
24,710
5,451
240,100
45,10
- Si seul un caractère est précisé, sans mention de l'alignement, la valeur par défaut pour ce dernier est
- text-align:
initial
; text-align:inherit
; text-align:revert
; text-align:revert-layer
; text-align:unset
;La valeur initiale est :
.start
Animation de la propriété text-align
.
L'animation de la propriété text-align
est possible mais ne présente sans doute pas beaucoup d'intérêt visuel.
Les valeurs acceptées par text-align
étant non numériques, il faut les énumérer une par une dans la description de
l'animation (@keyframes
).
Simulateur.
Le texte utilisé pour la démonstration comporte un retour à la ligne forcé (balise br/) après les mots "plusieurs lignes".
La dernière ligne ne comporte pas de possibilité de retour à la ligne. Cela a été fait avec la propriété white-space
fixée
à la valeur no-wrap
, mais cette situation peut se rencontrer également dans le cas d'une ligne courte comportant un mot très long.
Dans ce cas de figure la spécification prévoit que la ligne soit toujours calée du côté start
, quelque soit la valeur affectée
à text-align
.
Le petit tableau présenté plus bas montre l'effet d'un alignement sur un caractère (en français ce sera probablement la virgule), mais cette possibilité est encore mal prise en charge.
Mais d'autres langues (arabe, CJK s’écrivent, de droite à gauche, ou verticalement. L'usage des valeurs logiques
start
et end
est recommandé, afin que l'alignement s'adapte à la direction d'écriture.
Cas particulier d'une ligne sans possibilité de retour à la ligne.
HT | TTC |
---|---|
400,25 | 480,288 |
45,3 | 54,36 |
1200,752 | 1440,9024 |
Prise en charge par les navigateurs (compatibilité).
La propriété text-align
est bien reconnue en elle-même, mais il reste cependant quelques problèmes de compatibilité (2022)
avec les valeurs match-parent
ou justify-all
nouvellement introduites dans la norme.
text-align
.
match-parent
nouvellement ajoutée à la syntaxe.
start
et end
, relatives au sens d'écriture en fonction de la langue.
text-align
match-parent
start
end
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que text-align
.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-align
fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.