このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
text-orientation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年9月.
text-orientation はCSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (writing-mode がhorizontal-tb 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。
試してみましょう
writing-mode: vertical-rl;text-orientation: mixed;writing-mode: vertical-rl;text-orientation: upright;<section> <div> <p> In another moment down went Alice after it, never once considering how in the world she was to get out again. </p> </div></section>構文
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横書き用の文字を、縦書き用の字形と同様に自然に (正立で) 配置します。なお、このキーワードはすべての文字を左書きと見なします。
directionの使用値はltrに強制されます。sideways全行を横書きで書いて 90° 回転したように配置します。
sideways-rightsidewaysの別名です。これは互換性のために維持されています。use-glyph-orientationSVG 要素上で、非推奨の SVG プロパティ
glyph-orientation-verticalとglyph-orientation-horizontalの値を使用します。
公式定義
| 初期値 | mixed |
|---|---|
| 適用対象 | 表の行グループ、列グループ、行、列を除くすべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |
形式文法
text-orientation =
mixed|
upright|
sideways
例
HTML
html
<p>Lorem ipsum dolet semper quisquam.</p>CSS
css
p { writing-mode: vertical-rl; text-orientation: upright;}結果
仕様書
| Specification |
|---|
| CSS Writing Modes Level 4 # text-orientation |