たとえば、スマホ・タブレット・ＰＣでの表示の大きな違いは、画面の幅が違ってくることですし、投稿する文章ごとに文章量が一定ではないということを考慮すると、段の高さ（行長）と段間をスタイル指定してテキストを流したとしても、１段分の容積が変わることが前提になるので、状況により段数が変化してしまうことになります。
段数がはっきり決まっていないものについては、段全体の高さ（
height）の指定が出来ないことになり、それにより、レイアウトが指定どおりに表示されない場合があるので、それを避けたいわけです。
- height値を指定していない場合は、height:auto;のときと同じサイズで段全体が表示されるので、レイアウトがくずれる。
- 想定した段数にくらべて文章量が多く、段組みに入りきらなかった場合：段組み以下に続く要素がかぶってくる。
どうにか、段数を導き出す方法はないものかと、例えば「文字数を数えてテキストボリュームの参考にする」ことができないのかと、ぼんやり考えていて、段組みに関係なく「文字数を数える」ことを考察してる人のページなどを参考に見たりしていたのですが、そのうち、文字量と１段分の容積との比較から、「箱組みからあふれる」ということで、スタイルシートの「
overflow」の性質について調べていたら、「
scrollWidth,
scrollHeight」というプロパティがあることを知ったのです。
scrollWidth, scrollHeightで段数を判定
scrollWidthは、そもそも
<div>〜
</div>ではさまれた中身の要素が大きすぎて
<div>からあふれているときに、そのあふれた部分も含めた要素全体の中身の横幅の値を求めるもので、本来は、スクロールバーを表示するときに参照している値らしいです。（
scrollHeightのほうは、横幅ではなく、縦幅）
というわけで、この値と、段組みの１段の箱のサイズを比較すれば、「あふれている」かが判定できるわけで、あふれているあいだは、段数を増やし続けることで、段数が判明できたのでした。
この動作は、ブラウザサイドでの表示についての操作なので、Javascriptを使っています。
動作の流れ
①ページがブラウザに読み込まれる
ブラウザにより、レスポンシブに段組みの幅（width）が確定し、１段目の枠サイズ（width x height）が決まる
⇓
②「テキストのscrollWidth」と「枠のwidth」を比較してテキストがあふれているかを判定
⇒ あふれていないとき：段組み設定せず枠のまま表示し、処理終了
⇒ あふれているとき：２段組みとして段組み設定（２段分のheight値で）
⇓
③「scrollHeight」と「２段分のheight値」を比較、テキストがあふれているかを判定
⇒ あふれていないとき：処理終了
⇒ あふれているとき：３段組みとして段組み設定（３段分のheight値で）
⇓
④以降、「scrollHeight」と「全体のheight値」との比較をして、あふれなくなるまで、１段づつ段数を増やして段組み設定を繰り返す
「あふれている」かの判定を２段組み以降、
scrollWidthではなく
scrollHeightにしているのは、文字組みの都合により複数種類の行送りが混在している場合など、行送りに対しての段替えのルールに不明な部分があり、あふれている判定とじっさいの表示に誤差が生じていたので、１段だけのときは、横にあふれますが、２段目設定以降は、下にあふれている限り段数を増やして判定するという方法に修正しました。
段組みのなかのテキストフローに、画像を挿入したり、リスト
<ul><li></li></ul>の挿入したときのふるまいとか、改段方法とか、いろいろ課題はあるんですが、それは、また今度。
つづく。
