CSS - text-orientation

• トップ
• CSSリファレンス
• text-orientation

概要

説明

writing-mode に vertical-rl または vertical-lr などの縦書きを指定した場合の、英語などの横書き文字の表示方向を指定します。Internet Explorer ではサポートされていません。

mixed

英語などの横書き文字は90度回転させます。日本語などの縦書き可能文字はそのまま表示します。

sideways

英語などの横書き文字も、日本語などの縦書き可能文字も90度回転させます。

upright

英語などの横書き文字も、日本語などの縦書き可能文字もそのまま表示します。

使用例

.flex {
  display: flex;
}
.jp-tate {
  writing-mode: vertical-rl;
}
.box {
  padding: .5rem;
  margin-right: .5rem;
  border: 1px solid #ccc;
  background-color: #fff;
}
.mixed { text-orientation: mixed; }
.sideways { text-orientation: sideways; }
.upright { text-orientation: upright; }

<div class="flex">
  <div class="jp-tate">
    <div class="box mixed">
      色は匂へど<br>散りぬるを<br>Example of mixed
    </div>
    <div class="box sideways">
      色は匂へど<br>散りぬるを<br>Example of sideways
    </div>
    <div class="box upright">
      色は匂へど<br>散りぬるを<br>Example of upright
    </div>
  </div>
</div>

関連項目

• writing-mode

リンク

• https://drafts.csswg.org/css-writing-modes-3/#text-orientation
• https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation
• https://caniuse.com/#search=text-orientation