TAKAIDO intertainment

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

labo

縦組み

縦組み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