【h2v.js】縦書き変換スクリプトの新しいバージョンを準備中です。
さて、縦書きを実現するJavaScript・h2v.jsです。暫くほったらかしで申し訳ないです。
最近、
- h2v.js はレスポンシブデザインのウェブベージに対応していないのか。
という問い合わせを何件か頂いています。
既にお使い頂いている人はご存知のように、h2v.js は、
- ウェブページに h2v.js を読み込んで、
- 縦書きにしたい div 要素に id を設定して、
- 関数 h2vconvert.init() に適切なパラメータ（1行あたりの文字数・フォントサイズなど）を渡して、
- 縦書き変換。
という手順を踏んで縦書き化を行うわけです。
通常、レスポンシブなページは CSS を上手いこと利用して作成するのだけれど、現在の h2v.js では、縦書きエリア内のフォントサイズなどの値は、「指定されているスタイルを無視して、スクリプトに与えられたパラメータの値でレイアウトを決める」という仕様になっているわけですね。
この方式だと、スクリーン / ウィンドウのサイズに応じてページレイアウトを切り替える、いわゆるレスポンシブデザインに対応させるのがちょっと難儀です。縦書きエリアのフォントサイズなどをスクリーンサイズに応じて変更するためには、現状だと、
h2v.js の外側で、別のJavaScriptを使って、
- ブラウザのスクリーンサイズを取得して、
- そのサイズに応じた縦書きのパラメータを設定して、
- 関数 h2vconvert.init() にそのパラメータを渡して、
- 縦書き変換。
と、面倒くさい手続きを経なければなりません。
また、ブラウザのウィンドウサイズが変更されて、縦書きエリア内要素のサイズに関するスタイルが変更された場合には、何らかの方法で再変換を行ってやらなければ、縦書きレイアウトがグッチャグチャになってしまう可能性があります。
さて。
この問題に対処するには、どうすれば良いか。以下に記す方法しか無いのではなかろうか。その方法とは…
- h2vconvert.init() の廃止。
- 縦書きエリア内のフォントサイズ や行間スペースなどの値は、パラメータとして h2vconvert.init() に渡すのではなく、そのエリアに適用されているスタイルから取得する。
- ウィンドウ / スクリーンサイズが変更され、それに伴って適用されているスタイルの値も変更された場合には、自動的にそれを検知して、必要ならば再変換を実行する。
こんな感じで、h2v.js の設置 / 設定方法に大幅な変更を加えざるを得ないのかな…と考えています。
割と重要な部分に変更が加わるので、いっそのことスクリプトの名称も変えたほうがよかろうなぁ…などと思いつつ、具体的な部分はまた後日、もう少し煮詰まってきたらお知らせしようと思います。
コメント