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

前書き

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

目次

  1. 試み
  2. HTML/CSS
  3. 失敗例

試み

方法

  • 右から左に並べる(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)

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

cssで縦書き、縦スクロール、段組みへの道1(direction)

先頭に戻る
ページの先頭に戻る