CSS - text-orientation

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

概要

属性名text-orientation
mixed | sideways | upright
初期値mixed
適用可能要素全ての要素
継承継承する
サポートhttps://caniuse.com/css-text-indent

説明

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

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

使用例

CSS
.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; }
HTML
<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>
表示

関連項目

リンク


Copyright (C) 2020 杜甫々
初版:2020年1月5日、最終更新:2020年1月5日
http://www.tohoho-web.com/css/prop/text-orientation.htm