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号

リンク

Copyright (C) 2022 杜甫々
初版：2022年9月25日、最終更新：2022年9月25日
https://www.tohoho-web.com/css/prop/text-combine-upright.htm