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
141
142
143
144
145
146
|
---
title: ruby-align
slug: Web/CSS/ruby-align
tags:
- CSS
- Propriété
- Reference
- Ruby
translation_of: Web/CSS/ruby-align
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La propriété <code><strong>ruby-align</strong></code> définit la façon dont les éléments ruby sont distribués autour du texte de base.</p>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>start</code></dt>
<dd>Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.</dd>
<dt><code>center</code></dt>
<dd>Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.</dd>
<dt><code>space-between</code></dt>
<dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.</dd>
<dt><code>space-around</code></dt>
<dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<p>Ce fragment HTML sera affiché différemment en fonction des valeurs de <code>ruby-align</code> :</p>
<pre class="brush: html"><ruby>
<rb>Un long texte pour tester</rb>
<rp>（</rp><rt>Un petit ruby</rt><rp>）</rp>
</ruby>
</pre>
<h3 id="Alignement_par_rapport_au_début_du_texte_de_base">Alignement par rapport au début du texte de base</h3>
<pre class="brush: html" style="display: none;"><ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
</pre>
<pre class="brush: css">ruby {
ruby-align: start;
}</pre>
<p>Avec ce CSS, on obtient le résultat suivant :</p>
<p>{{EmbedLiveSample("Alignement_par_rapport_au_début_du_texte_de_base", 180, 40)}}</p>
<h3 id="Alignement_par_rapport_au_centre">Alignement par rapport au centre</h3>
<pre class="brush: html" style="display: none;"><ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
</pre>
<pre class="brush: css">ruby {
ruby-align: center;
}</pre>
<p>Avec ce CSS, on obtient le résultat suivant :</p>
<p>{{EmbedLiveSample("Alignement_par_rapport_au_centre", 180, 40)}}</p>
<h3 id="Un_espace_supplémentaire_entre_les_éléments_ruby">Un espace supplémentaire entre les éléments ruby</h3>
<pre class="brush: html" style="display: none;"><ruby>
<rb>This is a long text to check</rb>
<rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
</pre>
<pre class="brush: css">ruby {
ruby-align: space-between;
}</pre>
<p>Avec ce CSS, on obtient le résultat suivant :</p>
<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_les_éléments_ruby", 180, 40)}}</p>
<h3 id="Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby">Un espace supplémentaire entre et autour des éléments ruby</h3>
<pre class="brush: css">ruby {
ruby-align: space-around;
}</pre>
<p>Avec ce CSS, on obtient le résultat suivant :</p>
<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby", 180, 40)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}</td>
<td>{{Spec2('CSS3 Ruby')}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.ruby-align")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Les éléments HTML liés aux notations Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.</li>
<li>Les propriétés CSS liées aux notations Ruby : {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li>
</ul>
|
