【縦組み段組みテキストフロー自動化スクリプト】サンプル

縦組み段組みテキストフロー自動化スクリプトとは、

縦組みで、段組みをするとき、
  • レスポンシブデザインで、それぞれ画面幅の違うデバイスごとのレイアウトを用意したときに、段の寸法が変わり1段に入る文字などの量が変わるために、デバイスごとに段数が違って表示されることがある。
  • ブログなどのように、同じレイアウトだけど投稿内容によって文章などの量が変わり段数が変わることがあっても、レイアウトを同じスタイルシートでまかないたい。
というようなときに、段数を予測しなくても自動的に段数を割り出しレイアウトのズレを整えるスクリプトです。

スクリプト適用なし

スタイルシートで、1段分の行長column-width)と段間column-gap)だけを指定しておけば、段数が増えても段組みだけなら保持されるが、段組み全体の高さheight)を指定しなおさないと、下につづく要素が食い込んできて重なってしまう。

スクリプト適用済み

JavaScriptにより、段数を割り出し段組み全体の高さheight)を指定しなおすことで、段数の増減によるレイアウトの重なりを避ける。

草枕

夏目漱石
 山路を登りながら、こう考えた。
 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
 人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
 越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。

草枕

夏目漱石
 山路を登りながら、こう考えた。
 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
 人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
 越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。


レイアウトの幅を変えてみる
幅を狭める
元に戻す
幅を広げる
文章内容を書き換えて、文章量を変えてみる

このページは、スクリプトの解説の都合上、ウィンドウ幅600px以上が表示可能なタブレットやPCで閲覧くださいませ。