From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/text-transform/index.html | 187 ----------------------------- files/fr/web/css/text-transform/index.md | 187 +++++++++++++++++++++++++++++ 2 files changed, 187 insertions(+), 187 deletions(-) delete mode 100644 files/fr/web/css/text-transform/index.html create mode 100644 files/fr/web/css/text-transform/index.md (limited to 'files/fr/web/css/text-transform') diff --git a/files/fr/web/css/text-transform/index.html b/files/fr/web/css/text-transform/index.html deleted file mode 100644 index b7d87fe8e2..0000000000 --- a/files/fr/web/css/text-transform/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: text-transform -slug: Web/CSS/text-transform -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/text-transform ---- -
{{CSSRef}}
- -

La propriété text-transform définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations Ruby.

- -
{{EmbedInteractiveExample("pages/css/text-transform.html")}}
- -

La propriété text-transform gère les différences liées aux langues, par exemple :

- - - -

La langue d'un document HTML est définie par l'attribut XML xml:lang, qui a la priorité sur l'attribut global lang.

- -

Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, voir le tableau de compatibilité des navigateurs.

- -

Syntaxe

- -
/* Avec un mot-clé */
-text-transform: none;
-text-transform: capitalize;
-text-transform: uppercase;
-text-transform: lowercase;
-text-transform: full-width;
-text-transform: full-size-kana;
-
-/* Valeurs globales */
-text-transform: inherit;
-text-transform: initial;
-text-transform: unset;
-
- -

Valeurs

- -
-
capitalize
-
-

En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.

- -

Note : Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.

-
-
uppercase
-
En utilisant ce mot-clé, tous les caractères seront écrits en capitales.
-
lowercase
-
En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.
-
none
-
Ce mot-clé empêche les modifications liées à la casse des caractères.
-
full-width {{experimental_inline}}
-
Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).
-
full-size-kana
-
Cette valeur est généralement utilisée pour les annotations Ruby. Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

HTML

- -
<code>none :</code>
-<p class="sans_effet">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit
-</p>
-
-<code>capitalize :</code>
-<p class="cap">
-  (Voici) “un” –rapide– -test- ⓙkl
-</p>
-
-</code> uppercase :</code>
-<p class="majuscules">
-  Cependant d'Artagnan voulut d'abord se rendre compte de
-  la physionomie de l'impertinent qui se moquait de lui.
-</p>
-
-<code>full-width :</code>
-<p class="mix">
-  ABCDEF</br>
-  最初に彼を嘲
-</p>
-
-<code>full-size-kana :</code>
-<p class="full-size-kana">ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
-<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
-
-
- -

CSS

- -
p.sans_effet {
-  text-transform: none;
-}
-
-p.cap {
-  text-transform: capitalize;
-}
-
-p.majuscules {
-  text-transform: uppercase;
-}
-
-p.mix {
-  text-transform: full-width;
-}
-
-p.full-size-kana {
-  text-transform: full-size-kana;
-}
-
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","100%","500")}}

- -

Accessibilité

- -

De grandes portions de texte utilisant text-transform avec la valeur uppercase peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}Par rapport à {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de capitalize est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Les mots-clés full-width et full-size-kana sont ajoutés afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}Par rapport à {{SpecName('CSS1', '#text-transform', 'text-transform')}}, étend la spécifications aux lettres non latines et aux scripts bicaméraux.
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/text-transform/index.md b/files/fr/web/css/text-transform/index.md new file mode 100644 index 0000000000..b7d87fe8e2 --- /dev/null +++ b/files/fr/web/css/text-transform/index.md @@ -0,0 +1,187 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-transform +--- +
{{CSSRef}}
+ +

La propriété text-transform définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations Ruby.

+ +
{{EmbedInteractiveExample("pages/css/text-transform.html")}}
+ +

La propriété text-transform gère les différences liées aux langues, par exemple :

+ + + +

La langue d'un document HTML est définie par l'attribut XML xml:lang, qui a la priorité sur l'attribut global lang.

+ +

Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, voir le tableau de compatibilité des navigateurs.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+text-transform: none;
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: full-width;
+text-transform: full-size-kana;
+
+/* Valeurs globales */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+
+ +

Valeurs

+ +
+
capitalize
+
+

En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.

+ +

Note : Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.

+
+
uppercase
+
En utilisant ce mot-clé, tous les caractères seront écrits en capitales.
+
lowercase
+
En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.
+
none
+
Ce mot-clé empêche les modifications liées à la casse des caractères.
+
full-width {{experimental_inline}}
+
Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).
+
full-size-kana
+
Cette valeur est généralement utilisée pour les annotations Ruby. Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

HTML

+ +
<code>none :</code>
+<p class="sans_effet">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+</p>
+
+<code>capitalize :</code>
+<p class="cap">
+  (Voici) “un” –rapide– -test- ⓙkl
+</p>
+
+</code> uppercase :</code>
+<p class="majuscules">
+  Cependant d'Artagnan voulut d'abord se rendre compte de
+  la physionomie de l'impertinent qui se moquait de lui.
+</p>
+
+<code>full-width :</code>
+<p class="mix">
+  ABCDEF</br>
+  最初に彼を嘲
+</p>
+
+<code>full-size-kana :</code>
+<p class="full-size-kana">ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+
+
+ +

CSS

+ +
p.sans_effet {
+  text-transform: none;
+}
+
+p.cap {
+  text-transform: capitalize;
+}
+
+p.majuscules {
+  text-transform: uppercase;
+}
+
+p.mix {
+  text-transform: full-width;
+}
+
+p.full-size-kana {
+  text-transform: full-size-kana;
+}
+
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","100%","500")}}

+ +

Accessibilité

+ +

De grandes portions de texte utilisant text-transform avec la valeur uppercase peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}Par rapport à {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de capitalize est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Les mots-clés full-width et full-size-kana sont ajoutés afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}Par rapport à {{SpecName('CSS1', '#text-transform', 'text-transform')}}, étend la spécifications aux lettres non latines et aux scripts bicaméraux.
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf