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

前書き

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

目次

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

試み

方法

  • 右から左に並べる。
    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 $violet01;
}

失敗例

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

さらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんです

関連記事

実語教(じつごきょう)を素読する

cssで縦書き、縦スクロール、段組みへの道4(column-count)

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

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

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