1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
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.
```css
/* 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` :
```html
<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
```html hidden
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```
```css
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
```html hidden
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```
```css
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
```html hidden
<ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```
```css
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
```css
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 | État | Commentaires |
| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
| {{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
- Les éléments HTML liés aux notations Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.
- Les propriétés CSS liées aux notations Ruby : {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.
|
