cssで縦書き、縦スクロール、段組みへの道4(column-count)
前書き
cssで縦書き、縦スクロール、段組みを実装出来るかどうか、試みています。
目次
- 試み
- HTML/CSS/JS
- 見本
- その他の方法
試み
方法
- 縦書きを指定する( 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)