【h2v.js】縦書き変換スクリプトの新しいバージョンを準備中です。

さて、縦書きを実現するJavaScript・h2v.jsです。暫くほったらかしで申し訳ないです。

最近、

という問い合わせを何件か頂いています。

既にお使い頂いている人はご存知のように、h2v.js は、

という手順を踏んで縦書き化を行うわけです。

通常、レスポンシブなページは CSS を上手いこと利用して作成するのだけれど、現在の h2v.js では、縦書きエリア内のフォントサイズなどの値は、「指定されているスタイルを無視して、スクリプトに与えられたパラメータの値でレイアウトを決める」という仕様になっているわけですね。

この方式だと、スクリーン / ウィンドウのサイズに応じてページレイアウトを切り替える、いわゆるレスポンシブデザインに対応させるのがちょっと難儀です。縦書きエリアのフォントサイズなどをスクリーンサイズに応じて変更するためには、現状だと、

h2v.js の外側で、別のJavaScriptを使って、

と、面倒くさい手続きを経なければなりません。

また、ブラウザのウィンドウサイズが変更されて、縦書きエリア内要素のサイズに関するスタイルが変更された場合には、何らかの方法で再変換を行ってやらなければ、縦書きレイアウトがグッチャグチャになってしまう可能性があります。

さて。

この問題に対処するには、どうすれば良いか。以下に記す方法しか無いのではなかろうか。その方法とは…

h2vconvert.init() の廃止。
縦書きエリア内のフォントサイズや行間スペースなどの値は、パラメータとして h2vconvert.init() に渡すのではなく、そのエリアに適用されているスタイルから取得する。
ウィンドウ / スクリーンサイズが変更され、それに伴って適用されているスタイルの値も変更された場合には、自動的にそれを検知して、必要ならば再変換を実行する。

こんな感じで、h2v.js の設置 / 設定方法に大幅な変更を加えざるを得ないのかな…と考えています。

割と重要な部分に変更が加わるので、いっそのことスクリプトの名称も変えたほうがよかろうなぁ…などと思いつつ、具体的な部分はまた後日、もう少し煮詰まってきたらお知らせしようと思います。

freefielder.jp