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

前書き

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

目次

1. 試み
2. HTML/CSS/JS
3. 見本
4. その他の方法

試み

方法

• 縦書きを指定する（ writing-mode: vertical-rl ）
• 段組み用のcssを指定する（ column-count ）

参考

段組みを使って縦書きの文章をレスポンシブ対応させる方法

結果

column-countを指定すれば、勝手に段組みしてくれるが、段落数と高さを上手く指定しないと、はみ出たり、隙間が出来てしまう。
レスポンシブに対応する為に、javascriptで段落数と高さを調整した。

HTML/CSS/JS

<div class="tategaki04">
  <div class="inner" data-adjust="inner">
    <div class="text_block" data-adjust="block">
      <p>
        <ruby>漢字<rt>ふりがな</rt></ruby>ひらがな
      </p>
      <p>
        <ruby>漢字<rt>ふりがな</rt></ruby>ひらがな<br>
        <ruby>漢字<rt>ふりがな</rt></ruby>ひらがな
      </p>
    </div>
  </div>
</div>

.tategaki04{
  line-height: 3;
}
.tategaki04 .inner{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "pkna";
  width: 100%;
  overflow: hidden;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: #a675a5;
  column-gap: 40px;
  column-fill:auto;
}
.tategaki04 .text_block{
  max-height: 75vh;
}

// column-countを指定した要素の幅は、ブラウザによって異なる
// chrome　→　横長
// firefox →　縦長

const block = document.querySelector('[data-adjust="block"]');
const inner = document.querySelector('[data-adjust="inner"]');

const heightAdjust = () => {
  if( block ){
    const blockW = block.offsetWidth; //1段の横幅
    const blockH = block.offsetHeight; //1段の高さ
    const innerW = inner.offsetWidth; //表示場所の横幅
    const windowH = Math.ceil( window.innerHeight * 0.75 ); //表示場所の高さ(max-height:75vhを指定している為)
    let cc = "auto"; //はみ出てなければ
    let h = windowH; //〃

    if( blockW > innerW ){ //横にはみ出ていれば
      cc = Math.ceil( blockW / innerW ); //何段に分けたら収まるか
      h = ( blockH + 40 ) * cc; //（ 1段の高さ + column-gap ）× 段数
    }else if( blockH > windowH ){ //縦にはみ出ていれば
      cc = Math.ceil( blockH / windowH ); //何段に分けたら収まるか
      h = windowH * cc; // 1段の高さ × 段数
    }
    inner.style.columnCount = cc; //段数
    inner.style.height = h + "px"; //表示場所の高さ
  }
}

document.addEventListener('DOMContentLoaded', function() {
  heightAdjust();
});

見本

その他の方法

スクロールで表示させる

javascriptを使わずに、cssに下記を追加している

.tategaki04 .inner{
  /* 前略 */
  column-width: 75vh;
  overflow-y: auto;
}

関連記事

実語教（じつごきょう）を素読する

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

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

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