text-orientation - CSS: カスケーディングスタイルシート

試してみましょう

writing-mode: vertical-rl;
text-orientation: mixed;

writing-mode: vertical-rl;
text-orientation: upright;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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-right: sideways の別名です。これは互換性のために維持されています。
use-glyph-orientation: SVG 要素上で、非推奨の 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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月21日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content