blob: ddf03329337f4a06a61d0b981c9f6f687e8d5f9a (
plain)
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
|
---
title: ruby-position
slug: Web/CSS/ruby-position
tags:
- CSS
- Propriété
- Reference
- Ruby
translation_of: Web/CSS/ruby-position
---
{{CSSRef}}{{SeeCompatTable}}
La propriété **`ruby-position`** définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (`over`), en-dessous (`under`) ou entre les caractères, sur leur droite (`inter-character`).
```css
/* Valeurs avec un mot-clé */
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;
/* Valeurs globales */
ruby-position: inherit;
ruby-position: initial;
ruby-position: unset;
```
## Syntaxe
### Valeurs
- `over`
- : Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.
- `under`
- : Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.
- `inter-character`
- : Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.
### Syntaxe formelle
{{csssyntax}}
## Exemples
Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-position` :
```html
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```
### Au-dessus du texte
```html hidden
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```
```css
ruby {
ruby-position:over;
}
```
On obtiendra le résultat suivant :
{{EmbedLiveSample("Au-dessus_du_texte", 100, 40)}}
### En-dessous du texte
```html hidden
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```
```css
ruby {
ruby-position:under;
}
```
On obtiendra le résultat suivant :
{{EmbedLiveSample("En-dessous_du_texte", 100, 40)}}
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
| {{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}} | {{Spec2('CSS3 Ruby')}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.ruby-position")}}
## Voir aussi
- Les éléments HTML à propos de Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.
- Les propriétés CSS à propos de Ruby : {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}.
|
