CSS3

プロパティ

text-combine-upright

[Edge]⛌。→●、mdn

縦書き内の横書きの字組み。

このプロパティは［複数のタイポグラフィック文字単位による、単独のタイポグラフィック文字単位が占める空間への結合］を指定する。結合されたテキストが 1em より幅広な場合、ユーザー エージェントは、その内容を 1em 内に収めるものとする。下を見よ。結果の字組みは、レイアウトや装飾の目的においては、単独の正立グリフとして扱われる。このプロパティの効果は、「↑↓」縦組みに限られる。

none

特別な処理はない。

all

【「⇔」横書きに結合し得るような】どの［連続なタイポ グラフィック文字単位 並び］に対しても、「↑↓」縦書きの行ボックスの中で 単独のタイポグラフィック文字単位の空間を占めるように、ボックスの中に「⇔」横書きに植字することを試みる。

<DIV style="border:1px solid black; width:100px; height:100px;
 font-family:ＭＳ ゴシック; font-size:20px;
 writing-mode:vertical-rl;
">平成20年
</DIV>

未設定

<DIV style="border:1px solid red; width:100px; height:100px;
 font-family:ＭＳ ゴシック; font-size:20px;
 writing-mode:vertical-rl;
 text-combine-upright:all;
">平成20年
</DIV>

¶

<DIV style="border:1px solid black; width:100px; height:100px;
 font-family:ＭＳ ゴシック; font-size:20px;
 writing-mode:vertical-rl;
">平成<SPAN style="text-combine-upright:all; border:1px solid red;">20</SPAN><SPAN style="text-combine-upright:all; border:1px solid red;">2000</SPAN>年
</DIV>

テスト