blob: 5909273bf9c6ea39c6cc5d3a5013a1338a090631 (
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
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
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: text-emphasis-position
slug: Web/CSS/text-emphasis-position
tags:
- CSS
- CSS プロパティ
- CSS テキスト装飾
- Reference
- recipe:css-property
browser-compat: css.properties.text-emphasis-position
translation_of: Web/CSS/text-emphasis-position
---
{{CSSRef}}
**`text-emphasis-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。
```css
/* 初期値 */
text-emphasis-position: over right;
/* キーワード値 */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;
text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;
/* グローバル値 */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-postition: revert;
text-emphasis-position: unset;
```
## 構文
### 値
- `over`
- : 横書きモードでテキストの上に圏点を描きます。
- `under`
- : 横書きモードでテキストの下に圏点を描きます。
- `right`
- : 縦書きモードでテキストの右に圏点を描きます。
- `left`
- : 縦書きモードでテキストの左に圏点を描きます。
## Description
圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は `over right` です。一方、中国語では、望ましい位置は `under right` となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。
<table>
<caption>
望ましい圏点とルビの位置
</caption>
<thead>
<tr>
<th rowspan="2" scope="col">言語</th>
<th colspan="2" scope="col">望ましい位置</th>
<th colspan="2" rowspan="2" scope="col">図</th>
</tr>
<tr>
<th>横書き</th>
<th>縦書き</th>
</tr>
</thead>
<tbody>
<tr>
<td>日本語</td>
<td rowspan="3">over</td>
<td rowspan="3">right</td>
<td rowspan="3">
<img
alt="日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。"
src="text-emphasis-ja.png"
title="日本語のテキストの上に適用された圏点 (分かりやすいよう青で表示)"
/>
</td>
<td rowspan="4">
<img
alt="日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。"
src="text-emphasis-v.gif"
title="日本語のテキストの右に適用された圏点"
/>
</td>
</tr>
<tr>
<td>韓国語</td>
</tr>
<tr>
<td>モンゴル語</td>
</tr>
<tr>
<td>中国語</td>
<td>under</td>
<td>right</td>
<td>
<img
alt="中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。"
src="text-emphasis-zh.gif"
title="中国語のテキストの下に適用された圏点 (分かりやすいよう青で表示)"
/>
</td>
</tr>
</tbody>
</table>
> **Note:** {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 `text-emphasis-position` を設定することはできず、また初期化されることもありません。
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## Examples
### ルビを圏点より優先させる場合
編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。
```css
ruby {
-webkit-text-emphasis: none;
text-emphasis: none;
}
```
### 圏点よりルビを優先させる場合
編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。
```css
em {
-webkit-text-emphasis: dot;
text-emphasis: dot; /* text-emphasis を <em> 要素に設定 */
}
em rt {
display: none; /* <em> 要素内のルビを隠す */
}
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}
|
