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/ruby-align/index.html | 146 +++++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 files/fr/web/css/ruby-align/index.html (limited to 'files/fr/web/css/ruby-align') diff --git a/files/fr/web/css/ruby-align/index.html b/files/fr/web/css/ruby-align/index.html new file mode 100644 index 0000000000..589f6a46a6 --- /dev/null +++ b/files/fr/web/css/ruby-align/index.html @@ -0,0 +1,146 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +tags: + - CSS + - Propriété + - Reference + - Ruby +translation_of: Web/CSS/ruby-align +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété ruby-align définit la façon dont les éléments ruby sont distribués autour du texte de base.

+ +
/* Valeur avec un mot-clé */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Valeurs globales */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
start
+
Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.
+
center
+
Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.
+
space-between
+
Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.
+
space-around
+
Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Ce fragment HTML sera affiché différemment en fonction des valeurs de ruby-align :

+ +
<ruby>
+  <rb>Un long texte pour tester</rb>
+  <rp>（</rp><rt>Un petit ruby</rt><rp>）</rp>
+</ruby>
+
+ +

Alignement par rapport au début du texte de base

+ + + +
ruby {
+  ruby-align: start;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Alignement_par_rapport_au_début_du_texte_de_base", 180, 40)}}

+ +

Alignement par rapport au centre

+ + + +
ruby {
+  ruby-align: center;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Alignement_par_rapport_au_centre", 180, 40)}}

+ +

Un espace supplémentaire entre les éléments ruby

+ + + +
ruby {
+  ruby-align: space-between;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Un_espace_supplémentaire_entre_les_éléments_ruby", 180, 40)}}

+ +

Un espace supplémentaire entre et autour des éléments ruby

+ +
ruby {
+  ruby-align: space-around;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby", 180, 40)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}{{Spec2('CSS3 Ruby')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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