CSSでtext-orientationは使ってはいけない

---

ちょっと釣りっぽいタイトルですが
ちょっと困った事があったので書いておきます。

やった事

縦書きの文書(英数字の向きは縦)を書くことがあったので
以下のようにtext-orientationを使って実装しました。

CSS

div {
    width: 30px;
    height: 290px;
    margin: 20px auto;
}
p {
    padding: 20px;
    border: 2px solid #000;
    -webkit-writing-mode: vertical-rl; /* 縦書きにする */
    -ms-writing-mode: tb-rl; /* 縦書きにする */
    writing-mode: vertical-rl; /* 縦書きにする */
    text-orientation: upright; /* 英数字の向きを縦にする */
}

HTML

<div>
  <p>僕にもし子供が産まれたら<br/>世界で2番目に好きだと話そう</p>
</div>

Chrome等で確認すると想定通りになりました。

これで満足していたのですが、実はtext-orientationはIEでは対応しておらず
数字が横向きになってしまいました。(2019年9月現在)

対応方法

text-combine-uprightというスタイルがあるので
これを使って数字部分を縦向きにします。

変更後のソースは以下のようにします。

CSS

div {
    width: 30px;
    height: 290px;
    margin: 20px auto;
}
p {
    padding: 20px;
    border: 2px solid #000;
    -webkit-writing-mode: vertical-rl; /* 縦書きにする */
    -ms-writing-mode: tb-rl; /* 縦書きにする */
    writing-mode: vertical-rl; /* 縦書きにする */
}
span {
    font-family: "メイリオ";
    -webkit-text-combine: horizontal; /* 英数字の向きを縦にする */
    -ms-text-combine-horizontal: all; /* 英数字の向きを縦にする */
    text-combine-upright: all; /* 英数字の向きを縦にする */
}

HTML

<div>
  <p>僕にもし子供が産まれたら<br/>世界で<span>2</span>番目に好きだと話そう</p>
</div>

これでIEでも数字が縦向きになりました。

気をつけなければならないのは、text-combine-uprightで囲った範囲は横に並びます。
つまり、上記のspanの中を複数文字にしてしまうと以下のようになります。

HTML

<div>
  <p>僕にもし子供が産まれたら<br/>世界で<span>123</span>番目に好きだと話そう</p>
</div>

結果

複数の英数字を縦向きにして縦に並べたい場合は
1文字ずつtext-combine-uprightで囲まないといけないので面倒です。

早くIEにtext-orientationしてもらいたいです。