blob: d8d66906d0e544c28f0aacdff5d812569b37d89a (
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
|
---
title: text-orientation
slug: Web/CSS/text-orientation
tags:
- CSS
- CSS プロパティ
- CSS Writing Modes
- Reference
- recipe:css-property
- 日本語処理
browser-compat: css.properties.text-orientation
translation_of: Web/CSS/text-orientation
---
{{CSSRef}}
**`text-orientation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト ({{cssxref("writing-mode")}} が `horizontal-tb` 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。
{{EmbedInteractiveExample("pages/css/text-orientation.html")}}
## 構文
```css
/* キーワード値 */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;
/* グローバル値 */
text-orientation: inherit;
text-orientation: initial;
text-orientation: initial;
text-orientation: unset;
```
`text-orientation` プロパティは、以下のリストから単一のキーワードとして指定されます。
### 値
- `mixed`
- : 横書き用の文字を右に 90° 回転させ、縦書き用の文字は自然に配置します。既定値です。
- `upright`
- : 横書き用の文字を、縦書き用の字形と同様に自然に (正立で) 配置します。なお、このキーワードはすべての文字を左書きと見なします。 {{cssxref("direction")}} の使用値は `ltr` に強制されます。
- `sideways`
- : 全行を横書きで書いて 90° 回転したように配置します。
- `sideways-right`
- : `sideways` の別名です。これは互換性のために維持されています。
- `use-glyph-orientation`
- : SVG 要素上で、非推奨の SVG プロパティ `glyph-orientation-vertical` と `glyph-orientation-horizontal` の値を使用します。
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
<h2 id="Examples">例</h2>
### HTML
```html
<p>Lorem ipsum dolet semper quisquam.</p>
```
### CSS
```css
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
```
### 結果
{{EmbedLiveSample('Examples')}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 他の縦書きに関連する CSS プロパティ: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}}
- [CSS 論理的プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties)
- [縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)](https://www.w3.org/International/articles/vertical-text/)
- 広範なブラウザーの対応状況のテスト結果: <https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation>
|
