フロートを使えば縦書きにすることだってできるのです。でもプログラム組まないと超絶めんどいです。

縦書きにしたい場合はどうすればいいのでしょうか。

普通に実装する場合はwriting-mode:vertical-rl; を指定するだけでOKです。

ただ、このプロパティはなろうの活動報告では受け入れてくれません。

じゃぁどうすればいいのか。

フロートを使って力技で実現します。（力こそパワー、二度目）

こんな感じに細長のブロックを並べれば縦になりますね。

<div style="line-height:1;font-size:1.5em;text-align:center"><div style="width:1em;padding:1em 0.5em 1em 0;float:right">縦書きにしたい場合はこんな風に縦に並べたい文章をある</div><div style="width:1em;padding:1em 0.5em 1em 0;float:right">文字数で区切ってそれぞれ並べて実現していくのです。で</div><div style="width:1em;padding:1em 0.5em 1em 0;float:right">もこれってすごい大変で、プログラムを組まないと手動で</div><div style="width:1em;padding:1em 0.5em 1em 0;float:right">はすごくきついのです。</div></div><div style="clear:both;"></div>

各ブロックにwidth:1em;padding:1em 0.5em 1em 0;float:rightを設定して並べてます。コツはwidth:1emですね。幅を1文字分に指定することで細長いブロックを生成しています。

paddingを指定しているのは、普通に並べると詰め詰めになってしまうので。行間の代わりに指定します。

これで縦にはなるのですが、何か違和感を感じませんか？

そう、句読点が横書きのままなのです。writing-mode:vertical-rl;を指定すると、句読点も縦書き用になるのですが、こちらは力技で縦にしているだけなので横のままです。

どうすればいいのか。

縦書き用の物になおします。

横書き用

、を︑に

。を︒にします。

<div style="line-height:1;font-size:1.5em;text-align:center"><div style="width:1em;padding:1em 0.5em 1em 0;float:right">縦書きにしたい場合はこんな風に縦に並べたい文章をある</div><div style="width:1em;padding:1em 0.5em 1em 0;float:right">文字数で区切ってそれぞれ並べて実現していくのです︒で</div><div style="width:1em;padding:1em 0.5em 1em 0;float:right">もこれってすごい大変で︑プログラムを組まないと手動で</div><div style="width:1em;padding:1em 0.5em 1em 0;float:right">はすごくきついのです︒</div></div><div style="clear:both;"></div>

はい、こうなります。これで縦になりましたね。

他にも縦と横で見栄えが悪い文字があるので、それらも変換しておくといいでしょう。それか始めから使わないか。

'「','」','『','』','〈','〉','（','）','【','】','、','。','ー','…'

　　↓

'﹁','﹂','﹃','﹄','︿','﹀','︵','︶','︻','︼','︑','︒','︱','︙'

ということで縦書きもできました。