From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/text-align/index.md | 243 ++++++++++++++++------------------- 1 file changed, 111 insertions(+), 132 deletions(-) (limited to 'files/fr/web/css/text-align') diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md index 77b812babb..78cabf13aa 100644 --- a/files/fr/web/css/text-align/index.md +++ b/files/fr/web/css/text-align/index.md @@ -7,15 +7,14 @@ tags: - Reference translation_of: Web/CSS/text-align --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété text-align définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.

+La propriété **`text-align`** définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal. -
{{EmbedInteractiveExample("pages/css/text-align.html")}}
Syntaxe - -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 text-align: left;
 text-align: right;
 text-align: center;
@@ -38,186 +37,166 @@ text-align: -webkit-center;
 text-align: inherit;
 text-align: initial;
 text-align: unset;
-
- -

La propriété text-align peut être définie grâce à l'un des mots-clés de la liste qui suit.

- -

Valeurs

- -
-
start {{experimental_inline}}
-
Cette valeur a le même effet que la valeur left si la direction du texte va de gauche à droite ou le même effet que right si la direction du texte va de droite à gauche.
-
end {{experimental_inline}}
-
Cette valeur a le même effet que la valeur right si la direction du texte va de gauche à droite ou le même effet que left si la direction du texte va de droite à gauche.
-
left
-
Les contenus en ligne (inline) sont alignés sur le bord gauche de la boîte contenant la ligne.
-
right
-
Les contenus en ligne (inline) sont alignés sur le bord droit de la boîte contenant la ligne.
-
center
-
Les contenus en ligne (inline) sont horizontalement centrés par rapport à la boîte contenant la ligne.
-
justify
-
Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
-
justify-all{{experimental_inline}}
-
Comportement analogue à justify mais avec la dernière ligne nécessairement justifiée.
-
match-parent {{experimental_inline}}
-
Semblable à inherit mais les valeurs start et end sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par left ou right selon ce qui est adéquat.
-
{{cssxref("<string>")}} {{experimental_inline}}
-
Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.
-
- -

Syntaxe formelle

+``` + +La propriété `text-align` peut être définie grâce à l'un des mots-clés de la liste qui suit. + +### Valeurs + +- `start` {{experimental_inline}} + - : Cette valeur a le même effet que la valeur `left` si la direction du texte va de gauche à droite ou le même effet que `right` si la direction du texte va de droite à gauche. +- `end` {{experimental_inline}} + - : Cette valeur a le même effet que la valeur `right` si la direction du texte va de gauche à droite ou le même effet que `left` si la direction du texte va de droite à gauche. +- `left` + - : Les contenus en ligne (_inline_) sont alignés sur le bord gauche de la boîte contenant la ligne. +- `right` + - : Les contenus en ligne (_inline_) sont alignés sur le bord droit de la boîte contenant la ligne. +- `center` + - : Les contenus en ligne (_inline_) sont horizontalement centrés par rapport à la boîte contenant la ligne. +- `justify` + - : Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe. +- `justify-all`{{experimental_inline}} + - : Comportement analogue à `justify` mais avec la dernière ligne nécessairement justifiée. +- `match-parent` {{experimental_inline}} + - : Semblable à `inherit` mais les valeurs `start` et `end` sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par `left` ou `right` selon ce qui est adéquat. +- {{cssxref("<string>")}} {{experimental_inline}} + - : Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule. + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Alignement à gauche

+### Alignement à gauche -

HTML

+#### HTML -
<p class="exemple">
+```html
+

   Il y avait en Vestphalie, dans le château de M. le baron de
   Thunder-ten-tronckh, un jeune garçon à qui la nature avait
   donné les moeurs les plus douces. Sa physionomie annonçait
   son âme. Il avait le jugement assez droit, avec l’esprit le plus
   simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
-</p>
+

+``` -

CSS

+#### CSS -
.exemple {
+```css
+.exemple {
   text-align: left;
   border: solid;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}

+{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}} -

Texte centré

+### Texte centré -

HTML

+#### HTML -
<p class="exemple">
+```html
+

   Il y avait en Vestphalie, dans le château de M. le baron de
   Thunder-ten-tronckh, un jeune garçon à qui la nature avait
   donné les moeurs les plus douces. Sa physionomie annonçait
   son âme. Il avait le jugement assez droit, avec l’esprit le plus
   simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
-</p>
+

+``` -

CSS

+#### CSS -
.exemple {
+```css
+.exemple {
   text-align: center;
   border: solid;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Texte_centré","100%","100%")}}

+{{EmbedLiveSample("Texte_centré","100%","100%")}} -

Justification

+### Justification -

HTML

+#### HTML -
<p class="exemple">
+```html
+

   Il y avait en Vestphalie, dans le château de M. le baron de
   Thunder-ten-tronckh, un jeune garçon à qui la nature avait
   donné les moeurs les plus douces. Sa physionomie annonçait
   son âme. Il avait le jugement assez droit, avec l’esprit le plus
   simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
-</p>
+

+``` -

CSS

+#### CSS -
.exemple {
+```css
+.exemple {
   text-align: justify;
   border: solid;
-}
+} +``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Justification","100%","100%")}}

+{{EmbedLiveSample("Justification","100%","100%")}} -

Notes

+### Notes -

La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs left et right à auto, e.g. :

+La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs `left` et `right` à `auto`, e.g. : -
.classe {
+```css
+.classe {
   margin: auto;
 }
-
+``` -
.classe {
+```css
+.classe {
   margin: 0 auto;
 }
-
+``` -
.classe {
+```css
+.classe {
   margin-left: auto;
   margin-right: auto;
 }
-
- -

Accessibilité

- -

L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}Aucun changement
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}Ajout de la gestion des valeurs <string>.
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}Ajout des valeurs start, end et match-parent. La valeur initiale qui n'était pas nommée est bien définie avec start.
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}Aucun changement
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.text-align")}}

- -

Voir aussi

- - +``` + +## Accessibilité + +L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs. + +- [Comprendre les règles WCAG 1.4](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [_Understanding Success Criterion 1.4.8  | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS Logical Properties', '#text-align', 'text-align')}} | {{Spec2('CSS Logical Properties')}} | Aucun changement | +| {{SpecName('CSS4 Text', '#alignment', 'text-align')}} | {{Spec2('CSS4 Text')}} | Ajout de la gestion des valeurs ``. | +| {{SpecName('CSS3 Text', '#text-align-property', 'text-align')}} | {{Spec2('CSS3 Text')}} | Ajout des valeurs `start`, `end` et `match-parent`. La valeur initiale qui n'était pas nommée est bien définie avec `start`. | +| {{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}} | {{Spec2('CSS2.1')}} | Aucun changement | +| {{SpecName('CSS1', '#text-align', 'text-align')}} | {{Spec2('CSS1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.text-align")}} + +## Voir aussi + +- {{cssxref("margin","margin:auto")}} +- {{cssxref("margin-left","margin-left:auto")}} +- {{cssxref("vertical-align")}} -- cgit v1.2.3-54-g00ecf