以下のCSSを書くと縦書きになりますよ。
font-feature-settingsがないと文字が左に詰めになり、ガタガタになります。
text-orientation: upright;を設定すると英数字も縦書きになります。
英数字は横でよい場合は外す。

縦中横はtext-combine-upright: all;を設定する。

<div class="verticalWritingBox">
 <p><ruby>羅貫中<rt>らかんちゅう</rt></ruby>は「<ruby>水滸伝<rt>すいこでん</rt></ruby>」を著わして、そのために子孫<span class="tatechuyoko">3</span>代にわたって<ruby>唖<rt>おし</rt></ruby>の児が生まれ、紫式部は「源氏物語」を著わして、<span class="tatechuyoko">1</span>度は地獄にまでおちたが、それはおもうに彼等が架空の物語や狂言<ruby>綺語<rt>きご</rt></ruby>書いて世の人々を惑わせた悪業のために、そのむくいを身にうけたというべきであろう。</p>
 <p>そしてその文をみると、それぞれかわっためずらしい趣向をこらし、その文章の勢い・調子は真にせまり、あるいは低く、あるいは高く、あたかもころがるようになめらかで<ruby>流暢<rt>りゅうちょう</rt></ruby>であって、これを読むものの心持をしてたのしく快くさせるものである。</p>
</div>

.verticalWritingBox{
writing-mode: vertical-rl;
font-feature-settings:initial;
}
.tatechuyoko{
-webkit-text-combine: horizontal;
-ms-text-combine-horizontal: all;
text-combine-upright: all;
}