CSS - text-combine-upright

概要

属性名	text-combine-upright
値	none \| all \| [ digits <integer>? ]
初期値	none
適用可能要素	インラインボックス・テキスト
継承	継承する
サポート	https://caniuse.com/?search=text-combine-upright

説明

縦書きの中で、数桁の文字を1文字分の横幅におさまるよう結合(combine)して直立(upright)させます。縦書きの中で日付や住所を記述する際に便利です。

値	説明
none	結合・直立させません。
all	指定したすべての文字を結合・直立させます。
digits n	最大 n 桁の数値を結合・直立させます。n には 2～4 の整数を指定できます。n を省略した場合は 2 と見なされます。まだあまりサポートされていません。

使用例

CSS

.vertical {
  writing-mode: vertical-rl;
}
.tcu {
  text-combine-upright: all;
}

HTML

<div class="vertical">
  <div>平成28年9月10日</div>
  <div>平成<span class="tcu">29</span>年<span class="tcu">9</span>月<span class="tcu">18</span>日</div>
  <div><span class="tcu">3</span>丁目<span class="tcu">13</span>番地<span class="tcu">25</span>号</div>
</div>

表示

平成28年9月10日

平成29年9月18日

3丁目13番地25号

リンク

初版：2022年9月25日、最終更新：2022年9月25日

https://www.tohoho-web.com/css/prop/text-combine-upright.htm