From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/word-spacing/index.html | 128 +++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/fr/web/css/word-spacing/index.html (limited to 'files/fr/web/css/word-spacing') diff --git a/files/fr/web/css/word-spacing/index.html b/files/fr/web/css/word-spacing/index.html new file mode 100644 index 0000000000..808ec87c68 --- /dev/null +++ b/files/fr/web/css/word-spacing/index.html @@ -0,0 +1,128 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/word-spacing +--- +
{{CSSRef}}
+ +

La propriété word-spacing définit la règle d'espacement utilisée entre les balises et entre les mots.

+ +
{{EmbedInteractiveExample("pages/css/word-spacing.html")}}
+ + + +

Syntaxe

+ +
/* Avec un mot-clé */
+word-spacing: normal;
+
+/* Valeurs de longueur */
+/* type <length> */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* Valeurs en pourcentages */
+/* type <percentage> */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* Valeurs globales */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+
+ +

Valeurs

+ +
+
normal
+
L'espace normale entre les mots (ou inter-mot), tel qu'il est défini par la police courante et/ou le navigateur.
+
<length>
+
Une valeur de longueur définit l'espace qu'on ajoute à l'inter-mot intrinsèque défini par la police. Voir {{cssxref("<length>")}} pour les différentes valeurs et unités possibles.
+
<percentage>
+
Une valeur en pourcentages définit la taille de l'inter-mot à utiliser par rapport à la position du prochain caractère (si on utilise -100%, l'espace sera nul et si on utilise 100%, il sera doublé). Voir {{cssxref("<percentage>")}} pour les différentes valeurs et unités possibles.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p id="ligne1">Voici le texte de la ligne 1 </p>
+<p id="ligne2" >Et voilà celui de la ligne 2 </p>
+
+ +

CSS

+ +
#ligne1 {
+  word-spacing: 15px;
+}
+
+#ligne2 {
+  word-spacing: 5em;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Accessibilité

+ +

Utiliser des valeurs trop importantes (positives ou négatives) pour word-spacing rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.

+ +

La bonne valeur à utiliser pour word-spacing doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS3 Text')}}Remplace les valeurs précédentes avec une valeur <spacing-limit> qui définit la même valeur et la valeur <percentage> et permet d'avoir trois valeurs pour décrire un optimum, un minimum, et un maximum.
{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}{{Spec2('CSS3 Transitions')}}word-spacing peut désormais être animé.
{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}{{Spec2('CSS2.1')}}Aucun changement.
{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.word-spacing")}}

-- cgit v1.2.3-54-g00ecf