-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
135 lines (96 loc) · 2.78 KB
/
index.md
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
---
title: ruby-align
slug: 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.
## Définition formelle
{{CSSInfo}}
## 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
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## 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")}}.