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

2020.9.25公開（2021.2.28更新）
@HTMLコーディング #縦書き

前書き

cssで縦書き、縦スクロール、段組みを実装出来るかどうか、試みています。

試み

方法

右から左に並べる
（display: flex, flex-direction: row-reverse）
子要素として、一行分、もしくは、複数行分をタグで囲み、そのタグに縦書きを指定する
（writing-mode: vertical-rl）

結果

文字を少しづつタグで括ることが出来る場合は良い。
タグの中の文字が多くなると、改行位置によっては、大きな隙間が出来てしまう。

HTML/CSS


<div class="tategaki02">
  <p><ruby>漢字<rt>ふりがな</rt></ruby>ひらがな</p>
  <p><ruby>漢字<rt>ふりがな</rt></ruby>ひらがな</p>
  <p><ruby>漢字<rt>ふりがな</rt></ruby>ひらがな</p>
</div>


.tategaki02{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  line-height: 3;
}
.tategaki02 p{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "vpal";
  max-height: 75vh;
  padding: 30px 0 10px;
  border-bottom: 1px solid #a675a5;
}

失敗例

短みじかい文ぶんです。

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

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