和風サイト制作の縦書について、

Question

和風サイト制作の縦書について、

.u-vertical {
writing-mode: tb-rl;
writing-mode: vertical-rl;

line-height: 2em;
}
このようにしているのですが、pが複数並ぶ場合横書きは縦に並んで問題ないのですが、
縦書きだと横に並んでくれずに困りますよね。
floatやフレキシブルボックスなどで毎回、横並びにするしかないのでしょうか？
大変ですね。

http://www.miyama-sansou.com/
はspanだらけにするというとんでもない方法でやっていますが。

現場の主流はどの方法でしょうか？

JavaScriptで部分的に縦書きを適用する方法でしょうか？
http://nemousucom.hatenablog.com/entry/2012/11/12/084310
http://www.skuare.net/test/jnehan.html

Answer 1

親要素に指定すれば横並びになりますよ。

.vertical-wrap {
	width: 100%;
    height: 500px;
    line-height: 2em;
    writing-mode: vertical-rl;
}

<div class="vertical-wrap">
	<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
	<p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
	<p>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</p>
</div>

Comments

[退会済みユーザー]

ありがとうございます。多少崩れましたが確かに横並びになりました。
writing-mode: vertical-rl;は横並びにしたい要素事態につけるのではなく、
親要素につけるのがコツなのですね。

Answer 2

CSSを

.u-vertical { 
writing-mode: tb-rl; 
writing-mode: vertical-rl;
float: right;
line-height: 2em; 
} 

という風にするのではだめですかね。

Comments

[退会済みユーザー]

ありがとうございます。やはり横書きと違って、数列になる場合は毎度横並びにflexなりinlineなりfloatなりで、行うしかないのですね。

[stmkza]

そういうことになると思います。
ただ、あまりよくないやり方ですが、tableを使えば、floatなしでも横並びにすることができます。