CSS - text-orientation

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

概要

属性名 text-orientation
mixed | sideways | upright
初期値mixed
適用可能要素全ての要素
継承継承する

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
基本CSS3(未)7641483510.1

説明

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

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

使用例

CSS
.flex {
  display: flex;
}
.box {
  padding: .5rem;
  margin-right: .5rem;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Consolas;
  writing-mode: vertical-rl;
}
.mixed { text-orientation: mixed; }
.sideways { text-orientation: sideways; }
.upright { text-orientation: upright; }
HTML
<div class="flex">
  <div class="box mixed">
    Example of mixed<br>色は匂へど<br>散りぬるを
  </div>
  <div class="box sideways">
    Example of sideways<br>色は匂へど<br>散りぬるを
  </div>
  <div class="box upright">
    Example of upright<br>色は匂へど<br>散りぬるを
  </div>
</div>
表示
Example of mixed
色は匂へど
散りぬるを
Example of sideways
色は匂へど
散りぬるを
Example of upright
色は匂へど
散りぬるを

関連項目

リンク


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