TAKAIDO intertainment

高井戸インターテインメント

labo

縦組み

縦組み3 段組み設定

段組みを設定するスタイルシートのプロパティ

  • 1段の高さ(行長)指定
    column-width: 000px;
    -webkit-column-width: 000px;(ベンダープレフィックス)
  • 段数の指定
    column-count: 3;
    -webkit-column-count: 3;(ベンダープレフィックス)
  • 段間サイズ
    column-gap: 00px;
    -webkit-column-gap: 00px;
    (ベンダープレフィックス)
  • 段間に入れることができる罫線の指定
    column-rule: solid 1px #000;
    -webkit-column-rule: solid 1px #000;
    (ベンダープレフィックス)

    borderと同じで、線種・太さ・色を一括で指定できます。
    段間の中央に罫線が上塗りされるかたちでひかれるので、上の段と下の段の間隔は、変わりません。罫線を太くしても段間が開いていくわけではないです。
  • 段組み全体の高さを指定する
    height: 000px;

    1段の高さ(column-width)、段数(column-count)、段間サイズ(column-gap)から導き出される段組み全体の高さ(height)を指定しておかないと、レイアウトが指定通りに表示されない場合があるため、この数値は、必須であったほうがよいです。

段組みサンプル1

 これらの「縦書き」と「段組み」のスタイルシートの機能を使えば、とりあえずは、縦組みが実現できるのだけど、それは、段に含まれるボリュームである文章量がはっきり判明していて、文字組み指定やレイアウトデザインがかっちり決定している場合でのことで、ブログ投稿のように、毎回文章量に変化があり、複数のデバイスで閲覧することを前提としたレスポンシブに変化するレイアウトデザインを考慮すると、もうひと工夫が必要になってくるのですが、それは、次の投稿へ。

 次回につづく。

縦組み4 文章量と段数

 たとえば、スマホ・タブレット・PCでの表示の大きな違いは、画面の幅が違ってくることですし、投稿する文章ごとに文章量が一定ではないということを考慮すると、段の高さ(行長)と段間をスタイル指定してテキストを流したとしても、1段分の容積が変わることが前提になるので、状況により段数が変化してしまうことになります。
 段数がはっきり決まっていないものについては、段全体の高さ(height)の指定が出来ないことになり、それにより、レイアウトが指定どおりに表示されない場合があるので、それを避けたいわけです。

  • height値を指定していない場合は、height:auto;のときと同じサイズで段全体が表示されるので、レイアウトがくずれる。
     段組みサンプル2
  • 想定した段数にくらべて文章量が多く、段組みに入りきらなかった場合:段組み以下に続く要素がかぶってくる。
     段組みサンプル3

 どうにか、段数を導き出す方法はないものかと、例えば「文字数を数えてテキストボリュームの参考にする」ことができないのかと、ぼんやり考えていて、段組みに関係なく「文字数を数える」ことを考察してる人のページなどを参考に見たりしていたのですが、そのうち、文字量と1段分の容積との比較から、「箱組みからあふれる」ということで、スタイルシートの「overflow」の性質について調べていたら、「scrollWidth,scrollHeight」というプロパティがあることを知ったのです。

縦組み5 段数を判定

scrollWidth, scrollHeightで段数を判定
 scrollWidthは、そもそも<div></div>ではさまれた中身の要素が大きすぎて<div>からあふれているときに、そのあふれた部分も含めた要素全体の中身の横幅の値を求めるもので、本来は、スクロールバーを表示するときに参照している値らしいです。(scrollHeightのほうは、横幅ではなく、縦幅)
 というわけで、この値と、段組みの1段の箱のサイズを比較すれば、「あふれている」かが判定できるわけで、あふれているあいだは、段数を増やし続けることで、段数が判明できたのでした。
 この動作は、ブラウザサイドでの表示についての操作なので、Javascriptを使っています。

段組みサンプル4

段組みサンプル5

動作の流れ

①ページがブラウザに読み込まれる

 ブラウザにより、レスポンシブに段組みの幅(width)が確定し、1段目の枠サイズ(width x height)が決まる

②「テキストのscrollWidth」と「枠のwidth」を比較してテキストがあふれているかを判定

⇒ あふれていないとき:段組み設定せず枠のまま表示し、処理終了
⇒ あふれているとき:2段組みとして段組み設定(2段分のheight値で)

③「scrollHeight」と「2段分のheight値」を比較、テキストがあふれているかを判定

⇒ あふれていないとき:処理終了
⇒ あふれているとき:3段組みとして段組み設定(3段分のheight値で)

④以降、「scrollHeight」と「全体のheight値」との比較をして、あふれなくなるまで、1段づつ段数を増やして段組み設定を繰り返す


 「あふれている」かの判定を2段組み以降、scrollWidthではなくscrollHeightにしているのは、文字組みの都合により複数種類の行送りが混在している場合など、行送りに対しての段替えのルールに不明な部分があり、あふれている判定とじっさいの表示に誤差が生じていたので、1段だけのときは、横にあふれますが、2段目設定以降は、下にあふれている限り段数を増やして判定するという方法に修正しました。

 段組みのなかのテキストフローに、画像を挿入したり、リスト<ul><li></li></ul>の挿入したときのふるまいとか、改段方法とか、いろいろ課題はあるんですが、それは、また今度。
 つづく。

  • CATEGORIES