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-indent/index.md | 155 +++++++++++++++------------------- 1 file changed, 68 insertions(+), 87 deletions(-) (limited to 'files/fr/web/css/text-indent') diff --git a/files/fr/web/css/text-indent/index.md b/files/fr/web/css/text-indent/index.md index e2db574dea..b2fe9de526 100644 --- a/files/fr/web/css/text-indent/index.md +++ b/files/fr/web/css/text-indent/index.md @@ -7,25 +7,26 @@ tags: - Reference translation_of: Web/CSS/text-indent --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété text-indent définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.

+La propriété **`text-indent`** définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte. -

L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés hanging et each-line peuvent être utilisés pour modifier ce comportement.

+L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés `hanging` et `each-line` peuvent être utilisés pour modifier ce comportement. -
{{EmbedInteractiveExample("pages/css/text-indent.html")}}
+{{EmbedInteractiveExample("pages/css/text-indent.html")}} -

Syntaxe

+## Syntaxe -
/* Valeurs de longueur */
-/* Type <length>       */
+```css
+/* Valeurs de longueur */
+/* Type        */
 text-indent: 3mm;
 text-indent: 40px;
 
 /* Valeurs de pourcentages */
 /* relatives à la largeur  */
 /* du bloc englobant       */
-/* Type <percentage>       */
+/* Type        */
 text-indent: 15%;
 
 /* Valeurs avec un mot-clé */
@@ -37,104 +38,84 @@ text-indent: 5em hanging each-line;
 text-indent: inherit;
 text-indent: initial;
 text-indent: unset;
-
+``` -

Valeurs

+### Valeurs -
-
<length>
-
L'indentation est définie de façon absolue avec une longueur ({{cssxref("<length>")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("<length>")}} pour les différentes unités possibles.
-
<percentage>
-
L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("<percentage>")}}).
-
each-line {{experimental_inline}}
-
L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (wrap).
-
hanging {{experimental_inline}}
-
Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
-
+- `` + - : L'indentation est définie de façon absolue avec une longueur ({{cssxref("<length>")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("<length>")}} pour les différentes unités possibles. +- `` + - : L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("<percentage>")}}). +- `each-line` {{experimental_inline}} + - : L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (_wrap_). +- `hanging` {{experimental_inline}} + - : Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Indentation simple

+### Indentation simple -

HTML

+#### HTML -
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
+```html +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   text-indent: 5em;
   background: powderblue;
-}
+} +``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Indentation_simple','100%','100%') }}

+{{EmbedLiveSample('Indentation_simple','100%','100%') }} -

Indentation proportionnelle

+### Indentation proportionnelle -

HTML

+#### HTML -
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+```html +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy +nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   text-indent: 30%;
   background: plum;
-}
- -

Résultat

- -

{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}{{Spec2('CSS3 Text')}}Ajout des mots-clés hanging et each-line.
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent peut être animée.
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

+} +``` + +#### Résultat + +{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}} | {{Spec2('CSS3 Text')}} | Ajout des mots-clés `hanging` et `each-line`. | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}} | {{Spec2('CSS3 Transitions')}} | `text-indent` peut être animée. | +| {{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}} | {{Spec2('CSS2.1')}} | The behavior with `display: inline-block` and anonymous block boxes have been explicitly defined. | +| {{SpecName('CSS1', '#text-indent', 'text-indent')}} | {{Spec2('CSS1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.text-indent")}} -- cgit v1.2.3-54-g00ecf