cssで縦書き、縦スクロール、段組みへの道3（overflow）

2020.9.25公開（2021.2.28更新）
@HTMLコーディング #HTML/CSS/JS

前書き

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;
}

失敗例

横にスクロールします。

短みじかい文ぶんです。

長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです長ながい文ぶんです。

さらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんですさらに長ながい文ぶんです。