cssで縦書き、縦スクロール、段組みへの道3(overflow)
前書き
cssで縦書き、縦スクロール、段組みを実装出来るかどうか、試みています。
目次
- 試み
- HTML/CSS
- 失敗例
試み
方法
- 右から左に並べる(direction: rtl)
- はみ出た分はスクロールで表示する(overflow-x : auto)
- 縦書きを指定する(writing-mode: vertical-rl)
結果
長い文も綺麗に収まるが、段組みが出来ていない。縦スクロールでもない。
HTML/CSS
<div class="tategaki03">
<div class="inner">
<p>
<ruby>漢字<rt>ふりがな</rt></ruby>ひらがな
</p>
<p>
<ruby>漢字<rt>ふりがな</rt></ruby>ひらがな<br>
<ruby>漢字<rt>ふりがな</rt></ruby>ひらがな
</p>
</div>
</di>
.tategaki03{
overflow-x: auto;
direction: rtl;
line-height: 3;
}
.tategaki03 .inner{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
font-feature-settings: "vpal";
direction:ltr;
max-height: 75vh;
}
失敗例
横にスクロールします。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
短い文です。
長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です。
長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です。
長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です長い文です。
さらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文ですさらに長い文です。
関連記事
cssで縦書き、縦スクロール、段組みへの道4(column-count)