Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

text-align - Propriété CSS

text-align

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

Description rapide
Alignement du texte.
Statut
Standard
S'applique à
Éléments contenant du texte.
Type de valeur
Valeur prédéfinie | Texte
Valeurs prédéfinies
start | center | end | justify | left | right | match-parent | justify-all
Pourcentages
Ne s'appliquent pas.
Valeur initiale
start
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété text-align passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Texte
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

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-alljustify 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
La direction et le sens d'écriture de ce texte s'adap­tent à la langue choisie.
right

Syntaxes pour text-align.

  • char est un caractère unique, inscrit entre apostrophes ou guillemets.
Syntaxe de text-alignSchéma syntaxique de la propriété CSS text-align (alignement du texte). 'char' 'char' start start end end left left right right center center justify justify match-parent match-parent justify-all justify-alltext-align:;text-align:;
  • 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, et end à 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çaise
    text-align:start
    يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.
    Langue arabe
    text-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çaise
    text-align:left
    يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.
    Langue arabe
    text-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çaise
    text-align:center
    يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.
    Langue arabe
    text-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çaise
    text-align:justify
    يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.
    Langue arabe
    text-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çaise
    text-align:justify; text-align-last:justify
    يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.
    Langue arabe
    text-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 valeur start l'aligne sur la droite, mais la valeur match-parent le maintient aligné sur la gauche, comme son parent.

    يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.
    Langue arabe
    Parent en langue latine
    text-align:inherit
    يمكن محاذاة النص مع أحد حواف إطار النص. إذا تمت محاذاة النص مع كلا الحافتين، فيُقال إنه مبرر. بشكل عام، لا يتم تبرير السطر الأخير من النص في فقرة ما: يمكن أن يكون محاذياً لليمين أو لليسار أو، في أغلب الأحيان، في المنتصف.
    Langue arabe
    Parent en langue latine
    text-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 :

    1. Si seul un caractère est précisé, sans mention de l'alignement, la valeur par défaut pour ce dernier est right.
    2. 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.
    3. 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
  • 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).

Le vocabulaire traditionnel en imprimerie est légèrement différent : on parle de "fer à gauche" ou de "fer à droite". A l'autre bout des lignes, lorsque le texte n'est pas justifié, on parle de "drapeau à droite" ou de "drapeau à gauche". Lorsque le texte est justifié, la dernière ligne est alignée sur le fer à gauche. On l'appelle la "ligne creuse".

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.


Mode d'écriture :

text-align :

En Europe, le sens d’écriture le plus courant est de gauche à droite, puis de haut en bas quand le texte comporte plusieurs lignes.
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.
HTTTC
400,25480,288
45,354,36
1200,7521440,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.

Colonne 1
Prise en charge par les navigateurs de la syntaxe générale de text-align.
Colonne 2
Prise en charge de la valeur match-parent nouvellement ajoutée à la syntaxe.
Colonne 3
Prise en charge des valeurs logiques start et end, relatives au sens d'écriture en fonction de la langue.
1
text-align
2
match-parent
3
start
end
Estimation de la prise en charge en pourcentage du parc actuel.
95%
91%
95%

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.

Propriétés.

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Définit le caractère qui sera à utiliser comme marque de césure.
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
Définit le nombre maximal de lignes successives se terminant une césure
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
Césure des mots.
Espacement des lettres.
Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
Gestion des coupures de mots.
Taille des caractères de tabulation.
Définit l'alignement des lignes d'un texte.
Alignement de la dernière ligne des paragraphes.
Définit l'espace entre les caractères adjacents (CJK).
Définit le retrait de la première ligne des paragraphe (indentation).
Sélectionne la méthode utilisée pour justifier le texte.
Définit comment gérer les espaces et les espaces multiples dans le texte.
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
Definit l'espacement autour des caractères de ponctuation CJK.
Casse du texte (minuscules, majuscules...).
Définit la gestion des retours à la ligne du texte.
Définit la gestion des espaces multiples et des retours chariot.
Définit comment les espaces successifs doivent être réduits.
Définit si comment le navigateur doit supprimer les espaces réductibles.
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
Substitue certains caractères de séparation de mots par d'autres.
Coupure des mots longs.
Normalise les caractères d'espacement (écritures CJK).
Permet d'ajuster l'espacement des mots.
Coupure des mots.